Фиксированное верхнее меню и плавающий сайдбар в wordpress

WordPress: добавляем фиксированное навигационное меню

Фиксированная навигационная панель часто встречается на различных ресурсах. Такой функционал достаточно легко воспроизвести на WordPress. Фиксированная панель поможет вашим читателям быстро перейти к интересному разделу из любой точки на странице.

1. Добавляем область меню в файле funсtions.php

Для того, чтобы меню вывести на странице, должна иметься определенная область. Создадим новую с именем ‘ topnavigation ‘. Ниже приводится пример обычного кода для установки области меню в файле functions.php:

Если у вас уже есть определение функции register_nav_menus , просто добавьте в нее строку для меню ‘ topnavigation ‘.

2. Создаем меню

Переходим в панель администратора и открываем закладку для работы с меню. Создаем новое меню и назначаем для него только что созданную область ‘Top Navigation’. Затем заполняем пунктами для переходов на страницы. В примере используются пункты Home, Store, Events и Blog.

3. Вызываем меню

Нужно вызвать меню в самом верху раздела body в файле header.php. Очень важно разместить меню в собственном контейнере div . В нашем примере элемент div называется topnavigation . Нам нужно будет перемещать все в данном контейнере div со страницей позже. Есть простой способ решить задачу.

Используем следующий код в файле header.php:

В итоге получим следующий результат:

4. Добавляем стили для меню

Теперь можно поработать над внешним видом. Установим фоновый цвет и ширину на 100% для начала.

Следующий код нужно поместить в файл style.css (или тот, который используется в вашей теме):

Обновляем страницу и видим результат действий:

5. Сдвигаем меню в центр

Теперь нужно расположить наши ссылки в центре панели. Создадим элемент nav вокруг меню:

И определим для него стили:

Теперь наше меню будет выглядеть так:

6. Фиксируем меню

Теперь надо зафиксировать меню. Лучше всего установить меню вверху окна и сделать его плавающим поверх остальных элементов страницы.

Изменим стили для #topnavigation :

Но если перегрузить страницу, то вы увидите, что другие элементы заходят под наше меню и тогда, когда не нужно (в самом верху страницы).

Для исправления ситуации добавим поле сверху контейнера div для остальных элементов страницы. В нашем шаблоне такой элемент div называется #page . Вносим изменения CSS кода для него:

Получаем окончательный результат:

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

5 последних уроков рубрики «WordPress»

Почему WordPress лучше чем Joomla ?

Этот урок скорее всего будет психологическим, т.к. многие люди работают с WordPress и одновременно с Joomla, но не могут решится каким CMS пользоваться.

Про шаблоны WordPress

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

Самые первые настройки после установки движка WordPress

Сегодня мы вам расскажем какие первые настройки нужно сделать после установки движка WordPress. Этот урок будет очень полезен для новичков.

10 стратегий эффективного продвижения статей в блогах на WordPress

Продвижение статей в блоге — непростая задача. Часто бывает, что вы пишете действительно хороший контент, включаете визуальные эффекты, делаете правильные корректировки SEO, но это не дает ожидаемого результата.

Топ WordPress альтернатив для создания персонального сайта

Нужен персональный сайт, но вы не хотите задействовать WordPress? Тогда данная подборка для вас.

Как зафиксировать виджет и повысить конверсию формы в sidebar

Здравствуйте, уважаемые читатели и гости LediSeo! О Боже, я, практически год, не писала в своем любимом блоге. Возможно, кто-то уже решил, что проект закрылся, автор изменил свои взгляды и так далее. Не стройте иллюзий, проект не то что не закрывается, он наоборот развивается и выходит на новые высоты. Если проследить историю публикации материалов на сайте, то за последние четыре года было написано всего 5 статей. Мало! Но зато за это время я получила столько практики и опыта, что мало не покажется: продавец талантов, создатель страниц и сайтов, тренер. Успела реализовать свою идею и открыла Школу Бизнеса. Кажется, это такие разные ниши, но если заглянуть в суть, то у них найдется одно общее звено — умение технически правильно создавать проекты и принимать креативные решения в нестандартных ситуациях. Именно решение одной такой ситуации и подтолкнуло меня на написание этого материала. Сегодня я расскажу о том, как создать плавающий или фиксированный виджет в боковой колонке (sidebar) на WordPress. Такой виджет может стать очень эффективным инструментом для повышения конверсии вашей формы захвата.

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

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

Читать еще:  Что такое дроп, дропнутый или освобождающийся домен

Преобразовать любой статический блок в плавающий виджет мы можем двумя способами: при помощи плагина Q2W3 Fixed Widget, либо же при помощи специального скрипта. Но при этом следует учитывать одну немаловажную деталь: для того чтобы информация корректно отображалась на ресурсе, мы можем зафиксировать, то есть, превратить в плавающий виджет, только тот блок в sidebar, который размещается самым последним.

Как установить фиксированный виджет в сайдбаре при помощи плагина

Итак, для того чтобы добавить плавающий виджет, нам необходимо установить специальный плагин wordpress — Q2W3 Fixed Widget из репозитория. Для этого переходим в административной панели нашего сайта к пункту «Плагины» и нажимаем на кнопку «Добавить новый»

В появившейся строке поиска следует ввести название «Q2W3 Fixed Widget» и нажать на Enter. В результате мы попадем на страницу, где будут отображаться все расширения, в названии которых содержится «Q2W3 Fixed Widget».

Для установки этого плагина кликаем по «Установить» и далее нажимаем на кнопку «Активировать». После успешной активации плагина в пункте «Внешний вид» появляется новая панель «Фикс. Виджеты», которая содержит несколько блоков с гибкими настройками для отображения плавающего виджета.

Блок «Основные настройки» фиксированного виджета содержит в себе несколько параметров:

  • Верхний отступ — благодаря данной настройке мы можем установить отступ плавающего виджета от верхней области сайта;
  • Нижний отступ — позволяет установить расстояние от плавающего виджета до нижней области сайта;
  • Интервал обновления — задаем период времени, через который будут пересчитываться настройки положения блока: нижний и верхний отступы. Главное помним, чем чаще плагин будет пересчитывает положение блока, тем больше нагрузка на сервер сайта;
  • Ширина отключения — при помощи данного параметра мы можем указать при каких размерах экрана монитора будет отключаться от показа плавающий виджет. Дело в том, что фиксированный блок некорректно отображается на экранах смартфонов и планшетов, поэтому данную настройку обязательно используем. Я указала 800рх;
  • Высота отключения — работает аналогично параметру «Ширина отключения»

Далее следуют блок «Соместимость», с параметрами, которые оставляем по умолчанию или изменяем только в том случае, когда вы используете адаптивный шаблон и у вас появились какие-то ошибки. В этом случае можно воспользоваться этими параметрами.

  • Автоматически исправлять id виджетов — у некоторых шаблонов виджеты могут не иметь уникальные идентификаторы (html-атрибут id) или же они могут присваиваться некорректно. При помощи данного параметра можно исправить этот баг;
  • Только зарегистрированные пользователи — этот параметр актуален только тогда, когда на сайте есть возможность регистрации пользователей. Поставив галочку в данном пункте вы указываете, что плавующий виджет будет отображаться только для зарегистрированных пользователей, а для обычных посетителей он будет статичным.
  • Наследовать ширину фиксированного виджета — поставив галочку в данном пункте вы тем самым указываете, что ширина фиксированного блока будет изменяться вместе с шириной области sidebar;
  • Вкл. jQuery(window).load() — активируем данный пункт, если скрипты JavaScript работают некорректно;
  • Приоритет хука widget_display_callback — можем задать приоритет для выполнения функции, которая выводит на экран панель виджетов в sidebar.

И последний блок с настройками — это блок «Произвольные идентификаторы»

Этот блок более подойдет опытным веб-мастерам, которые применяют нестандартные элементы для вывода sidebar.

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

Открыть на редактирование самый последний виджет и поставить галочку в пункте «Зафиксировать виджет». Сохраняем произведенные изменения.

Как зафиксировать виджет без плагина

Как вы видете, создать фиксированный виджет при помощи плагина очень просто, но не всегда есть возможность использовать функции плагина. Так например, у меня на сайте sidebar выводится не с помощью виджетов, а через функции (как сделать верстку сайдбара я уже подробно ранее рассказывала) и поэтому я могу вывести плавующий виджет при помощи скрипта.

Для этого используем код, который следует разместить в файле footer.php

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

Вместо текста «Текст информации блока» размещаем код формы подписки, банер со ссылкой и так далее. Все что теперь остается сделать — это прописать css стили отображения зафиксированного виджета и медиа запрос в файле style.css

То есть, я указала верхний отступ при помощи параметра margin-top:40px; и прописала, что при размере экрана менее 740рх плавующий виджет появляться не будет вообще.

Теперь остается проверить как отображается фиксированный виджет — откройте главную страницу сайта на wordpress или самую длинную запись вашего ресурса и пролистайте ее в самый низ. Главное, при создании такого плавующего виджета соблюдать простые правила:

  1. фиксируем только последний виджет в sidebar;
  2. не стоит фиксировать несколько блоков одновременно, тем самым уменьшая конверсию одного из них;
  3. не допускаем некорректное отображение блока — соблюдаем отступы сверху и снизу, блок не должен наезжать на footer или отображаться полностью сверху;

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

Читать еще:  Как разобраться в css

Возможно Вам это будет интересно:

Вам понравилась статья? Расскажите о ней друзьям!

Q2W3 Fixed Widget — фиксированный / плавающий виджет в сайдбаре — плагин WordPress

Март 10, 2014 Опубликовано в Обязательные Плагины для WordPress 5 комментариев

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

Хочу сказать что Вы пришли по адресу и в этой статье мы познакомимся с одним из лучших плагинов для WordPress — Q2W3 Fixed Widget.

Я думаю что этот плагин создавался для того что бы его пользователям было легче акцентировать внимание посетителей на определенные блоки сайта – именно там где находятся рычаги увеличения доходов сайта, и по этому давайте рассмотрим несколько преимуществ использования плагина Q2W3 Fixed Widget:

  • Как я написал выше – притягивание внимания посетителей на определенные части сайта. Основной функционал этого плагина состоит в том, что он может фиксировать любой виджет в сайдбаре, содержание которого, при прокрутке вниз — вверх, всегда остается на виду у посетителей.
  • В таких плавающих виджетах можно нужно вставлять любого рода рекламу, начиная с Яндекс.Директ и заканчивая партнерскими ссылками в виде баннеров, изображений и т.д. Конечно же, если Вы создали какой-нибудь курс — его обязательно нужно фиксировать в виджетах сайдбара, сами понимаете по каким причинам.

Кстати, если хотите еще больше притягивать внимание своих посетителей на правую/левую/нижнюю часть сайта (сайдбар, футер), советую скачать, конечно же бесплатно, видео-курс – «Красивые Эффекты Для Изображений Сайта» и использовать плагин Q2W3 Fixed Widget и знания из курса вместе.

Гарантирую – результат не заставит себя ждать.

В принципе на этих преимуществах можно остановиться – главное понять идею самого плагина Q2W3 Fixed Widget — фиксирование виджетов в сайдбаре что бы они были всегда на виду у посетителя .

Единственное что нужно учитывать, это качество рекламных материалов которые Вы будете встраивать в плавающих виджетах – следите за тем что бы у этих материалов была высокая конверсия.

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

Q2W3 Fixed Widget — фиксированный / плавающий виджет в сайдбаре – установка и настройка плагина

Плагин Q2W3 Fixed Widget можно скачать по этой ==> ссылке . Установка стандартная.

Для того что бы Вы остались совсем без вопросов (только комментарии благодарности ), покажу на примере, как выбирать баннер с высокой конверсией и встраивать его в плавающий виджет сайдбара.

Возьмем, в качестве эксперимента, любой баннер сайта admitad.ru, выбираем программу в которой будем участвовать в качестве партнера, пусть будет интернет магазин цифровой и бытовой техники «Связной».

Нажимаем «Рекламные материалы» — «Баннеры», в результатах, находим ссылку « eCPC » и нажимаем для того что бы вверху отображались баннеры имеющие более высокие показатели:

После чего мы нашли такой баннер, нажимаем на «Получить код», копируем его и заходим в админ панель WordPress – «Виджеты».

Добавляем новое текстовое поле для вставки полученного кода нашего баннера.

Важно! Для того что бы плавающий виджет сработал нормально, новый виджет должен быть добавлен в конце списка виджетов, смотрите скриншот:

Если Вы зафиксируете один из виджетов которые находятся выше, при прокрутке страницы – он будет «наезжать» поверх всех остальных – что не есть красиво. Ради эксперимента -попробуйте сами убедитесь. Для правки этой проблемы нужно ковыряться в коде плагина, но не об этом.

Так как плагин у Вас уже установлен, внизу нового текстового поля, появится чек-бокс «Зафиксировать виджет» — включаем его.

Нажимаем сохранить, переходим на наш сайт, обновляем страничку и смотрим что получилось.

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

И куда бы не заглядывали посетители, виджет всегда будет за ними «следить».

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

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

Также, Директ показывает объявления которые могут связываться с содержанием странички (текста статьи), что опять же притягивает внимание пользователей, так как они сейчас этим и интересуются.

Надеюсь принцип работы Вам понятен, плагин Q2W3 Fixed Widget устанавливается и настраивается легко, все зависит от того что увидят посетители в заранее подготовленные Вами, плавающих виджетах. От этого же зависит и размер доходов.

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

Возможно, сейчас когда Вы читаете эту статью, я зафиксировал какой-нибудь виджет в своем сайдбаре, и Вы уже обратили внимание на его содержание — вот так он и работает.

Читать еще:  Irecommend (я рекомендую) — заработок в интернете на сайте отзывов

На этом у меня все, вопросы задавайте ниже, кнопки «Поделиться» — где-то рядом…

Автор: Max Vuzin

Увлекаюсь интернет рекламой всякого рода — контекстная, тизерная, баннерная, партнерки и т.д. А также нравится тема веб-дизайна. Не торопясь, изучаю CSS и все что можно с его помощью реализовать на сайте. Открытыми глазами слежу за миром рекламы и блоговеденья. А Вы, заходите в гости, горячий прием — обеспечен.

Плавающий блок в сайдбаре блога WordPress

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

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

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

Главное, что такой блок привлекает внимание, а именно это нам от нашей рекламы и нужно.

Если у Вас есть блог WordPress, то на блоге есть и сайдбар — неотъемлемый элемент блога. Когда посетитель прокручивает блог вниз, читая статью и комментарии, сайдбар прокручивается также вместе со статьей.

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

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

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

Как выглядит плавающий блок, Вы можете увидеть на блоге Александра Борисова. Кстати, очень рекомендую бесплатный курс « Вся правда о заработке на блогах » — его Вы найдете в сайдбаре у Александра. Из курса Вы узнаете, почему большинство блоггеров не зарабатывает, или зарабатывает намного меньше, чем могли бы.

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

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

Рассмотрим теперь эти варианты подробнее:

Плавающий блок с помощью плагина

Заходите в административную панель блога, в меню Плагины — Добавить новый , и в окошке поиска вписываете название плагина — Q2W3 Widget. Находите плагин Q2W3 Widget (Sticky Widget) , устанавливаете и активируете его.

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

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

Плавающий блок с помощью кода

Заходите в административную панель блога, в меню Внешний вид — Редактор , находите пункт Боковая колонка (sidebar.php), и ставите в то место, где должен быть плавающий блок, следующий код:

В коде обращаете внимание на числа, которые ответственны за момент, когда появляется плавающий блок, за расположение и ширину блока. Изменяете эти параметры на свои. Вместо слова «контент» ставите содержание своего блока. Также можете зайти в редакторе в шаблон Список стилей (style.css), и прописать стили для блока:

Вот, в принципе, и все, пользуйтесь. Небольшой нюанс — не ставьте в плавающий блок контекстную рекламу от Google Adsense — Гугл строго к этому относится, не стоит рисковать.

А остальную рекламу ставить можно, и наверное, даже нужно.

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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
Подписаться на блог: Дорога к Бизнесу за Компьютером

Вам понравилась статья? Поделитесь, буду весьма признателен:

Также приглашаю добавиться в друзья в социальных сетях:

Ссылка на основную публикацию
Adblock
detector