GRAVITSAPA.INFO

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

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

Почему может не работать стиль transition-delay?

Итак, имеем менюху с выпадающими списками. В стилях это реализовано как display: none по умолчанию для подменю. И display: block для подменю при hover на основное меню.

Хотим сделать анимацию и задержку появления меню. Используем стиль transition с параметрами или просто стиль паузы transition-delay. Но из-за того, что подменю изначально назначено display: none, то transition работать не будет.

Для этого вместо display: none и display: block будем использовать opacity: 0; visibility: hidden; и opacity: 1; visibility: visible;.

Пример реализации можно посмотреть тут.

Выводим количество комментариев в Moguta CMS используя плагин «Древовидные комментарии»

В Moguta CMS, что бы организовать более функциональные отзывы в товарах обычно используют плагин «Древовидные комментарии». Работает он отлично и есть в нём дополнительно функция для вывода количества комментариев, вот такой шорткод [mg-treelike-count-comments item="" type=""].

А вот таким шорткодом мы выводим сами комментарии в табе комментариев страницы товара [mg-treelike-comments type=""]. Вставлять его нужно в файле mg-templates/default/views/product.php в div с id="tab2".

Итак, а что бы заработал первый шорткод и начал выводить количество отзывов к определённому товару, нужно в параметре item указать относительную ссылку на сам товар. Т.е. выглядеть это должно например так [mg-treelike-count-comments item="/ssilka-na-tovar" type=""]. Поэтому нужно, что бы в шорткоде автоматически определялась относительная ссылка на товар. Я захотел количество вывести в названии самого таба:

Для этого снова заходим в файл mg-templates/default/views/product.php и там где ссылка с параметром href="#tab2" должен получится такой код:
<li><a href="#tab2">Отзывы ([mg-treelike-count-comments item="/<?= URL::parsePageUrl(); ?>" type="product"])</a></li>

Надеюсь вам удалось разобраться где что вставлять и заменять в коде 🙂 Если возникли вопросы, пишите в комментариях 😉

Закрываем от индексации технические страницы в Moguta CMS

Для эффективного продвижения интернет-магазина на Moguta CMS следует правильно настроить индексацию страниц. Делать мы это будем при помощи мета тега <meta name="robots" content="noindex, nofollow" /> — в случае полного закрытия от поисковиков (страницы корзины, регистрации, личного кабинета и подобные), и <meta name="robots" content="noindex, follow" /> — в случае, если хотим что бы поисковики сканировали внутренние ссылки на странице, но не брали её саму в выдачу (общая страница каталога и страницы пагинации).

Для этого открываем файл в папке mg-core/lib/mg.php и примерно на 800 строке ищем public static function meta(). Там найдём следующее:
$meta = '
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>'.$title.'</title>
<meta name="keywords" content="'.$metaKeywords.'" />
<meta name="description" content="'.$metaDescription.'" />
';

Код выше заменяем на этот:
Смотреть полностью

Простой Progress Bar на JQury как на YouTube

  1. Создаем файл progress.js, помещаем его в удобную папку на сайте и подключаем на всех страницах между <head></head> вот так <script src="полный_адрес_к_файлу/progress.js"></script>
  2. В файл progress.js вставляем этот код:
    $(function() {
    var $progress = $('#progress');
    $(document).ajaxStart(function() {
    if ($progress.length === 0) {
    $progress = $('<div><dt/><dd/></div>').attr('id', 'progress');
    $("body").append($progress);
    }
    $progress.width((50 + Math.random() * 30) + "%");
    });
    $(document).ajaxComplete(function() {
    $progress.width("100%").delay(200).fadeOut(400, function() {
    $progress.width("0%").delay(200).show();
    });
    });
    $(document).ready(function(){
    $.getJSON('https://jsonip.com');
    });
    });
  3. Дописываем такие стили, которые можно подправить под свой дизайн:
    Смотреть полностью

Делаем выезжающее боковое меню на чистом 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]

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