Как зафиксировать меню в вордпресс
Фиксированное горизонтальное меню для сайта
Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! В этой статье я подробно и в полном объеме проинформирую вас, как средствами CSS и HTML зафиксировать верхнее меню сайта. Такая плавающая панель с оглавлением всех важных разделов вебресурса может оказаться весьма важной частью юзабилити (в этом материале о понятии usability). Она будет постоянно находится перед глазами пользователя даже в том случае, если он прокручивает страницу.
Грамотно оформленное фиксированное меню способно улучшить поведенческие характеристики вебсайта, в том числе увеличить количество просматриваемых страниц, например.
Конечно, здесь важно не переборщить, как и в любой другой области оптимизации ресурса. Такая зафиксированная в одном месте панелька не должна сильно раздражать. В противном случае это может привести к обратному эффекту.
Конечно, для веб-ресурсов, работающих на разных движках, при реализации такого меню обязательно надо иметь ввиду свои нюансы, хотя общие принципы его создания остаются неизменными. Поэтому я предложу вам вариант горизонтальной плавающей менюшки для веб-проекта, работающего на Вордпресс, поскольку это самая популярная система управления контентом сайта. Таким образом мы охватим наибольшее число пользователей, которым не придется ничего дополнительно додумывать самостоятельно.
Горизонтальное плавающее меню средствами CSS и HTML
Сразу скажу, что при окончательном выборе для своего блога я остановился именно на варианте фиксированного меню, поскольку оно лучше всего подходит при учете особенностей моей темы. У меня вначале панелька с навигационным содержанием находилась под шапкой.
Но я решил провести эксперимент, переставив ее в самый верх вебстраницы. По этой причине пришлось произвести некоторые манипуляции с одним из шаблонов темы Вордпресс. А после редактирования стилей CSS результирующая картина стала такой:
Если вы также решили переставить менюшку снизу шапки на самый верх, то вам необходимо поработать с файлом header.php вашей темы. Именно там обычно находится фрагмент кода, отвечающий за верхнюю панельку навигации. В моем случае он выглядит теперь так:
Подобным образом можно редактировать любые шаблоны, хотя, конечно, возможны и нюансы. Хорошо уже то, что вы имеете представление, где копать. Единственное, вместо навигационного тега nav у вас может присутствовать стандартный контейнер div с прописанными классами и идентификаторами (ID), например, такими:
Если у вас веб-ресурс под управлением WordPress и вам вдруг что-то непонятно, о чем я говорю, советую ознакомиться для начала со устройством и шаблонов оформления WP, многое сразу же станет ясным. Кроме того, для полного понимания темы неплохо бы взглянуть хотя бы одним глазком на разделы «Основы HTML» и «Уроки CSS», ссылки на которые присутствует в самом начале публикации и где вы также найдете необходимую информацию.
Итак, у вас меню расположено в самом верху страницы, ну или вы туда его переместили. Все-таки продолжу с примером моей темы, чтобы не растекаться мыслью по древу. Исходная позиция для последующих изменений стилевых свойств навпанели готова.
Теперь для фиксации меню воспользуемся таким полезным свойством как position fixed, которое и позволяет закрепить его в верхнем положении. Привязываем его к классу или ID контейнера, в который заключена менюшка (см. скриншот выше). В моем случае это и принадлежащий ему class main-navigation. Я добавил к нему выше упомянутое свойство в файле style.css:
Напомню, что классы обозначаются в файлах стилей с точкой впереди, а селекторы ID с решеткой (пример: #site-navigation). Далее мне захотелось, чтобы менюшка располагалась по длине шапки, а не во всю ширину области просмотра, поэтому я указал такое CSS правило для того же класса:
Чтобы части навигационного блока не прятались за некоторыми элементами (например, за рекламными объявлениями Адсенс) при прокрутке страницы, пришлось указать z-index к классу main-navigation с параметром 1000:
Таким образом, полный комплект правил для фиксированного меню данного блога будет таким:
Свойство background позволяет придать цветовое оформление навигационной панели. Дальше мне еще необходимо было прописать величину отступа баннера (шапки) от верхнего края, чтобы панелька навигации не накладывалась на его изображение:
Теперь при прокрутке страницы навигационная панель будет прилипать к верхнему краю окна просмотра, следовательно, задача выполнена. В этом конкретном случае изображение менюшки реализовано с помощью средств CSS и HTML.
Конечно, для каждой конкретной темы придется проработать свои детали. Но, думаю, это не будет большой проблемой. Тем более, что во всех современных браузерах есть инструменты разработчика, позволяющие поэкспериментировать со стилевыми свойствами и кодом HTML.
Все эти средства являются аналогами известного расширения Firebug для браузера Firefox (в этой статье об этом плагине можете найти подробный материал). Кстати, в новейших версиях Мазилы подобный инструмент уже встроен и вызывается простым нажатием клавиши F12. То же самое можно сказать и о других популярных обозревателях.
Поскольку современное развитие технологий привело к тому, что число пользователей мобильных устройств сравнялось и уже даже превосходит количество владельцев ПК и ноутбуков.
С этим нужно считаться, поэтому при создании фиксированной навигационной панели требуется ее адаптировать под малые экраны. Чтобы понять, как это реализовать, перейдите по только что данной ссылке. Только имейте ввиду, что в моей теме все базовые свойства CSS прописаны для мобильников, а уже затем с помощью директивы @media указаны правила для более крупных мониторов. Вполне может оказаться, что у вас все наоборот.
Создание фиксированного меню при помощи скрипта
Теперь посмотрим, как можно элегантно закрепить менюшку с помощью небольшого кода JavaScript. Причем зафиксировать панель таким образом можно при любом его расположении относительно шапки сайта (снизу или сверху).
Липкое меню на сайт WordPress плагин
С помощью плагина — myStickymenu вы сможете сделать на своём сайте wordpress липкое меню. При прокрутке страницы меню будет всегда на виду, на экране. В настройках плагина можно выбрать цвет меню, установить уровень прозрачности, расстояние в пикселях перед появлением меню и т.д.
— Sticky Class, укажите здесь класс меню, страницы которого должны отображаться в липком меню. В конце записи я покажу как узнать класс меню.
— Sticky z-index, оставьте без изменений.
— Sticky Background Color, можете выбрать цвет меню.
— Sticky Opacity, можете задать здесь степень прозрачности меню.
— Sticky Transition Time, здесь указано время перехода от стандартного меню к липкому.
— Disable at Small Screen Sizes, отключить липкое меню на небольших экранах. Укажите размер экрана, если экран будет меньше установленного размера, то липкое меню показываться не будет.
— Make visible on Scroll, расстояние в пикселях после которого будет появляться меню при прокрутке страницы.
— Make visible on Scroll at homepage, то же самое что и выше, но на главной странице.
— Fade or slide effect, можно включить слайд эффект.
— myfixed css class, оставьте без изменений.
— Disable CSS style, можно отключить стили по умолчанию и использовать свои стили.
Перейдите на главную страницу вашего сайта, откройте исходный код страницы с помощью правой кнопки мыши. В коде, примерно по середине страницы, вам нужно найти HTML код меню сайта, там будут указаны названия страниц. В начале этого кода будет указан класс меню в кавычках, скопируйте класс меню и вставьте его в поле Sticky Class в настройках плагина. Перед названием класса меню поставьте точку, как на скриншоте.
После сохранения настроек липкое меню появится на вашем сайте.
Фиксированное верхнее меню и плавающий сайдбар в WordPress
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Это скорее заметка для себя, чтобы не забыть, что именно делал, когда захочу все вернуть взад. Началось все с того, что один из читателей предложил написать про плагин для WordPress под названием Q2W3 Fixed Widget (Sticky Widget), который может сделать любой виджет в сайдбаре плавающим или, другими словами, фиксированным.
Т.е. прокручивая страницу вы увидите, что основная часть сайдбара уйдет вверх, но вот тот виджет, что будет расположен в самом низу, останется в области просмотра как бы далеко вы не продвигались вниз по тексту. Сразу оговорюсь, что размещать контекстную рекламу подобным образом запрещено и за это могут наказать (как выяснилось в комментариях — РСЯ это допускает, а Адсенс запрещает так делать).
Плагин замечательный, но виджеты у меня в теме отключены, поэтому я решил данную задачу с помощью нескольких строк джавскрипт кода, которые нашел на просторах интернета.
В итоге мое верхнее меню зафиксировано в самом верху области просмотра (по сути для этого достаточно было только CSS кода, но мы легких путей не ищем), а нижняя часть сайдбара фиксируется в верхней правой части экрана, когда вы дойдете до нее при прокрутке страницы. Будет ли от этого толк не знаю, но решение действительно простое.
Зачем фиксировать меню и делать плавающий сайдбар
Зачем фиксировать верхнее меню, спросите вы? Ну, в общем-то, это небольшой эксперимент на тему улучшение поведенческих характеристик. Чисто гипотетически можно предположить, что это может вызвать увеличение числа просмотренных страниц и времени проведенного пользователем на сайте.
С другой стороны, излишняя назойливость подобной фиксированной панели может вызвать негативную реакции читателей, поэтому вопрос полезности сего действа остается открытым. Надо будет посмотреть на результат после недельки использования — если меню перестанет быть фиксированным (прибитым к верхнему краю области просмотра), то значит эксперимент не удался. На всякий случай сделаю скриншот, как все это было.
Плавающий же сайдбар в WordPress делают немного по другой причине — привлечь побольше внимания к чему-либо. В принципе, здесь можете вставить и список рубрик, и список популярных или последних постов, что опять же будет пытаться служить задаче улучшения поведенческих. Но чаще всего в такой плавающий блок помещают рекламу (контекстную нельзя, как я уже упоминал), что чисто гипотетически должно повысить доход вебмастера. Посмотрим на результат через неделю.
Итак, начнем с плагина Q2W3 Fixed Widget, который вы можете скачать по приведенной ссылке или же просто набрать его название в админке WordPress (вкладка Плагины — Добавить новый) и установить без всяких лишних манипуляций. Работает он довольно просто и самый наглядный способ это увидеть заключается в просмотре семисекундного ролика:
Как уже упоминал, виджеты в теме оформления я отключил, ибо не было в них особой нужды, а если она все же возникнет, то весь этот функционал можно будет реализовать с помощью функций.
Например, вот так можно организовать вывод последних пяти (число в коде менять можно) комментариев (цифра 60 задает число знаков сообщения, которое будет отображаться, чтобы не загромождать сайдбар полными тестами):
Правда вам еще понадобиться файлик от одноименного плагина simple_recent_comments.zip, который предстоит извлечь из приведенного архива и кинуть в папку с используемой вами темой ( /wp-content/themes/тема )
А так можно вывести в сайдбаре список пяти последних постов, опубликованных у вас на блоге (цифирьку можно менять):
Суть в том, что для использования плагина Q2W3 Fixed Widget мне пришлось бы подключать виджеты. Делать этого не хотелось, тем более что детали уже растаяли в памяти за давностью лет. Да и вообще, использование плагинов и виджетов, как мне кажется, лучше свести к минимуму.
Если с WordPress плагинами на своем блоге мне все же мириться приходится, ибо без некоторых из них работать будет просто не возможно, то с виджетами я решил покончить окончательно и бесповоротно. Поэтому про настройку Q2W3 Fixed Widget можете почитать, например, тут.
Как зафиксировать верхнее меню в WordPress
Я же нашел для себя решение в сети. Для использования данного способа обязательно должна быть подключена библиотека jQuery. Как это сделать, подробно описывал в статье про использования Ajax (Аякс) для подгрузки контента.
Если вы помните, то в статье про оптимизацию скорости загрузки страниц нужно постараться объединить все CSS и JS в один общий (в смысле в два — один для стилей, а другой для скриптов). Вот, собственно, в такой файлик я и добавлял приведенные чуть ниже строчки кода. Хотя можно их добавить и непосредственно в Html код, окружив тегами script. Например, это можно сделать в шаблоне header.php внутри тегов head.
Реализовать фиксацию верхнего меню можно и с помощью чистого CSS — Position fixed нам в помощь. Собственно, здесь тоже используется позиционирование с помощью этого CSS свойства, но так же появляется возможность начать отображать фиксированное меню не сразу, а спустя некоторое время после начала прокрутки (на определенном расстоянии от верха).
В моем случае код фиксации верхнего меню выглядит вот так:
Напоминаю, что вставить этот фрагмент кода можно в:
Теперь обратимся непосредственно к этому коду. Получается, что через 10 пикселов от верха относительное позиционирование сменяется фиксированным (см. статью по приведенной чуть выше ссылке). Если необходимо, то в строчке с else в качестве значения для top можно выбрать не ноль, и тогда фиксированное в верхней части меню будет отступать от верхнего края области просмотра на данное значение пикселов (по-моему, это лишнее).
В отличии от оригинального кода мне пришлось еще добавить width: ‘100%’, ибо в противном случае размер меню по ширине уменьшался, что портило всю картину.
Теперь самое главное — этот код у вас работать не будет (скорее всего). Почему? Возможно потому, что у вас используются другие классы или ID для задания положения верхнего меню в CSS коде. Понимаете о чем я? Если нет, то вам следует пробежаться по статье про селекторы класса (class) и Id, да и вообще посмотреть одним глазком на справочник CSS для начинающих.
Смотрите, для наглядности я приведу Html код, с помощью которого формируется верхнее меню в моем шаблоне WordPress блога (живет он у меня в файлике header.php из папки с темой оформления):
У вас, скорее всего, в шаблоне вывод пунктов меню будет задан с помощью, например, вот такой конструкции (функции), но это не суть важно.
Функция wp_list_pages, конечно же, хороша (позволяет настроить сортировку, задать исключения и т.п.), но лучше все же все делать вручную через обычный Html, как и показано выше. ИМХО.
Вот после этого у вас меню должно будет зафиксироваться в верхнем положении при прокрутке страницы на определенное число пикселей. У меня, правда, возникла проблема с тем, что это самое меню не всегда оказывалось поверх тех элементов страницы, над которыми оно проплывало.
Это, согласитесь, не есть хорошо. Поэтому пришлось залезть чуток в CSS код и добавить правило z-index со значением 1000 для id селектора #navi:
Дело в том, что когда вы задаете с помощью Position один из трех видов позиционирования, то данный элемент перестает взаимодействовать с обычными элементами Html кода. Но вот с другими такими же спозиционированными он будет конкурировать за положение «над или под». z-index:1000 позволяет расположить наше меню заведомо выше всех других блоков. Подробности читайте в приведенной чуть выше статье.
Как в WordPress сделать плавающий сайдбар без плагинов
Описанным ниже способом можно заставить плавать (или другими словами, фиксироваться в определенном месте области просмотра) как весь сайдбар, так и его часть. Если эта область у вас совсем небольшая и умещается на одном экране (даже портативного устройства), то можно весь его заставить плавать.
Но чаще всего это будет не так, и плавать можно будет заставить нижнюю часть. Если сайдбар, как в моем случае, представляет из себя нераздельный монолит, то можно будет плавающий блок создать самим, используя заложенные в используемой вами теме оформления принципы и разместить его ниже основного.
Все это я делал быстро и не особо утруждая себя изысками и поиском оптимального решения, ибо из своего богатого опыта экспериментов вынес закономерность, что чем больше ты возлагаешь надежд на какую-то задумку, тем меньше вероятность того, что она «выстрелит». Ну и, наоборот. В общем, заморачиваться пока не было смысла, ибо вероятность того, что все это приживется, не так уж и велика.
Посему я просто взял для создания нижнего блока верхнюю часть своего основного сайдбара (в шаблоне sidebar.php), потом перенес из верхнего в нижний блок «Использую для заработка», ну и в конце прилепил то, что в основном блоке являлось окончанием. Получилось примерно так:
Ну вот, теперь у меня блок «Использую для заработка» переехал их верхнего блока сайдбара в нижний. Получилось не фонтан, но для «времянки» сойдет. Осталось только все это в JS файлике оформить кодом и нижний блок начнет плавать. JS код выглядит так:
Код этот я не так чтобы очень сильно понимаю (JS не владею), но все работает. Во всяком случае, частично. Когда вы задаете фиксированное позиционирование, то отчет идет от верхней левой точки. Следовательно, с помощью отступа слева marginLeft: ‘760px’ я помещаю этот блок аккурат на уровень сайдбара (цифирька была получена путем «проб и ошибок»).
Значение top: ’52px’ задает отступ уже плавающего блока сайдбара от верхней границы. Значение top меньше 2561 не понял до конца как работает.
Однако, у меня возникала проблема в том случае, если общая высота основного сайдбара была меньше высоты области с контентом. Такая штука вылезала, например, при просмотре архива рубрик:
C точки зрения CSS я понимаю почему так происходит, но вот думать над исправлением было лень. Пришлось просто отказаться от показа этого плавающего блока сайдбара на подобных страницах (он там и не нужен).
Для этого в файл sidebar.php я добавил условие вывода этого блока только в статьях и на главной с помощью условий is_single () и is_home ():
В общем получилось, как получилось. Как это конкретно прикрутить к вашей теме, вам придется решать самим — когда есть время, то это даже прикольно «поломать голову». Спасибо.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Комментарии и отзывы (33)
Наконец-то НЕ заказная статья)) Спасибо!
Давно хотела это реализовать, но всё руки не доходили. Теперь точно займусь этим.
Мудрено, но за мелочи спасибо. Мне предстоит прикрутить один экземпляр такого чуда на сайт в чистом html без движка. Побробую разобрать именно стилевые решения. Скрипты ужасно не люблю, т.к. не всегда они бывают включены в браузерах. Оформление только с помощью CSS — это красиво 🙂
«будет отступать от верхнего края области просмотра на данное значение пикселов (по-моему, это лишнее)»
. не лишнее. Как раз возникало желание удержать сдвинутый вниз до центра экрана блок на месте, т.е. скроллинг блока не буден заметен 🙂
Это интересное решение, спасибо! Я как-раз на одном из сайтов собираюсь переместить меню вверх над шапкой и его фиксация думаю, будет очень удобна, как посетителям, так и мне.
Вообще не очень люблю такие вещи. Но у вас на блоге плавающее верхнее меню смотрится очень даже симпатично. Видимо это по тому что у верхнего меню не большая высота которая не мешает воспринимать контент. А бывает что такого наворотят что читать не удобно. А вообще прикольно. Может еще для joomla напишете решение в будущем.;)
С чего вы взяли, что размещать контекстную рекламу в плавающем сайдбаре запрещено? Запрещается во всплывающих окнах, которые закрывают собой контент. А в данном случае ничего не противоречит правила показа контекстной рекламы. Я встречал много примеров такой рекламы на солидных трастовых зарубежных и отечественных сайтах.
Согласен с Андреем, запрета использования контекста в плавающих блоках боковых колонок нигде не встречал.
Дмитрий удачно получилось — ничего не напрягает назойливостью 🙂
Андрей и Alex: лучше все же будет у техподдержки проконсультироваться — мне кажется, что есть вероятность нарушения. Да, и отписаться не забудьте, ибо всем интересно.
По Яндексу был официальный ответ.
По Гуглу не искал, если кто встретит, отпишитесь, тоже интересно.
Alex: спасибо, значит ошибался относительно РСЯ.
Круто верхнее меню смотрится) Интересно теперь повлияет ли, это, на поведенческие факторы)
Насчет размещения контента в плавающих сайдбарах могу сказать следующее.
Google AdSense — запрещено. Это четко указано в правилах системы. Никакие доводы, что мол встречал подобное на трастовых уважаемых сайтах Вам не помогут. Накажут баном!
Яндекс Директ — разрешено. Сам задавал этот вопрос техподдержке, на что получил положительный ответ.
Да, действительно, показ рекламы Google AdSence в плавающих блоках запрещён. В техподдержке подтвердили.
alexzsoft: спасибо за отзыв. Да, мне тоже интересно — пройдет неделька после праздников и отпишусь (если не забуду).
Сергей и Андрей: спасибо за информацию. Вынес ее в начало публикации, чтобы не вводить пользователей РСЯ в заблуждение.
Дмитрий, могу подтвердить увеличение длительности нахождения на сайте и просмотров на посетителя. Зафиксировал навигационную панель 3 недели назад — результат стабилен. 🙂 Правда чуть-чуть другим способом делал, сам и тоже без плагинов.
Могу посоветовать ещё тень снизу панели сделать — обалденный эффект 3D получите. Очень понравилось читателям.
Я так понял, что ссылку на пример дать низя? Тогда верьте наслово. 🙂
Svengali: почему, можно. Только спамные удаляю, а если по делу, то я только «за». Спасибо.
Доброй ночи и с праздником. 🙂 Тогда вот ссылочка, как это всё дело я реализовал у себя — optimakomp.ru
Коляныч: ну, скрипт нужен, если Вам надо, чтобы меню не было приклеено вверху всегда, а появлялось спустя какое-то время после прокрутки экрана. А так да, Вы правы.
Цитата: «Значение top Юрий
Здравствуйте Дмитрий, пожалуйста подскажите по какой причине может не работать скрипт фиксации меню, пробовал и вставлять в код, и подключать файл по ссылке, ничего не получатся, нулевой результат? Заранее спасибо буду очень признателен!
Юрий: здравствуйте. Может быть jQuery не подключили?
Большое спасибо за статью!
Внедрил у себя на блоге!
Скажите, пожалуйста, у меня на главной и в рубриках плавающий виджет хоть и устанавливается, но из-за малого количества материалов скрипт никак не дает прокрутить страницу до конца (автоматически и резко прокручивает обратно наверх).
Можно ли сделать условие, чтобы этот виджет в рубриках и на главной выводился, но не прокручивался?
Дмитрий, делитесь результатами! )
Увеличилось ли число просмотров после фиксации меню? Как в целом, положителен ли эффект от такого внедрения?
Ясно. Но небольшое улучшение — это тоже хорошо. «Курочка по зернышку клюет» )
Дмитрий, добрый день! Подключил все по инструкции, вставил в коде свой ID, и вот что получилось. Как думаете, в чем проблема? http://www.headoffamily.ru/
Здравствуйте! а почему вы убрали плавающий сайт бар? У меня такое ощущение что на него поисковики смотрят косо! просто поставил сам его и упала посещалка в двое! Дмитрий, вы не замечали падения посещалки с яндекса из-за сайт-бара?
Супер! Для верхнего меню — лучшее решение!
А как сделать чтобы заголовок не заплывал под прилипающее меню?
Добрый день Дмитрий. Вопрос такого плана.
Скажи, если меню в сайтбаре справа выводить не через виджеты вывода постов и категорий, а списком через html прописать, нагрузка потребляемая сайтом уменьшится?
Дмитрий здравствуйте, на данный момент у вас верхнее меню не фиксируется как раньше, есть какие то причины? У себя на блоге хочу тоже сделать но процесс трудоемкий так как много способов не сработало. Поэтому и вопрос есть ли смысл дальше «пыхтеть» что бы реализовать залипание меню?
Они фиксируется, но внизу (перепрыгивает туда при начале прокрутки).