П лавающие элементы, блоки для экране по мере прокрутки, как правило имеют более высокий щелчок через и коэффициент конверсии, чем статичные объекты. Вот почему многие веб-сайты используют плавающие элементы через их сайт. Мы видели такие элементы, как строка заголовка, бар нижнего колонтитула, виджет в сайдбаре с рассылкой и др. В прошлом мы показали вам, . В этой статье покажем вам, как создать липкую плавающую боковую панель виджетов в WordPress, так чтобы вы могли сделать Вашу email-рассылку выделиться.
Примечание: это работает для всех типов виджетов боковой панели, а не только для вашего мейл. Вы можете использовать его для акции по продвижению товаров, популярные сообщения, Flickr фотографии, календарь Google, и в принципе все остальное, что вам нравится.
Первое, что вам нужно сделать, это установить и активировать плагин Q2W3 Fixed Widget (липкий виджет) . После активации плагина, перейдите в внешний вид » виджеты
и нажмите на виджет, который вы хотите сделать липким. Плагин добавляет опцию фиксированный
виджет
во все ваши виджеты. Проверьте окно фиксированный
виджет
и сохраните изменения. Зайдите в ваш личный сайт и прокрутите вниз. Ваши фиксированный
виджет
теперь будет липким плавающим виджетом.
Плагин фиксированный виджет поставляется с опциями для настройки позиционирования основных виджетов. Перейдите в Вид » варианты фиксированного виджета , чтобы настроить плагин. На этой странице вы можете задать поля, добавить свои собственные HTML-идентификаторы и даже отключить фиксированный виджеты на телефоны и планшеты.
Липкий плавающий сайдбар могут быть использован, чтобы повысить повысить общую лояльность пользователей. Вы можете иметь несколько фиксированных виджетов в боковой панели. Тем не менее, они могут легко раздражать, и это может негативно повлиять тоже. Держать равновесие в вашем дизайне, так чтобы вам не раздражать ваших пользователей.
Здравствуйте, уважаемые читатели блога сайт. Сегодня хочу рассказать про довольно-таки функциональный и удобный плагин 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-код для вывода выезжающей панели меню на маленьких экранах. Мы обернем его в
Замените 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/
Панели уведомлений - исключительно эффективное средство для стимулирования перехода пользователя на требуемую страницу. Кроме того они служат для отображения важной информации, поскольку всегда привлекают внимание пользователя. Некоторые панели содержат формы для ввода данных и могут служить, например, для организации подписки на почтовые рассылки.
В интернет-магазинах панели уведомлений активно используются для извещения посетителей об акциях и скидках и, таким образом, являются мощным механизмом, способствующим увеличению объема продаж.
В этом обзоре я расскажу лишь о некоторых, самых функциональных и привлекательных, на мой взгляд, плагинах для создания таких панелей на страницах сайта или блога на платформе . Каждый из них имеет свои достоинства, множество функций и возможность адаптации внешнего вида под стиль и дизайн вашего сайта. Не сомневаюсь, что благодаря этому обзору вы сможете подобрать плагин, наиболее полно соответствующий вашим требованиям.
Custom Notifications
Качественный плагин премиум-класса, который обладает всеми необходимыми функциями, присущими плагину подобного уровня.Панель уведомлений может содержать простой текст, форму для ввода e-mail или на сайте, соцсетей и таймер обратного отсчета времени.
И все это заключено в адаптивные контейнеры и будет корректно отображаться на любых экранах. Кроме того, панель настроек позволяет управлять положением на странице и цветовой гаммой практически без ограничений.
Стоимость: $29
BugMeBar WordPress plugin
Простая, но привлекающая внимание панель с очень красивыми и броскими цветовыми эффектами. Ее можно расположить в любом месте страницы, а кроме того она может устанавливать cookies и не отображаться при последующем посещении страницы, если пользователь вдруг не захочет ее больше видеть.Из других особенностей следует отметить:
- Указание страниц, на которых панель будет отображаться, и на которых нет.
- Установка времени действия cookies.
- Полный контроль над внешним видом, включая выбор цвета, прозрачности и т.п.
- Возможность смещения фиксированных колонитулов, сохраняя, при этом, целостность макета.
- Возможность включать или отключать транзитивность и анимацию
Hello Bar
Одна из наиболее популярных панелей уведомлений для Wordpress . И, к тому же, бесплатная , хотя по функциональности ничем не уступает своим премиум-аналогам.Для использования Hello bar достаточно перейти на плагина и ввести URL своего блога. Далее вы попадете в панель настроек, где сможете настроить местоположение и внешний вид уведомлений. Причем панель настроек обладает функцией предварительного просмотра, так что вы быстро сможете придать вашим уведомлениям желаемый вид.
После завершения настроек вы получите фрагмент кода, который нужно вставить непосредственно на страницу сайта. Если же вы не чувствуете себя достаточно квалифицированным для этой операции можно установить , который сделает за вас эту рутинную работу.
DW Promobar
Довольно простой плагин, содержащий только самое необходимое. В панели уведомления может отображаться простой текст, кнопка, ссылка или таймер обратного отсчета времени . Выглядит привлекательно и предоставляет полный контроль над всеми параметрами настройки.
Foobar – WordPress Notification Bars
Этот обзор не будет полным, если я не упомяну Foobar. Это один из наиболее широко используемых премиум-плагинов этого класса. Он содержит более 30 параметров настройки и, в отличие от многих других, позволяет настраивать панель уведомлений отдельно для каждой страницы .Стоимость: $9
WordPress Notification Bar
Бесплатный плагин , легкий в использовании и активации. Содержимое панели может быть простым текстом, а также содержать кнопку, ассоциированную с определенным действием. Благодаря широким возможностям цветовых настроек, вы сможете идеально адаптировать панель под дизайн вашего сайта.
Royal Footer Bar
Royal Footer Bar - плагин высочайшего класса, действительно «королевский». Он выглядит очень профессионально и обладает большим набором всевозможных опций.Информационная панель может содержать обычный текст, форму для подписки на почтовые рассылки и различные ссылки, в том числе на аккаунты в соцсетях. В панели настроек можно не только установить необходимые настройки, но и получить полную статистику об активности.
Изюминкой этого плагина является то, что разработчики назвали A/B/C тест - вы можете задать несколько вариантов настроек и, оценив их в рабочем окружении, выбрать наиболее соответствующий концепции сайта.
Стоимость: $39
