GRAVITSAPA.INFO

Компьютеры, электроника, софт, авто, мото, вело, сайты, жизнь, советы :)

Посты категории: Создание сайтов

Делаем выезжающее боковое меню на чистом CSS

Итак, коротко и ясно… Ниже способ реализации простого выезжающего меню. Код сразу с комментами, что бы было понятно. Тут DEMO. Смысл в том, что нажимаем на значок ☰, и слева выезжает менюшка. Значек бургера превращается в крестик, как в Телеграме 🙂 Затем нажимаем на крестик и менюшка заезжает влево. Всё очень простенько… При желании код и стили легко модернизировать, изменить цвета и размеры. Так же если хотите переместить меню в правую часть, то в стилях просто все left замените на right. Опять же в DEMO песочнице можно экспериментировать. Преимущество такого меню в том, что его можно внедрить в большинство шаблонов.

Вот сама вёрстка:
<!-- input нужен для того, что бы в дальнейшем задать стили иконке ☰ по событию checked, то есть когда меню будем открыать и закрыать -->
<input type="checkbox" id="hmt" class="hidden-menu-ticker">
<!-- Далее вёрстка самой иконки. Разделена на спаны, что бы красиво превращать в крестик при открытии (почти как в Телеграме :) -->
<label class="btn-menu" for="hmt">
<span class="first"></span>
<span class="second"></span>
<span class="third"></span>
</label>
<!-- Менюшка раскрывающаяся и скрывающаяся -->
<ul class="hidden-menu">
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">CONTACTS</a></li>
</ul>
<!-- А затем уже контент странички. В примере просто зашголовок, что бы было видно, как менюшка нахлёстом выдвигается -->
<header>
<h1>ПРОСТОЕ ВЫЕЗЖАЮЩЕЕ БОКОВОЕ МЕНЮ</h1>
</header>

Далее CSS стили:
Смотреть полностью

Делаем плавную смену цвета фона при скроле страницы на Jquery

Идея предельно проста и понятна… Предположим, что хотим смену цвета фона страницы при прокрутке каждых 500px от верха. К сожалению найти готовый простой вариант, поддающийся модернизации, не удалось найти. Поэтому совместно с @only_darkangel был написан элементарный вариант:

Сперва подключим библиотеки в head, если они ещё не подключены
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>

Затем пару строк стилей
<style type="text/css">
body {
background: #fff;
height:4000px;
}
</style>

Далее скрипт, который и будет менять цвет страницы при прокрутке.
Цифра 400 задаёт скорость смены цвета (0,4 секунды). В самом низу цифра 451 задаёт время проверки положения скролла, данная цифра должна быть всегда больше времени скорости цвета.
Смотреть полностью

Функция <?php the_date(); ?> не выводит дату публикацию записи в WordPress или выводит не для всех записей

Для вывода даты публикации записи в WordPress обычно используется функция <?php the_date(); ?>. Но она используется для вывода даты публикации группы постов одного дня. То есть если в один и тот же день было 2 записи, то для первой дата выведется, а для второй нет.

В моём случае эта функция используется в микроразметке поста в таком формате <meta itemprop="datePublished" content="<?php the_date(); ?>">. Со временем я решил вывести видимую дату публикацию записи, и судя из выше сказанного, второй раз функция <?php the_date(); ?> уже ничего не выводила. Поэтому в просторах интернетов было найдено решение использовать функцию <?php the_time("d M Y"); ?> — она выводит для каждой записи индивидуально её дату публикации, а не для группы записей одного дня.

Настройка плагина Yoast SEO для WordPress

Вообще скажу сразу, что Yoast SEO каждый вебмастер или SEO специалист настраивает так, как он считает эффективным. Нету однозначного единого правильного решения. Поэтому ниже выкладываю настройки данного плагина для сайта gravitsapa.info, так как об этом давно просили многие знакомые вебмастера и читатели блога. Расписывать, что и зачем не буду. Всё в скриншотах. Если возникли вопросы, задавайте в комментариях. 😉 Ах да, всё описано для версии 4.9.

Пройдёмся по разделу Консоль. Сперва можно воспользоваться матером настроек. Там Yoast сам предложит базовые оптимальные варианты.

Затем во вкладке «Возможности» всё включаем. Что и для чего включаем, в каждом пункте можно прочесть. Если посчитаете, что то выключить, то это не приведёт к глобальным проблемам.

Смотреть полностью

Простой шаблон для WordPress от Gravitsapa

Сегодня на gravitsapa.info сделал редизайн. Добавил серости, флэтовости и мрачности 🙂 На самом деле всё было выполнено для максимально комфортного чтения и быстрой скорости загрузки страниц.
Но мне часто писали на почту с просьбой поделится старым шаблоном. Хоть и так его легко можно было содрать, всё равно ни кому не отправлял. Но теперь готов бесплатно раздать всем желающим…

Особенности шаблона GRAVI1:

Дэмо нет, есть скрин 🙂 СКАЧАТЬ ШАБЛОН GRAVI1

Как сделать 301 редирект/перенаправление с одной страницы на другую, не затрагивая подкаталоги?

Как сделать 301 редирект/перенаправление с одной страницы на другую? Но не простое перенаправление.
Допустим есть страница http://site.info/page, а так же есть страница http://site.info/page/narkotiki
Нужно сделать 301 редирект с http://site.info/page на http://site.info
Если это сделать обыкновенным методом:

Redirect 301 /page http://site.info

…то тогда произойдёт перенаправление и с http://site.info/page/narkotiki на http://site.info/narkotiki, но тогда мы получим уже несуществующую страницу…

Вообщем, если мы хотим, что бы редирект был с http://site.info/page на http://site.info, но страница http://site.info/page/narkotiki осталась как есть, тогда делаем так:

RewriteEngine on
RewriteCond %{REQUEST_URI} ^/page$
RewriteRule ^.*$ http://site.info? [R=301,L]
RewriteCond %{REQUEST_URI} ^/page/$
RewriteRule ^.*$ http://site.info? [R=301,L]

В моём случае сработало. Если знаете ещё способы или есть вопросы, пишите в комментариях 😉

Бесплатный скрипт Доски объявлений

Когда то хотел создать региональную доску объявлений. За основу был взять уже готовый скрипт, но переписан полностью. Поэтому можно сказать написан с нуля и доделан до финальной версии. В итоге проектом не было времени заниматься. За ненадобностью отдаю бесплатно движок.

Функциональные возможности доски объявлений:

  1. Создание рубрик двух уровней
  2. Рубрикам можно добавлять картинки
  3. Создание городов
  4. Добавление в объявлении фотографий с вотермаркой (какую захотите можно поставить)
  5. При добавлении объявления незарегистрированного пользователя автоматически создаётся личный кабинет, в котором можно управлять объявлением и профилем (логин и пароль приходят на почту)
  6. Объявление пользователь может обновлять раз в сутки, что бы оно поднялось вверх списка в категории
  7. Объявление можно добавить в блокнот
  8. Для объявления существуют платные услуги: Выделение (просто выделиться шрифт другим цветом) и Премиум (всегда будет вверху с надписью срочно, к тому же на специальном фоне).
  9. Можно покупать обе услуги и они будут работать гибридно — эффективность выше.
  10. Ценами на услуги можно управлять в админке.
  11. Оплата через Интеркассу, механизм оплаты работает безупречно.
  12. Присутствует оплата и через Робокассу, Вебмани, Ликпай и они работают, но нужно немного допилить интеграцию, так как я остановился только на Интеркассе.
  13. Вообще всем можно управлять в админке.
  14. Присутствуют блоки для рекламных объявлений (управляется из админки)
  15. Можно писать новости.
  16. Поиск по городу, рубрикам, ценам.
  17. И самое главное, всё что касается SEO учтено. Никаких дублей страниц. Все необходимые мета теги присутствуют, для объявлений всё генерируется автоматически.

Это только основные возможности. Движок Доски объявлений на самом деле гораздо интереснее и имеет функционал за который берут большие деньги. По сути, если хоть немножечко знаете PHP то на этой основе сможете сделать абсолютно любую доску объявлений под Ваши нужды.

Вообщем вот демо этого добра, можете оценить. В демо админки доступ закрыт, скачивайте, устанавливайте, тестируйте.

Были замечания в работе скрипта. Всё исправлено и перезалито 30.04.2017.

СКАЧАТЬ СКРИПТ ДОСКИ ОБЪЯВЛЕНИЙ (в архиве файлы и база).

Для входа в админку, нажмите «Войти в кабинет» и используйте Логин: admin@dostochka.ka Пароль: 123456

Подключение к БД прописывается в файле /files/configure/config.xml

Если не жалко, буду рад финансовым благодарностям.

Если замечены баги, ошибки, пишите в комментах. Но хочу обратить внимание, что чаще всего проблемы в работе скрипта возникают из-за особенностей хостинга или ограничений на нём.

Как включить SSL, редирект на HTTPS в Opencart?

  1. Всё просто, для начала отредактируем файлы /config.php и admin/config.php — необходимо все http заменить на https.
  2. Скачиваем модуль fix_https.ocmod и устанавливаем (должен уже быть установлен VQMod). Официальная страница модуля тут.
  3. В файле .htaccess пишем редирект на https:
    ### переадресация http на https
    RewriteCond %{HTTPS} off
    RewriteCond %{HTTP:X-Forwarded-Proto} !https
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
    ### переадресация с www
    RewriteCond %{HTTP_HOST} ^www.ваш-сайт.com$ [NC]
    RewriteRule ^(.*)$ https://ваш-сайт.com/$1 [R=301,L]
  4. В админке в настройках во вкладке «Сервер» пункты «Включить ЧПУ» и «Использовать SSL» поставить ДА.

Этого должно быть достаточно, если возникли вопросы, пишите в комменты.

Как устранить ошибку «error on line 2 at column 6: XML declaration allowed only at the start of the document»?

Установили плагин Google XML Sitemaps для WordPress? Но при генерации sitemap.xml видим ошибку: «error on line 2 at column 6: XML declaration allowed only at the start of the document» или подобную?
Выглядит это примерно так:

Проблема не существенная. Что бы устранить эту ошибку, зайдите в файл functions.php активной темы оформления и удалите в начале и в конце пустые строки. Зайти в файл можно прямо из админки: «Внешний вид -> Редактор -> Функции темы (functions.php). В 99% случаев это решает проблему. Если не получилось, то пишите в комментариях, постараюсь помочь.

Простые бесплатные CMS для простых маленьких сайтов

DokuWiki

Итак, начнём наш обзор с движка DokuWiki. CMS не требует MySQL, всё на файлах. Узко специализирован, а именно предназначен для организации Wiki сайтов, документационных сайтов.

microText

Следующим будет microText. Изначально идеально подходит для сайтов визиток. Но движок достаточно гибкий, поэтому возможно сделать и блог, и, более сложные сайты. Так же, не требует MySQL, чисто файловый.

FlatPress

Блоговый движок FlatPress не использует MySQL, клиентская часть напоминает старый WordPress. Устанавливается в несколько кликов за 5 минут. Есть категории, архивы, поиск, комментирование постов.

Micron

Micron — этому движку уже нужна база данных MySQL и он будет посложнее немного, чем предыдущий вариант. С точки зрения разработки — эта CMS очень простая и гибкая. Но даже, если Вы не планируете лезть в код, то просто быстро организовать простенький лёгкий информационный сайтик получится без проблем.

NanoCMS

NanoCMS — серия скриптов для организации разных сайтов и сервисов. С одной стороны серия данных скриптов обладает простотой и понятностью. Но для организации хоть какого-нибудь сайтика, потребуются всё же определенные знания. Поэтому как и в случае с Micro CMS, если Вы любите немного покопаться в коде и заняться творчеством, то Nano подходит 🙂

Эгея

Поскольку я сторонник минимализма, обязательно упомяну в данном обзоре о движке Эгея. Это блоговый движок, которому нужен MySQL, и минимум усилий для установки этой CMS. А так же минимум знаний и усилий для управления сайтом на Эгея CMS. Есть рубрики, теги, возможность комментирования и ещё немного плюшек. Как таковой админки нет. Всё управление происходит из клиентской части. Попробуйте — понравиться. Дизайн на столько приятный, что ничего даже менять не хочется 🙂

WordPress

Ну и завершу обзор знаменитым WordPress. Как и о других, вышеупомянутых движках, много писать смысла нет. Требует MySQL. Куча бесплатных шаблонов, плагинов. Море мануалов и уроков. Простой и гибкий в управлении. Можно организовать хороший блог, новостной портал, сайт визитку, портал или даже интернет-магазин. Хотя магазин на WordPress не рекомендую делать. В базовом варианте есть возможность комментирования, теги, категории, создание страниц и ещё немного плюшек.

Все движки в обзоре русскоязычные, имеющие официальные сайты и документацию. Если Вы знаете ещё хорошие простенькие CMS, пишите о них в комментариях.