Выдвигающаяся боковая панель для wordpress. Плагины для создания панели с уведомлениями в WordPress

Здравствуйте, уважаемые читатели блога сайт. Сегодня хочу рассказать про довольно-таки функциональный и удобный плагин 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

Недавно один из наших читателей спрашивал, каким образом можно заменить его меню навигации по сайту на выезжающую 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-код для вывода выезжающей панели меню на маленьких экранах. Мы обернем его в

"primary", "menu_class" => "nav-menu")); ?>

Замените 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 для того, чтобы выяснить какие именно классы конфликтуют с вашими. Также не забывайте о том, что внешний вид панели вы вольны настроить под дизайн сайта.

Вы, вероятно, обратили свое внимание на то, что большинство разработчиков стали добавлять на свои веб-сайты специальные выезжающие панели, основанные на Javascript, которые размещаются либо в самой вершине сайта, либо в футере. Эти панели используются для привлечения пользовательского внимания к различным акциям, интересным запиям блога и т.д. Основная причина, по которой эти панели получили такое распространение это, безусловно, направленность на результат. Вы можете любить или ненавидеть эти панели, но вы обязательно согласитесь с тем, что они справляются с поставленными перед ними задачами. Существует множество бесплатных и коммерческих плагинов для добавления к своему блогу выезжающих панелей; я рассмотрю их далее в этой статье.

Бесплатные плагины

Hello Bar

Простой и скромный плагин, обладающий всеми необходимыми инструментами для того, чтобы создать панель в вершине сайта. Такая панель обязательно привлечет пользовательское внимание.

Attention Bar

Если вам необходимо привлечь внимание пользователей к какому-либо важному сообщению, вы можете создать предупреждающую панель, представляющую обычный блок div с дополнительной стилизацией. Однако стоит помнить, что такая панель очень сильно действует на нервы, и пользователям вашего сайта вряд ли понравится. С помощью плагина Attention Bar вы можете вывести неплохую панель в вершине страницы, которая не будет отвлекать от просмотра сайта. Богатые настройки помогут разработчику управлять расположением панели.

Easy Heads Up Bar

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

Notification Toolbar

Панель, размещаемая в футере вашего блога. Позволяет выводить произвольные уведомления. Плагин создан на базе Static Toolbar.

Quick Notice Bar

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

Viper Bar

Плагин позволяет добавить панель в область header’а сайта, которую можно использовать для увеличения числа подписчиков. Плагин включает в себя встроенные стили, интеграцию с Aweber и Feedburner, отслеживание конверсии, сплит-тестирование и др.

Коммерческие плагины

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

Attention Grabber

Плагин, позволяющий добавлять на сайт панель с уведомлениями. С помощью этого плагина можно легко вывести на экран произвольный текст, записи Twitter или RSS фиды. Кроме того, существует огромный список функций, позволяющих настроить внешний вид уведомления.

http://wplift.com/wordpress-notification-bar-plugins/

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

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

Первое, что вам нужно сделать, это установить и активировать плагин Q2W3 Fixed Widget (липкий виджет) . После активации плагина, перейдите в внешний вид » виджеты и нажмите на виджет, который вы хотите сделать липким. Плагин добавляет опцию фиксированный виджет во все ваши виджеты. Проверьте окно фиксированный виджет и сохраните изменения. Зайдите в ваш личный сайт и прокрутите вниз. Ваши фиксированный виджет теперь будет липким плавающим виджетом.

Плагин фиксированный виджет поставляется с опциями для настройки позиционирования основных виджетов. Перейдите в Вид » варианты фиксированного виджета , чтобы настроить плагин. На этой странице вы можете задать поля, добавить свои собственные HTML-идентификаторы и даже отключить фиксированный виджеты на телефоны и планшеты.

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

С помощью плагина – WPFront Notification Bar , вы сможете добавить на свой сайт панель с уведомлением, в верху или внизу сайта wordpress. В панели может отображаться какой-либо текст и кнопка с ссылкой на любую страницу, можно добавлять HTML код. Вы сможете настроить свои цвета для панели уведомления, можно выбрать расположения панели, вверху или внизу сайта. Можно зафиксировать панель, что бы при прокрутки страницы панель всегда была видна на экране. Можно выбрать на каких страницах будет отображаться панель, а на каких не будет и т.д.

Установить плагин вы сможете прямо из админ-панели wordpress. Перейдите по вкладке: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

После установки и активации плагина, перейдите на страницу: WPFront – Notification Bar , чтобы настроить плагин.

Display

– Enabled, поставьте здесь галочку, чтобы включить панель уведомления.

– Position, выберите где будет отображаться панель, Top – вверху, Bottom – внизу.

– Fixed at Position, если поставите здесь галочку, то панель будет всегда видна на экране, да же при прокрутки страницы.

– Display on Scroll, если поставите здесь галочку, то панель будет появляться при прокрутке страницы.

– Scroll Offset, здесь можно указать на сколько пикселей должна быть прокручена страница до появления панели с уведомлением.

– Bar Height, можете здесь указать высоту панели в пикселях.

– Position Offset, здесь можно задать расстояние от верхней части сайта до панели.

– Display After, можно задать время по истечении которого будет появляться панель, не работает для функции – Display on Scroll .

– Animation Duration, можно задать длительность анимации, когда панель выезжает на экран.

– Display Close Button, поставьте галочку, чтобы показывать кнопку с крестиком для закрытия панели.

– Auto Close After, можете указать через сколько секунд панель будет закрываться автоматически, не работает для функции – Display on Scroll .

– Display Shadow, показывать тень для панели.

– Display Reopen Button, если поставить галочку, то после закрытия панели, в углу экрана, будет отображаться кнопка для открытия панели.

– Keep Closed, если поставить галочку, то при закрытии панели на одной страницы, на других страницах панель уже отображаться не будет.

– Keep Closed For, здесь можно указать сколько дней не будет показываться панель для пользователя, который закрыл панель.

Content

– Message Text, укажите здесь текст, который будет отображаться в уведомлении, можно добавлять HTML код.

– Process Shortcode, поставьте галочку, чтобы можно было добавлять в уведомления шорткоды.

– Display Button, поставьте галочку, чтобы показывать в панели кнопку.

– Button Text, укажите здесь текст для кнопки.

– Button Action, укажите здесь ссылку для кнопки. Open URL in new tab/window – ссылка будет открываться в новом окне. No follow link – ссылка не будет индексироваться.

– Close Bar on Button Click, закрывать бар нажатием на кнопку.

Filter

– Start Date & Time, можно указать дату и время когда панель начнёт отображаться.

– End Date & Time, можно указать дату и время когда панель закроется.

– Display on Pages, выберите на каких страницах будет показываться панель. All pages – на всех страницах. Include in following pages – отметьте страницы, на которых будет показываться панель. Exclude in following pages – исключить страницы.

– Display for User Roles, здесь можно выбрать для каких ролей пользователей будет показываться панель. All users – для всех, All logged in users – только для авторизованных, Guest users – только гостям, For following user roles – отметьте галочками роли.

Color

– Bar Color, выберите цвета для панели.

– Message Text Color, укажите цвет для текста в панели.

– Button Color, выберите цвета для кнопки, можно указывать два цвета для отображения градиента.

– Button Text Color, цвет для текста в кнопке.

– Reopen Button Color, цвет для кнопки открытия панели.

– Close Button Color, выберите цвета для кнопки закрытия панели.

– Custom CSS, можно задать свои CSS стили для панели, но не обязательно.

В конце сохраните сделанные изменения .

Панель уведомлений вверху или внизу сайта wordpress обновлено: Июль 25, 2018 автором: Илья Журавлёв