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

5 Январь, 2014

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Это скорее заметка для себя, чтобы не забыть, что именно делал, когда захочу все вернуть взад. Началось все с того, что один из читателей предложил написать про плагин для WordPress под названием Q2W3 Fixed Widget (Sticky Widget), который может сделать любой виджет в сайдбаре плавающим или, другими словами, фиксированным.

Т.е. прокручивая страницу вы увидите, что основная часть сайдбара уйдет вверх, но вот тот виджет, что будет расположен в самом низу, останется в области просмотра как бы далеко вы не продвигались вниз по тексту. Сразу оговорюсь, что размещать контекстную рекламу подобным образом запрещено и за это могут наказать (как выяснилось в комментариях — РСЯ это допускает, а Адсенс запрещает так делать).

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

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

Зачем фиксировать меню и делать плавающий сайдбар


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

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

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

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

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

Например, вот так можно организовать вывод последних пяти (число в коде менять можно) комментариев (цифра 60 задает число знаков сообщения, которое будет отображаться, чтобы не загромождать сайдбар полными тестами):

    <ul >
                <li>
                     <?php include (TEMPLATEPATH . '/simple_recent_comments.php'); ?>
            <?php if (function_exists('src_simple_recent_comments')) { src_simple_recent_comments(5, 60, '', ''); } ?>
                 </li>
              </ul>

Правда вам еще понадобиться файлик от одноименного плагина simple_recent_comments.zip, который предстоит извлечь из приведенного архива и кинуть в папку с используемой вами темой (/wp-content/themes/тема)

А так можно вывести в сайдбаре список пяти последних постов, опубликованных у вас на блоге (цифирьку можно менять):

 <ul >
                    <?php $recent = new WP_Query("showposts=5"); while($recent->have_posts()) : $recent->the_post();?>
                    <li><a href="<?php the_permalink(); ?>">
                      <?php the_title(); ?>
                      </a></li>
                    <?php endwhile; ?>
                  </ul>

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

Если с WordPress плагинами на своем блоге мне все же мириться приходится, ибо без некоторых из них работать будет просто не возможно, то с виджетами я решил покончить окончательно и бесповоротно. Поэтому про настройку Q2W3 Fixed Widget можете почитать, например, тут.

Как зафиксировать верхнее меню в WordPress


Я же нашел для себя решение на этой вот страничке — как зафиксировать блок или меню на сайте. Для использования данного способа обязательно должна быть подключена библиотека jQuery. Как это сделать, подробно описывал в статье про использования Ajax (Аякс) для подгрузки контента.

Если вы помните, то в статье про оптимизацию скорости загрузки страниц нужно постараться объединить все CSS и JS в один общий (в смысле в два — один для стилей, а другой для скриптов). Вот, собственно, в такой файлик я и добавлял приведенные чуть ниже строчки кода. Хотя можно их добавить и непосредственно в Html код, окружив тегами script. Например, это можно сделать в шаблоне header.php внутри тегов head.

Реализовать фиксацию верхнего меню можно и с помощью чистого CSS — Position fixed нам в помощь. Собственно, здесь тоже используется позиционирование с помощью этого CSS свойства, но так же появляется возможность начать отображать фиксированное меню не сразу, а спустя некоторое время после начала прокрутки (на определенном расстоянии от верха).

В моем случае код фиксации верхнего меню выглядит вот так:

$(function(){
    $(window).scroll(function() {
        var top = $(document).scrollTop();
        if (top < 10) $("#navi").css({top: '0', position: 'relative'});
        else $("#navi").css({top: '0px', width: '100%',  position: 'fixed'});
    });
});

Напоминаю, что вставить этот фрагмент кода можно в:

  1. Файлик с расширением .js, который живет в папке с используемой вами темой оформления (/wp-content/themes/тема). Он вам подойдет только в том случае, если для него в файле header.php прописана строка подгрузки его вместе с вебстраницами вашего сайта, которая может выглядеть так:
    <script type="text/javascript" src="http://ktonanovenkogo.ru/wp-content/themes/Organic/taber.js"></script>
  2. Можно использовать сам файл header.php, заключив данный код между открывающим и закрывающим тегами head и обрамив его в теги script, например, так:
    <script type="text/javascript">
    $(function(){
        $(window).scroll(function() {
            var top = $(document).scrollTop();
            if (top < 10) $("#navi").css({top: '0', position: 'relative'});
            else $("#navi").css({top: '0px', width: '100%',  position: 'fixed'});
        });
    });
    </script>
  3. Можно и в любое другое место прописать этот код в тегах script. Главное, чтобы он подгружался на нужных страницах блога. Например, можно в footer.php перед закрывающим тегом body.

Теперь обратимся непосредственно к этому коду. Получается, что через 10 пикселов от верха относительное позиционирование сменяется фиксированным (см. статью по приведенной чуть выше ссылке). Если необходимо, то в строчке с else в качестве значения для top можно выбрать не ноль, и тогда фиксированное в верхней части меню будет отступать от верхнего края области просмотра на данное значение пикселов (по-моему, это лишнее).

В отличии от оригинального кода мне пришлось еще добавить width: '100%', ибо в противном случае размер меню по ширине уменьшался, что портило всю картину.

Теперь самое главное — этот код у вас работать не будет (скорее всего). Почему? Возможно потому, что у вас используются другие классы или ID для задания положения верхнего меню в CSS коде. Понимаете о чем я? Если нет, то вам следует пробежаться по статье про селекторы класса (class) и Id, да и вообще посмотреть одним глазком на справочник CSS для начинающих.

Смотрите, для наглядности я приведу Html код, с помощью которого формируется верхнее меню в моем шаблоне WordPress блога (живет он у меня в файлике header.php из папки с темой оформления):

<div id="navi">
<div id="navi-in">
<ul id="nav"><li class="page_item"><a href="http://ktonanovenkogo.ru/">Новое</a></li><li class="page_item"><a href="http://ktonanovenkogo.ru/populyarnoe">Лучшее</a></li><li class="page_item"><a href="http://ktonanovenkogo.ru/zarabotok_na_saite/monetizaciy/zarabotok-v-internete-kak-zarabotat-v-seti-bez-vlozhenie-sposob-dengi.html">где заработать</a></li><li class="page_item"><a href="http://ktonanovenkogo.ru/reklama-na-bloge">Реклама</a></li><li class="page_item"><a href="http://ktonanovenkogo.ru/uroki-sozdaniya-sajta">Уроки</a></li><li class="page_item"><a href="http://ktonanovenkogo.ru/faq">ЧаВо</a></li><li class="page_item"><a href="http://ktonanovenkogo.ru/karta-sajta">Карта сайта</a></li><li class="page_item"><a href="http://ktonanovenkogo.ru/obratnay-svyz">Контакты</a></li><li class="page_item"><a class="current_page_item page_item" href="#" onClick="scroll(0,0); return false">Наверх</a></li></ul>
</div>
</div>

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

<div id="navi">
  <div id="navi-in">
    <ul id="nav">
      <li   class="page_item"><a href="<?php echo get_option('home'); ?>/">Главная</a></li>
      <?php wp_list_pages('depth=1&sort_column=menu_order&title_li=' . ('') . '' ); ?>
    </ul>
     </div>
</div>

Функция wp_list_pages, конечно же, хороша (позволяет настроить сортировку, задать исключения и т.п.), но лучше все же все делать вручную через обычный Html, как и показано выше. ИМХО.

Тут важно уловить то, что все это дело заключено в контейнеры div, и самый верхний из них имеет атрибут id="navi". Вот к нему мы и будем цепляться. Видите в приведенном выше JS коде два раза встречается #navi? Вам нужно будет там проставить вместо #navi свой ID (или класс, который, как вы помните, записывается не через решетку, а через точку, например, так: .menu).

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

Это, согласитесь, не есть хорошо. Поэтому пришлось залезть чуток в CSS код и добавить правило z-index со значением 1000 для id селектора #navi:

 #navi{background:#03658e url(http://ktonanovenkogo.ru/wp-content/themes/Organic/images/spriteme2.png) repeat-x;background-position:0px -10px;height:31px;z-index:1000}

Дело в том, что когда вы задаете с помощью Position один из трех видов позиционирования, то данный элемент перестает взаимодействовать с обычными элементами Html кода. Но вот с другими такими же спозиционированными он будет конкурировать за положение «над или под». z-index:1000 позволяет расположить наше меню заведомо выше всех других блоков. Подробности читайте в приведенной чуть выше статье.

Как в WordPress сделать плавающий сайдбар без плагинов


Описанным ниже способом можно заставить плавать (или другими словами, фиксироваться в определенном месте области просмотра) как весь сайдбар, так и его часть. Если эта область у вас совсем небольшая и умещается на одном экране (даже портативного устройства), то можно весь его заставить плавать.

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

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

Посему я просто взял для создания нижнего блока верхнюю часть своего основного сайдбара (в шаблоне sidebar.php), потом перенес из верхнего в нижний блок «Использую для заработка», ну и в конце прилепил то, что в основном блоке являлось окончанием. Получилось примерно так:

<div id="sidebar" class="clearfix">
<div class="sidebar_top">

<!--Содержимое основного сайдбара-->

<div class="sidebar_bottom"></div>
</div>

<div class="sidebar123"><!--Внешний контейнер для нижнего блока сайдбара, чтобы можно было его класс использовать в JS коде-->

<div id="sidebar" class="clearfix"> <div class="sidebar_top"><!--Верхняя часть скопированная из основного сайдбара-->

  <div style="margin: 25px 0 0 20px;" class="siddd2">Использую для заработка</div></div>

<div class="ispo"><ul class="lampochka"><!--Html код списка--></ul></div>

<div class="sidebar_bottom"></div><!--Нижняя часть взятая из основного  сайдбара-->

</div>
</div></div>

Ну вот, теперь у меня блок «Использую для заработка» переехал их верхнего блока сайдбара в нижний. Получилось не фонтан, но для «времянки» сойдет. Осталось только все это в JS файлике оформить кодом и нижний блок начнет плавать. JS код выглядит так:

$(document).ready(function(){
    var br = $.browser;
    $(window).scroll(function() {
        var top = $(document).scrollTop();
        if (top < 2561) {
            $(".sidebar123").css({top: '0', position: 'relative', marginLeft: '25px'});
        } else if ((!br.msie) || ((br.msie) && (br.version > 7))) {
            $(".sidebar123").css({top: '52px', position: 'fixed', marginLeft: '760px'});
        } else if ((br.msie) && (br.version <= 7)) {
            $(".sidebar123").css({top: '52px', position: 'fixed', marginLeft: '25px'});
        }
    });
});

Обратите внимание, что вместо .sidebar123 вам нужно подставить свой класс или ID того внешнего контейнера, в котором живет ваш нижний блок сайдбара.

Код этот я не так чтобы очень сильно понимаю (JS не владею), но все работает. Во всяком случае, частично. Когда вы задаете фиксированное позиционирование, то отчет идет от верхней левой точки. Следовательно, с помощью отступа слева marginLeft: '760px' я помещаю этот блок аккурат на уровень сайдбара (цифирька была получена путем «проб и ошибок»).

Значение top: '52px' задает отступ уже плавающего блока сайдбара от верхней границы. Значение top < 2561 не понял до конца как работает.

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

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

Для этого в файл sidebar.php я добавил условие вывода этого блока только в статьях и на главной с помощью условий is_single () и is_home ():

<?php
if(( is_single() ) or (is_home())) {

echo '<div class="sidebar123"><div id="sidebar" class="clearfix"> <div class="sidebar_top">  <div style="margin: 25px 0 0 20px;" class="siddd2">Использую для заработка</div></div>

<div class="ispo"><ul class="lampochka"><!--Html код списка--></ul></div>
		   <div class="sidebar_bottom"></div></div></div></div>';}
?>

Обратите внимание, что если в коде, заключенном в echo '', будут встречаться одиночные кавычки, то их нужно будет экранировать, т.е. поставить перед каждой из них обратный слеш (\') без скобок, естественно.

В общем получилось, как получилось. Как это конкретно прикрутить к вашей теме, вам придется решать самим — когда есть время, то это даже прикольно «поломать голову». Спасибо.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Еще:

Рубрики :Как создать свой блог

Комментарии и отзывы

Наталья

Наконец-то НЕ заказная статья)) Спасибо!

Давно хотела это реализовать, но всё руки не доходили. Теперь точно займусь этим.

Евгений

Мудрено, но за мелочи спасибо. Мне предстоит прикрутить один экземпляр такого чуда на сайт в чистом html без движка. Побробую разобрать именно стилевые решения. Скрипты ужасно не люблю, т.к. не всегда они бывают включены в браузерах. Оформление только с помощью CSS — это красиво 🙂

«будет отступать от верхнего края области просмотра на данное значение пикселов (по-моему, это лишнее)»

...не лишнее. Как раз возникало желание удержать сдвинутый вниз до центра экрана блок на месте, т.е. скроллинг блока не буден заметен 🙂

Михаил

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

Остап

Вообще не очень люблю такие вещи. Но у вас на блоге плавающее верхнее меню смотрится очень даже симпатично. Видимо это по тому что у верхнего меню не большая высота которая не мешает воспринимать контент. А бывает что такого наворотят что читать не удобно. А вообще прикольно. Может еще для joomla напишете решение в будущем.;)

Андрей

С чего вы взяли, что размещать контекстную рекламу в плавающем сайдбаре запрещено? Запрещается во всплывающих окнах, которые закрывают собой контент. А в данном случае ничего не противоречит правила показа контекстной рекламы. Я встречал много примеров такой рекламы на солидных трастовых зарубежных и отечественных сайтах.

Alex AutoZov.ru

Согласен с Андреем, запрета использования контекста в плавающих блоках боковых колонок нигде не встречал.

Дмитрий удачно получилось — ничего не напрягает назойливостью 🙂

Дмитрий

Андрей и Alex: лучше все же будет у техподдержки проконсультироваться — мне кажется, что есть вероятность нарушения. Да, и отписаться не забудьте, ибо всем интересно.

Alex AutoZov.ru

По Яндексу вот официальный ответ:

http://clubs.ya.ru/partner/replies.xml?item_no=2460

По Гуглу не искал, если кто встретит, отпишитесь, тоже интересно.

Дмитрий

Alex: спасибо, значит ошибался относительно РСЯ.

alexzsoft

Круто верхнее меню смотрится) Интересно теперь повлияет ли, это, на поведенческие факторы)

Сергей

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

Google AdSense — запрещено. Это четко указано в правилах системы. Никакие доводы, что мол встречал подобное на трастовых уважаемых сайтах Вам не помогут. Накажут баном!

Яндекс Директ — разрешено. Сам задавал этот вопрос техподдержке, на что получил положительный ответ.

Андрей

Да, действительно, показ рекламы Google AdSence в плавающих блоках запрещён. В техподдержке подтвердили.

Дмитрий

alexzsoft: спасибо за отзыв. Да, мне тоже интересно — пройдет неделька после праздников и отпишусь (если не забуду).

Сергей и Андрей: спасибо за информацию. Вынес ее в начало публикации, чтобы не вводить пользователей РСЯ в заблуждение.

Svengali

Дмитрий, могу подтвердить увеличение длительности нахождения на сайте и просмотров на посетителя. Зафиксировал навигационную панель 3 недели назад — результат стабилен. 🙂 Правда чуть-чуть другим способом делал, сам и тоже без плагинов.

Могу посоветовать ещё тень снизу панели сделать — обалденный эффект 3D получите. Очень понравилось читателям.

Я так понял, что ссылку на пример дать низя? Тогда верьте наслово. 🙂

Дмитрий

Svengali: почему, можно. Только спамные удаляю, а если по делу, то я только «за». Спасибо.

Svengali

Доброй ночи и с праздником. 🙂 Тогда вот ссылочка, как это всё дело я реализовал у себя — optimakomp.ru

Коляныч

так и не понял — зачем использовать скрипт, если зафиксировать меню можно с помощью css ?

Дмитрий

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

Максим

Цитата: "Значение top < 2561 не понял до конца как работает."

Значение top — это отступ от верха окна браузера при прокрутке, когда начинают действовать правила фиксации блока.

Цитата: "Однако, у меня возникала проблема в том случае, если..."

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

Ссылка по делу:

http://maxborisov.com/blog/floating-fixed-menu-blocks-on-jquery.html

Кстати, здесь же есть информация о том, как "остановить" блок внизу сайта на определённой высоте. Есть демонстрация и исходники.

А вот по следующей ссылке ещё один оригинальный пример того, как сделан фиксированный блок средствами js+jq, не прибегая к плагинам. Причём отступ сверху вычисляется динамически и, соответственно, работает на всех страницах (кроме главной — там он не фиксированный), независимо от того, сколько блоков в сайдбаре находится выше фиксированного блока. Также есть остановка внизу сайта. А ещё исчезновение лишних блоков при фиксации.

В общем, смотрите, походите по страницам...

Юрий

Здравствуйте Дмитрий, пожалуйста подскажите по какой причине может не работать скрипт фиксации меню, пробовал и вставлять в код, и подключать файл по ссылке, ничего не получатся, нулевой результат? Заранее спасибо буду очень признателен!

Дмитрий

Юрий: здравствуйте. Может быть jQuery не подключили?

Сергей

Здравствуйте!

Большое спасибо за статью!

Внедрил у себя на блоге!

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

Можно ли сделать условие, чтобы этот виджет в рубриках и на главной выводился, но не прокручивался?

И где его писать?

Заранее спасибо!

Сергей

Дмитрий, делитесь результатами! )

Увеличилось ли число просмотров после фиксации меню? Как в целом, положителен ли эффект от такого внедрения?

Дмитрий

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

Сергей

Ясно. Но небольшое улучшение — это тоже хорошо. «Курочка по зернышку клюет» )

Вячеслав

Спасибо что оговорился ) А то был бы бан в адсенсе 🙂 Печалька что он запрещает это 🙁 может есть какой то выход? 🙂 Делать контент во фрейме на высоту экрана !? 🙂

Николай

Дмитрий, добрый день! Подключил все по инструкции, вставил в коде свой ID, и вот что получилось. Как думаете, в чем проблема? http://www.headoffamily.ru/

Максим

Здравствуйте! а почему вы убрали плавающий сайт бар? У меня такое ощущение что на него поисковики смотрят косо! просто поставил сам его и упала посещалка в двое! Дмитрий, вы не замечали падения посещалки с яндекса из-за сайт-бара?

Pasagir

Супер! Для верхнего меню — лучшее решение!

Подписаться не комментируя