Как создать “липкую” плавающую боковую панель виджетов в WordPress. Добавляем выезжающую панель меню в тему WordPress Выдвижные панели плагин форма вопроса wordpress
Недавно один из наших читателей спрашивал, каким образом можно заменить его меню навигации по сайту на выезжающую jQuery панель меню. Такая панель может заметно повысить юзабилити на мобильных версиях сайтов. В этой статье мы покажем вам как добавить выезжающую панель меню в темы WordPress.
Примечание: Данная статья предполагает средний уровень знаний HTML и CSS.
Заменяем стандартное меню на выезжающую панель в WordPress
Целью здесь является показать выезжающую панель меню пользователям с небольшим разрешением экрана, при этом сохранив стандартное меню нашей темы, чтобы пользователи компьютеров могли видеть полную версию меню. Прежде чем мы начнем, важно понимать, что существует множество различных тем WordPress, и поэтому придется подправить стили CSS в зависимости от вашего дизайна.
Первым делом нам нужно открыть текстовый редактор типа Блокнот и создать новый файл. Скопируйте и вставьте в него следующий код:
(function($) { $("#toggle").toggle(function() { $("#popout").animate({ left: 0 }, "slow", function() { $("#toggle").html(""); }); }, function() { $("#popout").animate({ left: -250 }, "slow", function() { $("#toggle").html(""); }); }); })(jQuery);
Замените example.com на ваше доменное имя сайта, а также измените your-theme на действующую папку вашей текущей темы. Сохраните файл с именем slidepanel.js на компьютер. Этот код использует jQuery для переключения выезжающей панели меню. Также он анимирует эффект переключения.
Открываем свой FTP-клиент (Filezilla или Total Commander) и подключаемся к своему сайту. Далее переходим в директорию вашей тему и если в ней уже существует папка js , тогда откройте ее. Если же в вашей теме нет такой директории, то создайте её и загрузите внутрь файл slidepanel.js.
Следующий шаг — дизайн или поиск иконки для меню. Наиболее используемая иконка для этого — с тремя полосками. Ее можно создать в любом графическом редакторе (например, в Photoshop) или найти одну из множества существующих в гугле. В этом примере мы будем использовать размер 27x23px для иконки. После того, как вы ее создадите, переименуйте в menu.png и загрузите в папку с изображениями в директории вашей темы.
Следующий шаг — для выезжающей панели меню. Нужно просто скопировать и вставить следующий код в файл functions.php темы:
Wp_enqueue_script("wpb_slidepanel", get_template_directory_uri() . "/js/slidepanel.js", array("jquery"), "20131010", true);
Теперь, когда все подготовительные работы завершены, необходимо модифицировать дефолтное меню темы. Как правило, большинство тем выводят меню навигации в файле header.php темы. Открываем header.php и находим строку, похожую на эту:
"primary", "menu_class" => "nav-menu")); ?>
Задача состоит в том, чтобы обернуть меню темы в HTML-код для вывода выезжающей панели меню на маленьких экранах. Мы обернем его в
Замените example.com на ваше доменное имя и your-theme на вашу папку темы. Сохраните изменения.
Последний шаг: использование CSS для того, чтобы скрыть иконку меню для пользователей с большим экраном и отображать ее для тех, у кого маленькое разрешение. Также нам нужно отрегулировать положение иконки меню и внешний вид выезжающей панели. Скопируйте и вставьте этот код CSS в таблицу стилей вашей темы.
@media screen and (min-width: 769px) { #toggle { display:none; } } @media screen and (max-width: 768px) { #popout { position: fixed; height: 100%; width: 250px; background: rgb(25, 25, 25); background: rgba(25, 25, 25, .9); color: white; top: 0px; left: -250px; overflow:auto; } #toggle { float: right; position: fixed; top: 60px; right: 45px; width: 28px; height: 24px; } .nav-menu li { border-bottom:1px solid #eee; padding:20px; width:100%; } .nav-menu li:hover { background:#CCC; } .nav-menu li a { color:#FFF; text-decoration:none; width:100%; } }
Имейте в виду, что меню вашей темы может использовать различные классы CSS и они могут конфликтовать с теми, что приведены выше. Решить эту проблему можно, используя Инспектор в Хроме или Firefox для того, чтобы выяснить какие именно классы конфликтуют с вашими. Также не забывайте о том, что внешний вид панели вы вольны настроить под дизайн сайта.
Здравствуйте, уважаемые читатели блога сайт. Сегодня хочу рассказать про довольно-таки функциональный и удобный плагин upPrev, который умеет реализовывать сразу несколько видов перелинковки страниц. Его работу вы можете наблюдать (во всяком случае, на момент написания этой статьи) внизу каждой страницы со статьей — справа появляется выплывающая панель со списком похожих материалов.
Плагин умеет выводить не только похожие материалы, но и предыдущие статьи из той же рубрики или архива тегов (это тот самый о котором мы говорили подробно в приведенной статье, и практическую реализацию которого я описывал ), предыдущие материалы в формате всего блога, а так же публикации, взятые наугад. К тому же все дело это можно сдобрить миниатюрами, если при написании постов вы их создаете.
Какую роль перелинковка играет сейчас в продвижении сайта
Вообще оптимизация сайта, для его дальнейшего успешного продвижения, является задачей номер раз (номер два — это получение обратных ссылок). Внутренние факторы могут заблокировать и снизить влияние всего остального. С другой стороны и нельзя (особенно с ключевыми словами в контенте и анкорах внутренних ссылок).
Сейчас рулит комплексный подход к продвижению и в нем перелинковка занимает довольно-таки значимое место. Последнее время стало модно использовать инфографику для наглядного представления всего чего угодно. По теме Сео можно найти множество подобных блок-схем, например, у Сеопрофи в статье про то, как раскрутить сайт . Я, к сожалению, пока не готов создавать такие шедевры, но отсылка к ним позволит мне не лить лишнюю воду.
Какую схему линковки выбирать ? Довольно сложный вопрос, ибо многие из хорошо работающих раньше схем (все тоже пресловутое «кольцо», ссылки на способы реализации которого я приводил чуть выше) уже не дают тех феноменальных результатов, что еще наблюдались десяток лет назад. Поисковики тоже учатся и стараются не учитывать то, что с их точки зрения является явной накруткой.
Перелинковка в виде ряда колец, по теории Пейдранка, должна серьезно увеличивать статический вес страниц сайта (), которые в этом кольце задействованы.
Однако это не всегда работает на практике. Возможно, что при выпадении отдельных страниц из индекса кольцо разрывается, а возможно, что для снижения накруток поиск ввел серьезный понижающий коэффициент в классическую формулу расчета статвеса.
У перелинковки страниц сайта есть и другая задача, которая направлена уже не на то, чтобы понравиться Яндексу или Гуглу, а на то, чтобы понравиться посетителю . Одной статьи, чтобы он распробовал ваш блог, будет явно недостаточно — нужно обязательно предложить ему пройти еще куда-нибудь, чтобы заинтересовать, задержать и, возможно, сделать его своим подписчиком.
Таким образом, линковка влияет еще и на поведенческие факторы , которые поиск тоже учитывает и с каждым годом все в большей и большей степени. Понимают это практически все вебмастера и добавляют на сайт блоки с похожими материалами, с наиболее читаемыми публикациями или со статьями из той же рубрики. Наверное, есть и еще вариации на тему.
Естественно, что вариантов реализации внутренней перелинковки тоже существует масса. Можно даже обойтись без плагинов (пример можно посмотреть в статье), но и их для линковки написано немало. Самое трудное — это подобрать идеально работающий именно на вашем блоге вариант.
Сам я перепробовал их массу и о некоторых из них даже написал обзоры (). На самом деле, упомянутый плагин является одним из лучших для вычисления похожих постов и вывода их списка на страницах блога.
Но его данные умеют использовать и другие расширения Вордпресс, оформляя их более красочно или вычурно. В той же статье про YARP я как раз приводил пример использования его данных плагином Related Posts Slider, который позволял выводит похожие посты в виде такого вида:
Ну, или такого:
Сегодняшний наш герой под названием upPrev тоже умеет брать информацию из базы Yet Another Related Posts Plugin и правильно делает, ибо нет нужды каждый раз изобретать велосипед. Давайте, собственно, и перейдем к описанию возможностей этого чуда инженерной мысли.
Варианты линковки при помощи плагина upPrev
Я стили эти не трогал, ибо пошел другим путем (не самым прямым), который опишу ниже по тексту. За сим переходим на вторую вкладку:
Выбираем количество постов, на которые данный плагин будет формировать ссылки. А вот чуть ниже, мы как раз и выбираем тип перелинковки для нашего сайта . У меня выбран вариант похожих постов с использованием базы плагина Yet Another Related Posts Plugin (он должен быть предварительно установлен), но вы можете настроить линковку типа «кольца», выбрав второй или третий вариант, а так же перелинковку в виде большого кольца, выбрав первый.
Это дело я предполагал организовывать только для постов, о чем и говорит галочка в соответствующем поле. Кроме заголовка поста в этой панели может выводиться и несколько слов (их количество задается в самом низу) из начала поста или области цитаты, если вы ее заполняете. Мне это показалось лишним.
Третья вкладка служит для настройки отслеживания числа кликов по ссылкам в этой панели, чем я не стал пользоваться. Однако, на четвертой вкладке кэш я все же активировал. На пятой вкладке я запретил показ панели на мобильниках, но не возразил против ее выезда на планшетах:
Ну, и все, настройки upPrev на этом завершил, но внешний вид панели я уже изменял в настройках плагина Yet Another Related Posts Plugin.
Настройка внешнего вида содержимого выезжающей панели
Там я выбрал файл шаблона, который будет отвечать за вывода похожих постов (суть и специфику работы с этим расширением посмотрите про приведенной чуть выше ссылке):
Т.о. теперь за внешний вид списка похожих постов, выводимых плагином upPrev (в выезжающей панели) отвечает код, который прописан у меня в файле yarpp-template-list.php из папки с моей темой (). Если ваш блог формирует миниатюры к постам, то имеет смысл выбирать шаблон из арсенала Yet Another Related Posts Plugin с их поддержкой.
Код у этого файла такой:
-
have_posts()):
$postsArray = array();
while ($related_query->have_posts()) : $related_query->the_post();
$postsArray = "
- ".get_the_title()." "; endwhile; echo implode(" "."\n",$postsArray); // print out a list of the related items, separated by commas else:?>
No related posts.
Как видите, именно там живет заголовок выезжающей панельки, поэтому нужно будет преобразовать (при необходимости) этот файл в кодировку UTF-8 без BOM во избежании кракозябр (). Не знаю как у вас, а у меня уже довольно долго живет в качестве основного редактора Notepad++ () и в нем это преобразование делается так:
Понятно, что этот код формирует всего лишь банальный Html список (), а за внешний вид отвечают свойства CSS, прописанные в файле стилей для имеющихся в коде классов. В моем случае эти стили выглядят так:
A.oy {color: #333;font:700 1.2em/1 "PT Sans Narrow", Arial, sans-serif;line-height:18px;} li.eto {text-align:center;padding:12px 5px 17px 5px;margin: 5px 0;border: dotted 2px #ccc;} li.eto:hover {text-decoration:underline;} div.oyy {margin:0 0 0 0;padding:5px 0;font:normal 17px "Trebuchet MS", Verdana, Arial;color:#666;}
Класс lampochka добавляет зеленые галочки, которые в Css коде задаются у меня с помощью base64 кода (где-то я этот код скопировал). Если интересно, то гляньте в моем style.css. Ну, вот и все. Если что-то забыл, то спрашивайте. Правда, настраивал я этот вариант перелинковки месяц назад и уже что-то из головы за это время улетучилось.
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Как в плагине Yet Another Related Posts убрать прозрачный пиксель http://yarpp.org/pixels и изменить надпись Похожие материалы
Создание списка похожих материалов в WordPress (с миниатюрами) при помощи плагина Related Posts для внутренней линковки
Как улучшить поведенческую статистику сайта с помощью плагинов Yet Another Related Posts и Related Posts Slider для Вордпресса
Simple Counters и Category and Page Icons - красивые счетчики RSS и Twitter, а так же иконки для категорий и страниц в WordPress
WordPress плагины на моем блоге (сайт)
Слайдеры и слайд-шоу для вашего сайта - какие варианты существую и как использовать скрипты jQuery Slider
Хлебные крошки в WordPress средствами плагина Breadcrumb NavXT (усиливаем перелинковку)
Снижение потребляемой в WordPress памяти при создании страниц - плагин WPLANG Lite для подмены файла локализации
WP-PageNavi - постраничная навигация для блога на WordPress — установка, настройка и изменение внешнего вида пагинации
Calendarize it! - Календарь мероприятий для WordPress
Не отправляется почта из WordPress и не работает визуальный редактор - решение с помощью плагинов Configure SMTP и Post Editor Buttons
Наверняка вам частенько встречались на страницах сайтов, выдвигающиеся панели различного вида и расположения, высказывающие сверху, снизу, справа или слева на полном автомате, с заданным интервалом времени, или же активируемые по клику. Как правило, в таких панелях размещают скрытую с глаз пользователя до поры до времени, какую-либо дополнительную информацию, важную и не очень. Например формы подписки, виджеты соц.сетей, ссылки, теги, контактные данные и т.д и т.п., короче, всё что угодно.
Существует огромное количество готовых решений реализации выдвижных панелей на javascript, модули и плагины для различных CMS, отдельные плагины jQuery, но совсем немного, попадалось мне на глаза, полностью рабочих способов на чистом CSS.
Давно хотел замутить что-нибудь этакое, механизм использования скрытых чекбоксов хорошо знаком и понятен, да всё как-то руки не доходили. И вот, наткнувшись в пыльных кладовых CodePen на одну , решил поэкспериментировать и выдать на гора, вполне себе рабочий, немного видоизменённый и адаптированный для нашего брата, свой вариант выдвижной верхней панели на чистом CSS, получилось то, что получилось)).
Пример посмотрели, с оригиналом сравнили, и теперь, кому оно надо, давайте вместе разберём, как всё это дело работает. Ещё раз напоминаю, никаких js, только девственно-чистый html и «магия» css, сделают всю работу.
Раскладка Html
Состоит из трёх основных элементов: базовый контейнер, блок с содержанием и кнопка открытия/закрытия панели.
Как видите в конструкции панели присутствует флажок type=" " , по-умолчанию скрыт и неактивен. С помощью тега