Фиксированное горизонтальное меню для сайта WordPress | Создание сайтов и заработок в сети
Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! В этой статье я постараюсь подробно и в полном объеме информировать вас, как зафиксировать верхнее меню сайта, работающего на движке WordPress.
Такая плавающая панель с оглавлением всех важных разделов вебресурса может оказаться весьма важной частью юзабилити (в этом материале о понятии usability).
Она будет постоянно находится перед глазами пользователя даже в том случае, если он прокручивает страницу.
Грамотно оформленное фиксированное меню способно улучшить поведенческие характеристики вебсайта, в том числе увеличить количество просматриваемых страниц, например. Конечно, здесь важно не переборщить, как и в любой другой области оптимизации ресурса. Такая зафиксированная в одном месте панелька не должна сильно раздражать. В противном случае это может привести к обратному эффекту.
В общем, закрепленное меню на сайте вносит свою лепту в продвижение вебресурса. Хотя, конечно, вы не увидите сразу визуально ощутимый результат.
Я уже говорил не раз, что успех в SEO продвижении состоит из совокупности множества составляющих, которые лишь в сумме дают необходимый эффект. Курочка по зернышку клюет.
Вот сегодня мы и разберем технические детали реализации одной из важнейших областей юзабилити блога, работающего на Вордпресс, коей и является плавающее горизонтальное меню.
Как сделать плавающее меню на Вордпрессе силами CSS
Сразу скажу, что при окончательном выборе для своего блога я остановился именно на таком варианте, поскольку он лучше всего подходит при учете особенностей моей темы.
У меня вначале панелька с содержанием находилась под шапкой, но я решил провести эксперимент, переставив ее в самый верх вебстраницы. По этой причине пришлось произвести некоторые манипуляции с одним из шаблонов темы Вордпресс.
А после редактирования стилей CSS результирующая картина стала такой:
Если вы также решили переставить менюшку снизу шапки на самый верх, то вам необходимо поработать с файлом HEADER.PHP вашей темы. Именно там обычно находится кусок кода, отвечающий за верхнюю панельку навигации. В моем случае он выглядит теперь таким образом:
То есть, я расположил (вырезал и вставил) содержимое, находящееся между открывающим и закрывающим тегами HEADER, в состав которого входит и фрагмент кода между HTML тегами NAV, сразу после тега BODY в шаблоне HEADER.PHP.
Подобным образом можно редактировать любые шаблоны, хотя, конечно, возможны и нюансы. Хорошо уже то, что вы имеете представление, где копать. Единственное, вместо навигационного тега NAV у вас может присутствовать стандартный контейнер DIV с прописанными классами и идентификаторами (ID), скажем такими:
Если вдруг вам что-то непонятно, о чем я тут говорю, советую ознакомиться для начала со устройством и шаблонами темы оформления, многое сразу прояснится. Кроме того, неплохо бы взглянуть хотя бы одним глазком на раздел «Основы HTML», где также вы найдете необходимую информацию.
Итак, у вас меню расположено в самом верху страницы, ну или вы туда его переместили. Продолжу все-таки с примером моей темы, чтобы не растекаться мыслью по древу. Исходная позиция для последующих изменений стилевых свойств навпанели готова.
Теперь для фиксации менюшки воспользуемся таким полезным свойством как position fixed, которое и позволяет закрепить меню в верхнем положении. Причем привязываем его к классу или ID контейнера, в который заключено меню (смотрите предыдущий скриншот). В моем случае это NAV и принадлежащий ему class main-navigation. Я добавил к нему выше упомянутое свойство в файле STYLE.CSS:
position: fixed
Напомню, что классы обозначаются в файлах стилей с точкой впереди, а селекторы ID с решеткой (пример: #site-navigation). Далее мне захотелось, чтобы менюшка располагалась по длине шапки, а не во всю ширину области просмотра, поэтому я проставил такое CSS правило для того же класса:
width: 1110px
Чтобы части навигационного блока не прятались за некоторыми элементами (например, за рекламными объявлениями Адсенс) при прокрутке страницы, пришлось указать z-index к классу main-navigation с параметром 1000:
z-index:1000
Таким образом, полный комплект правил для фиксированного меню данного блога будет таким:
.main-navigation { position: fixed; z-index: 1000; background: url(/wp-content/themes/tiny-forge/images/menu-background.png) repeat-x; width: 1110px; }
Свойство background позволяет придать цветовое оформление навигационной панели. Дальше мне еще необходимо было прописать величину отступа баннера (шапки) от верхнего края, чтобы панелька навигации не накладывалась на его изображение:
img.header-image {margin-top: 30px;}
Теперь при прокрутке страницы навигационная панель будет прилипать к верхнему краю окна просмотра, следовательно, задача выполнена. В данном конкретном случае изображение менюшки реализовано с помощью средств CSS. Таким образом, основные нюансы создания фиксированного меню нами рассмотрены.
Конечно, для каждой конкретной темы придется проработать некоторые детали. Но, думаю, это не будет большой проблемой. Тем более, что есть прекрасные инструменты разработчика, позволяющие экспериментировать со стилевыми свойствами и кодом HTML во всех современных браузерах.
Все эти средства являются аналогами известного расширения Firebug для браузера Firefox (в этой статье об этом плагине можете найти подробный материал). Кстати, в новейших версиях Мазилы подобный инструмент уже встроен и вызывается простым нажатием клавиши F12. То же самое можно сказать и о других популярных обозревателях.
Скажем, в Хроме и Интернет Эксплорере средство разработчика также активируется с помощью F12, в Опере же посредством комбинации Ctrl+Shift+I (либо выбором из главного выпадающего меню «Разработка» – «Инструменты разработчика»). В общем, используйте эту возможность, чтобы не только сэкономить свое время, но и получить весьма ценные практические навыки в редактировании кода вебстраниц сайта.
Создание фиксированного меню при помощи скрипта
Теперь посмотрим, как можно элегантно закрепить менюшку с помощью небольшого кода JavaScript, собственно решение я подсмотрел на этой страничке. Причем зафиксировать меню таким образом можно при любом его расположении относительно шапки сайта (снизу или сверху).
Для того, чтобы применить данный метод, прежде необходимо подключить библиотеку jQuery. С этой целью достаточно прописать в том же файле HEADER.PHP между закрывающим и открывающим тегами HEAD вот такую строчку:
Обо всех случаях использования jQuery, в том числе при реализации технологий Ajax, мы будем говорить в дальнейшем подробнее, ну а сейчас просто примите это к сведению. Итак, ниже разберем варианты того, как зафиксировать горизонтальное меню, расположенное вверху от шапки и непосредственно под ней.
Плавающее верхнее меню над шапкой сайта
Итак, чтобы закрепить панель навигации, находящуюся сверху шапки, после подключения jQuery необходимо прописать код скрипта (его содержание я подсмотрел на этом вебресурсе), который в этом случае будет выглядеть так:
$(function(){ $(window).scroll(function() { var top = $(document).scrollTop(); if (top < 0) $(".main-navigation").css({top: '0', position: 'relative'}); else $(".main-navigation").css({top: '0', position: 'fixed'}); }); });
Данную функцию в общем виде я проанализировал (ненавижу делать то, чего не понимаю, хотя в программировании я нуб) и его немного подкорректировал под свои нужды. Далее озвучу результаты своего анализа. Эта функция контролирует скроллинг (прокрутку) страницы в области окна просмотра. Код можно интерпретировать следующим образом.
Если вы прокручиваете страницу на расстояние, меньшее 0 пикселов, то элемент с классом .main-navigation получает свойство CSS с относительным позиционированием, которое определяется значением relative и отступом от верха 0px:
По прописанным здесь условиям position relative определяет расположение меню относительно верхнего края окна просмотра, расстояние до которого равно 0 (top:0). Ежели страница прокручивается на расстояние, равное или большее 0px, то элемент фиксируется (position fixed).
Как вы понимаете, технически прокрутка на отрицательную величину технически бессмысленна, поэтому на деле панели навигации сразу присваиваются значения (top: '0', position: 'fixed'), с помощью которых она намертво фиксируется с отступом от верхнего края в 0 пикселов. Конечно, в условии данной функции можно регулировать величину отступа навигационной панели от верха (top) при относительном и фиксированном позиционировании, проставив вместо 0 другое значение:
if (top < 0) $(".main-navigation").css({top: '0', position: 'relative'}); else $(".main-navigation").css({top: '0', position: 'fixed'});
Однако, мне кажется, что представленный вариант в таком виде для горизонтального меню над шапкой является оптимальным. Впрочем, могут быть эксклюзивные и нестандартные вебстраницы, так что принимать окончательное решение вам.
В принципе для фиксации верхнего меню, расположенного над шапкой, вполне можно использовать упрощенный код, имеющий такое содержание:
$(function(){ $(window).scroll(function() { var top = $(document).scrollTop(); $(".main-navigation").css({top: '0px', position: 'fixed'}); }); });
Теперь несколько слов о том, куда поместить эту функцию. Могут быть три основных варианта, которые есть возможность использовать для вебсайта или блога Вордпресс.
1. Использовать для этого файл с расширением .js, который имеется в большинстве тем (/wp-content/themes/ваша_тема). Если он изначально отсутствует, то его можно создать. Надо иметь ввиду, что для его активации необходимо прописать код вызова функции, который может выглядеть примерно таким образом:
<script type="text/javascript" src="/wp-content/themes/tiny-forge/site-scripts.js"></script>
2. Также можно вставить непосредственно данный код в тот же шаблон HEADER.PHP между открывающим и закрывающим HEAD, обрамив его тегами SCRIPT:
<script type="text/javascript"> $(function(){ $(window).scroll(function() { var top = $(document).scrollTop(); if (top < 0) $(".main-navigation").css({top: '0', position: 'relative'}); else $(".main-navigation").css({top: '0', position: 'fixed'}); }); }); </script>
3. Кроме всего прочего, вполне возможно разместить данный скрипт и в других местах, например, в шаблоне FOOTER.PHP прямо перед закрывающим тегом BODY. Просто нужно обеспечить его подгрузку с нужными вебстраницами вашего вебресурса и желательно так, чтобы уменьшить нагрузку на сервер хостинга.
Фиксированное горизонтальное меню под шапкой вебсайта
Изначально на Goldbusinessnet.com в данной теме также было реализовано горизонтальное меню под баннером хидера. Для закрепления менюшки при реализации этого варианта фрагмент, отвечающий за вывод панели навигации, в шаблоне HEADER.PHP также должен располагаться ниже куска кода, выводящего изображение шапки:
Далее следует применить приведенный выше скрипт, вставив его в указанное чуть выше место, но с небольшими изменениями (повторяю, я привожу пример для своей темы):
$(function(){ $(window).scroll(function() { var top = $(document).scrollTop(); if (top < 100) $(".main-navigation").css({top: '0', position: 'relative'}); else $(".main-navigation").css({top: '0', position: 'fixed'}); }); });
Попробую и здесь объяснить поподробнее в меру своих способностей.
Если страница прокручивается на расстояние, меньшее 100px, то элементу (в нашем случае меню) присваивается свойство position relative, которое позиционирует его относительно изображения шапки сайта.
Расстояние до хидера определяется с помощью top:0. При прокрутке панель менюшки двигается вместе с другими элементами, включая шапку, вверх:
После того, как вы прокрутили страницу на 100 пикселов (в моем случае это высота шапки) и более, менюшка фиксируется с отступом в 0px уже от верхнего края:
Пожалуй, эта вся информация, которой я планировал поделиться с вами в отношении данной темы. Прошу делиться в комментариях о том, насколько помог вам данный материал. Продолжение о шагах по оптимизации вебсайта обязательно последуют, поэтому не забывайте подписываться на обновления блога, чтобы не пропустить актуальную информацию.
Источник: https://goldbusinessnet.com/dvizhok-wordpress/sajt-vordpress-fiksirovannoe-plavayushhee-gorizontalnoe-menyu/
Как зафиксировать меню с “липкой” навигацией при прокрутке на WordPress
На современных одностраничных сайтах с бесконечно длинной главной страницей, липкий хедер (sticky header) — это та деталь, которая помогает пользователям всегда и везде быстро перейти к нужному разделу сайта.
Для создания липкого хедера вы можете использовать тему, например Upfront, в которой на это вы потратите всего несколько секунд, или прибегнуть к помощи плагина WordPress.
Сегодня в этом посте мы рассмотрим плюсы и минусы липкой панели навигации на вашем сайте и сделаем небольшой обзор плагинов, с помощью которых вы сможет создать sticky header у себя на сайте. Приступим!
Плюсы и минусы Липких Хедеров
В последнее время липкие хедеры становятся все более популярными, и это не просто результат того, что они круто влияют на дизайн сайта. Быстрый доступ к навигации по сайту — очень важный нюанс, и его невозможно не учитывать в наше время бесконечной прокрутки.
Тем не менее, мнения по поводу липких заголовков разделяются, есть достойные аргументы за и против их применения.
Давайте начнем с плюсов
- Взаимодействие с пользователем. Здесь все очевидно: мгновенный доступ к основным разделам сайта, быстрая навигацию по сайту, независимо от того, насколько далеко пользователь проскролил вниз. Безумно удобно при использовании на мобильных устройствах.
- Брендинг. Грамотно расположенный логотип в хедере поможет закрепить основную часть брендинга вашего сайта на самом видном месте. Естественно, тут не нужно слишком усердствовать. При правильном подходе вы сможете повысить узнаваемость бренда.
- Лучше показатели аналитики. После улучшения навигации, как правило, сокращается показатель “ненужных просмотров” и увеличивается количество просматриваемых страниц за одно посещение сайта. Конечно, мы не можем ничего гарантировать, но это правило сработало для наших сайтов.
Однако, везде есть и свои минусы
В нашем случае, самым очевидным будет неправильное оформление заголовка.
Вы можете просто запутаться в реализации и сделать хедер слишком большим и навязчивым, особенно для мобильных устройств.
Здесь нет идеальной формулы, так что экспериментируйте, тестируйте результаты на реальных устройствах и эмуляторах, используйте различные инструменты и плагины, которые могут помочь в данной ситуации.
Липкий хедер должен содержать элементы, которые реально будут необходимы пользователю. Обратите внимание на сайт Medium, там есть строка поиска, регистрация и навигация, которая исчезает, когда пользователь прокручивает страницу вниз, и мгновенно появляется на экране, когда он начинает прокручивать наверх. Это маленький штрих, но с точки зрения общей практичности — он великолепен.
Так же стоит упомянуть о том, что есть риск напортачить в коде. У вас может получиться настоящий Франкенхедер, который будет полностью скрывать содержимое сайта или просто вызывать раздражающие баги. Ниже мы представим плагины, которые помогут вам избежать подобных ситуаций.
Но прежде чем приступить к обзору наших WordPress плагинов, давайте взглянем на несколько примеров.
Примеры сайтов с липкой навигацией
Oasis
Сайт Oasis — это отличный пример фиксированной верхней панели навигации. В любой момент, с любого устройства у вас будет доступ к хедеру сайта.
В десктопной версии сайта для вас доступно полное меню. Переключившись на мобильное устройство, вы увидите самые необходимые опции и меню-гамбургер.
Gareth Emery
На сайте Gareth Emery липкий хедер будет уменьшаться при прокрутке и становится прозрачным.
Переключитесь на мобильную версию и увидите замечательный пример того, как sticky header влияет на брендинг: на сайте будет виден только логотип и меню-гамбургер.
Squid Compression
Сайт Squid Compression — пример того, как можно выгодно использовать липкий боковой хедер.
Теперь, когда мы рассмотрели достоинства и недостатки липких хедеров, посмотрели на несколько реальных примеров, давайте перейдем к обзору инструментов.
Плагины для создания липких хедеров в WordPress
1. Sticky Header
Sticky Header от ThematoSoup — это простой плагин, который предоставляет все необходимые базовые функции.
Большинство настроек вы сможете сделать через Customizer, можно изменять цвет фона, текста и задавать максимальную ширину хедера. Можно установить ширину хедера после скролинга вниз и выбрать определенные параметры для мобильных устройств.
2. Sticky Menu
Название плагина, конечно, очень необычное, но оно точно описывает его возможности.
Плагин позволяет сделать “липким” практически каждый элемент сайта, но помните, что не стоит слишком увлекаться. Для реализации потребуются минимальные знания HTML/CSS, чтобы правильно разместить селектор на нужной странице. Это достаточно тривиальная вещь, так что не следует этого опасаться.
Есть все необходимые базовые параметры, вы сможете сделать нужные настройки для отображения хедера на мобильных устройствах, к тому же есть настройки для указания Z-индекса вашего липкого элемента, чтобы убедиться, что его всегда видно. Также доступен режим отладки.
3. myStickymenu
Изначально плагин myStickymenu был разработан специально для темы Twenty Thirteen, но он должен отлично работать и со всеми другими современными, отзывчивыми темами.
Плагин полностью готов к локализации, отзывчивый, включает в себя простые опции для добавления пользовательского кода CSS.
Авторы плагина создали полезную демо страницу, где вы можете увидеть его в действии, прежде чем загрузите. Это плагин с отличным рейтингом 5 звезд и на данный момент имеет более 10,000 активных загрузок.
4. WordPress Notification Bar
Варианты, которые мы рассматривали до сих пор, прежде всего были направлены на создание навигации в липком хедере, но иногда все, что нужно, это закрепить простое уведомление или кнопку “call to action”. Классический случай — когда нам нужно выделить специальные предложения на сайте или напомнить пользователям, подписаться на рассылку новостей.
WordPress Notification Bar от SeedProd отлично подойдет для решения этой задачи. Его несложно установить, идут простые настройки для цветов, есть совместимость с MultiSite-установками.
5. WPFront Notification Bar
WPFront Notification Bar также, как можно предположить из названия, больше ориентирован на уведомления, а не навигацию.
Параметры настроек чуть более продвинутые, чем в предыдущем варианте. Можно задавать высоту, выбирать где конкретно размещать уведомление во время скролинга, настраивать цвета и т.д.
Также можно задавать дату для начала и конца отображения хедера, ограничивать его появление на конкретных постах или страницах.
Разработчики проделали хорошую работу, собрав простые, но интересные идеи с примерами на одной странице. Более подробное руководство также доступно.
6. Hero Menu
Hero Menu — это единственный платный плагин в нашем списке (доступен за $19).
Он позволяет пользователям создавать все виды меню в течение нескольких минут, начиная от многофункциональных мега меню вплоть до самых простых drop-down вариантов.
Плагин Hero Menu полностью совместим с WooCommerce, был тщательно протестирован с различными ведущими премиум темам WordPress, такими как Enfold, Avada и Divi, вместе со всеми последними версиями WordPress, выбирались темы по умолчанию начиная от Twenty Eleven и до Twenty Fifteen. Полная информация о настройке с самыми популярными темами входит в руководство плагина.
Для создания липкого хедера вам понадобится всего один клик. Есть необходимые настройки для цвета, прозрачности и логотипа. Полная документация и поддержка также доступны на сайте разработчика. Если вы ищете инструмент из серии “все-в-одном”, то этот плагин именно то, что вам нужно.
Добавление липкой навигации на ваш сайт
Неважно, хотите ли вы просто закрепить определенное сообщение на видном месте или создать удобную навигацию, липкий хедер — это отличное решение, которое будет полезным как для посетителей сайта, так и для его владельца.
В этой статье мы попытались описать самые интересные плагины, но если вы заметили, что мы что-то упустили, обязательно делитесь с нами своими замечаниями и советами в комментариях.
Источник: wpmudev.org
Источник: https://Hostenko.com/wpcafe/tutorials/sticky-header-navigation-wordpress/
Как зафиксировать виджет в боковой колонке сайта WordPress
Сегодня речь пойдет о том, как зафиксировать виджет в боковой колонке сайта на WordPress. «Плавающий виджет» (или как его еще часто обзывают – фиксированный виджет) может стать очень эффективным инструментов в руках умелого веб-мастера (владельца сайта) для решения самого разнообразного круга задач.
В первую очередь плавающие виджеты (отдельные блоки, элементы сайта) необходимы для того, чтобы повысить финансовую отдачу от рекламы на сайте, повысить количество подписок на аккаунты в социальных сетях или, например — увеличить поведенческие факторы сайта! Поясню главную суть подобных элементов на сайте.
При чтении любой большой интересной статьи (например, этой
Источник: http://gerkhard.com/kak-zafiksirovat-vidzhet-v-bokovoy-kolonke-sayta-wordpress/
Добавляем плавающее меню в WordPress
Вы наверняка видели ее на сайтах других людей и хотите знать как заполучить ее и себе? Прокручиваемое меню навигации очень легко сделать и в WordPress. Помогите вашим пользователям, позвольте им пользоваться меню с любой области страницы. И вот как это делается…
Шаг 1: Добавляем новую область меню в functions.php
Первым делом вам нужно существующее меню, чтобы отображать его на странице. Давайте создадим новое под названием ‘topnavigation‘. Вот самый простой код установки этого меню в вашем файле functions.php:
register_nav_menus( array( 'topnavigation' => __( 'Top Navigation', 'ЗДЕСЬ НАЗВАНИЕ ВАШЕЙ ТЕМЫ' ) ) );
Если же у вас уже есть функция register_nav_menus, добавьте в нее строку меню ‘topnavigation‘.
Шаг 2: Заполняем наше меню
Переходим в админку сайта, открываем вкладку Меню. Создаем новое меню и назначим его той области, которую мы только что назвали ‘Top Navigation’. Затем накидываем в это меню страницы. Достаточно будет четырех, например Главная, Магазин, События, Блок.
Шаг 3: Вызываем меню
Необходимо вызвать ваше меню вверху body в файле header.php. Важно обернуть это меню в div на ваш выбор. Мы выбрали div под названием topnavigation. Нам он понадобится чуть позже. Это самый простой способ реализации.
Используем следующий код в header.php:
В итоге должно получиться что-то, выглядящее похожим на скриншот:
Конечно, ваша тема будет отличаться.
Шаг 4: Давайте оформим меню в style.css
Теперь мы можем приступить к визуальному оформлению. Чтобы мы видели, что мы делаем, давайте начнем с добавления небольшого кода CSS и зададим фоновый цвет, а также зададим 100% ширины, чтобы меню не смотрелось «странно».
Используем следующий код в style.css или в том файле, где у вас основная таблица стилей:
#topnavigation { width: 100%; background-color: #999; }
Обновите страницу и увидите:
Шаг 5: Размещаем меню по центру
Теперь нам нужно убедиться, что наши ссылки располагаются по центру серой панели. Для этого мы создадим элемент nav вокруг меню навигации:
Затем нужно оформить наш новый nav стилями. Можно сделать так:
#topnavigation nav { width: 940px; //ширина вашего контейнера div может отличаться margin: 0 auto; } #topnavigation li { display: inline; padding: 10px; margin: 20px 0; }
Эти два действия вместе приведут к следующему виду наше меню:
Шаг 6: Фиксируем меню для прокручивания за страницей
И, наконец, делаем его прокручиваемым. Лучшим способом будет фиксация вверху окна, а затем наложение его над всеми элементами страницы.
Обновите ваш стиль #topnavigation следующим образом:
#topnavigation { width: 100%; background-color: #999; position: fixed; // Пристыковываем его к верхней части окна z-index: 1; //Делаем его отображаемым поверх всех элементов height: 50px; //Назначает точку отсчета отображения }
Однако если вы перезагрузите окно, то заметите, что из-за того, что меню плавает, оно перекрывает весь остальной контент под собой
Для решения этой проблемы добавляем отступ от верха контейнера div со всеми элементами внутри. В нашем шаблоне этот div называется #page. Поэтому мы добавим следующее в наш файл CSS:
#page { padding-top: 60px; //Высота нашего div topnavigation плюс немного дополнительного отступа для визуальной эстетики }
Вот что получится в итоге:
Можете настраивать код в CSS под свои нужды и эстетические предпочтения.
Надеемся, что эта статья помогла вам создать плавающее «следящее» меню в WordPress.
По всем вопросам и отзывам просьба писать в комментарии ниже.
Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.
VN:F [1.9.22_1171]
Rating: 4.5/5 (6 votes cast)
Источник: http://WPinCode.com/dobavlyaem-plavayushhee-menyu-v-wordpress/
Заголовок
Если вы посмотрите в правый угол экрана, читая мой пост, то увидите плавающее меню – плашку со словами «Загляни сюда!» Это очень приятный и удобный плагин, который привлечет внимание Вашего посетителя к особенно важным, по вашему мнению, моментам на вашем сайте.
Это могут быть какие-либо рубрики, или даже сторонние ссылки, выводящие посетителя на мини сайты с формой подписки или другими предложениями.
У этого плагина, пожалуй, есть только один отрицательный момент. Когда Вы даете ссылку на сторонний ресурс, она, к сожалению, уводит посетителя с Вашего сайта. То есть ссылка открывается в том же окне.
Загружается этот плагин очень просто. Он есть в коллекции WordPress. Значит, можно ввести в строку поиска название Floating Menu и он появляется на первом месте выдачи.
Или можно скачать с официального сайта http://wordpress.org/extend/plugins/floating-menu/. Активируем и приступаем к настройкам.
Найдете Вы этот плагин в вижетах опции Внешний вид.
А вот теперь обратим внимание на следующий момент. Виджет, как известно, надо установить на определенное место сайт бара.
Но так как этот виджет плавающий, то отображаться он будет только на той странице, на которой отображается область сайт бара с этим плагином.
Если же вы настроили страницу без показа сайт бара ( как на моем сайте страница – Содержание) , то и плавающее меню на этой странице не будет отображаться.
Теперь проведем некоторую подготовительную работу. Дело в том, что бы создать ссылки в плавающем меню, надо создать произвольное меню на Вашем сайте. Это то самое меню, которое расположено в той же опции – Внешний вид. Как его создать Вы можете узнать, прочитав внимательно статью по настройке Произвольного меню.
Теперь открываем виджет и принимаемся за его настройки
1. Выбор меню из созданных в Произвольном меню; 2. Click – меню будет открываться по клику наведенного курсора и закрываться тоже по клику; 3. Hover – меню открывается по клику курсора и автоматически закрывается; 4. Заголовок. В этом окне вводите название меню. У меня – Загляни сюда! 5.
Ширина кнопки в пикселях. Можете установить по своему усмотрению. 6. Локализация верх-низ. TOP –BOTTON. Выбираете расположение плашки меню, внизу или вверху. Второе окно устанавливает отступ от верхнего или нижнего края окна. 7. Локализация право-лево. Второе окно устанавливает расстояние от бокового края; 8.
Скорость «плавания». Это скорость движения кнопки по экрану, в случае соответствующей установки . 9. Скорость «выпадания». Установка скорости раскладывания меню. 10. «Бегающее» меню. Поставив галочку в этом чек боксе, Вы позволите меню передвигаться с движением экрана. 11. Фиксированное открытое меню.
Такое меню установится и «привяжется» к определенному месту экрана в открытом виде. 12. Фиксированное выпадающее меню. А такое меню будет закреплено на определенном месте и открываться по клику. Именно такое меню установлено у меня на сайте. 13. Последнее окно – выбор внешнего вида.
Просто поэкспериментируйте и подберите под дизайн
вашего сайта.
Не забудьте сохранить изменения.
Ну, вот и все. Меню создано.
Удачного продвижения
Источник: https://altacademic.ru/plavayushhee-menyu/
Плавающий блок в сайдбаре блога WordPress
Плавающий блок на сайте — нужен ли он вообще? Вы знаете, я встречал плавающие блоки, которые просто мешали смотреть содержимое. Как будто что-то прилеплено к монитору, и хочется это отлепить. Впечатление ужасное. Возможно, Вы подумали про то же самое, прочитав название этой статьи.
Но речь сейчас пойдет о другом плавающем блоке, который не будет мешать посетителям смотреть содержание Вашего сайта, не будет искажать дизайн, или еще как-то привлекать к себе лишнего внимания, и значит, не будет раздражать.
Этот элемент Вашего блога будет для Вас очень полезным, потому что позволит больше на блоге зарабатывать. Вы, благодаря плавающему блоку, сможете получать больше прибыли с партнерских программ, увеличить приток подписчиков в Ваш подписной лист. А может быть, Вы придумаете что-то свое.
Главное, что такой блок привлекает внимание, а именно это нам от нашей рекламы и нужно.
Если у Вас есть блог WordPress, то на блоге есть и сайдбар — неотъемлемый элемент блога. Когда посетитель прокручивает блог вниз, читая статью и комментарии, сайдбар прокручивается также вместе со статьей.
И когда сайдбар полностью уходит вверх, на его месте образуется свободное пространство. Может быть, это хорошо с точки зрения аскетизма и минимализма, но не очень хорошо с точки зрения заработков.
И тогда появляется вопрос — почему бы не сделать так, чтобы вместо сайдбара было не пустое место, а был какой-то виджет, постоянно находящийся в поле зрения, то есть опускающийся по ходу прокрутки Вашего блога вниз.
При этом все должно происходить совершенно естественно, когда сайдбар еще виден, никаких плавающих блоков не должно быть. Ничего не должно раздражать и мешать. Плавающий блок должен появляться только на пустом месте.
Как выглядит плавающий блок, Вы можете увидеть на блоге Александра Борисова. Кстати, очень рекомендую бесплатный курс «Вся правда о заработке на блогах» — его Вы найдете в сайдбаре у Александра. Из курса Вы узнаете, почему большинство блоггеров не зарабатывает, или зарабатывает намного меньше, чем могли бы.
Итак, как же все-таки реализовать такой плавающий блок для блога WordPress? Это можно сделать двумя способами. Первый — с помощью плагина, второй — с помощью кода. Какой способ лучше — решать Вам.
Возможно, какой-то из этих способов просто не подойдет Вам — или версия WordPress окажется не такой, или с темой блога что-то будет не так, или по дизайну не получится.
В таком случае, берите второй вариант.
Недостаток первого способа — любой плагин немного тормозит блог. Но лично я считаю, что это торможение в какие-то доли секунды особой роли не играет. Недостаток второго способа — при очень малых разрешениях экрана плавающий блок будет налазить на другие элементы дизайна Вашего блога.
Рассмотрим теперь эти варианты подробнее:
Плавающий блок с помощью плагина
Заходите в административную панель блога, в меню Плагины — Добавить новый, и в окошке поиска вписываете название плагина — Q2W3 Widget. Находите плагин Q2W3 Widget (Sticky Widget), устанавливаете и активируете его.
Теперь Вы можете добавить новый виджет в сайдбар, или выбрать для фиксации существующий. Если хотите зафиксировать тот, который у Вас уже есть, зайдите в административной панели в меню Внешний вид — Виджеты, и поставьте галочку в чекбоксе Зафиксировать виджет, под соответствующим виджетом.
После этого заходите в меню Внешний вид — Фикс.Виджеты, и прописываете верхний и нижний отступ, то есть расстояние от плавающего блока до верхнего и нижнего краев окна браузера.
Плавающий блок с помощью кода
Заходите в административную панель блога, в меню Внешний вид — Редактор, находите пункт Боковая колонка (sidebar.php), и ставите в то место, где должен быть плавающий блок, следующий код:
В коде обращаете внимание на числа, которые ответственны за момент, когда появляется плавающий блок, за расположение и ширину блока. Изменяете эти параметры на свои. Вместо слова «контент» ставите содержание своего блока. Также можете зайти в редакторе в шаблон Список стилей (style.css), и прописать стили для блока:
Источник: http://pro444.ru/business/plavayushhij-blok-v-sajdbare-bloga-wordpress.html
Как закрепить меню вверху страницы при прокрутке вниз » Блог Петра и Марии Лунеговых
Автор Петр Лунегов в 27.12.2014. Опубликовано Меню, страницы, записи, рубрики, Плагины, Создание сайта на WordPress
Я расскажу вам как закрепить любое меню в любой теме wordpress с помощью замечательного плагина sticky menu
Здравствуй, уважаемый читатель!
Как ты можешь наблюдать на моем сайте, при прокрутке любой страницы вниз, вверху страницы остается меню. То есть Html-элемент, который выводит меню, не скроллится вверх, уплывая за границы экрана! Он остается на месте привязанным к верхней границе.
В прошлой статье я писал о плагине, который создает меню в верхнем экране страницы. Оно плавает и раскрывается. Все это делает плагин.
Недостатки плагина очевидны — у него мало вариантов настройки дизайна, а те, которые предоставляются в настройках, не выдерживают критики (откровенно серые и невзрачные). Кроме того, он создает заметную нагрузку на слабых компьютерах посетителей.
Я не советую ставить вам на сайт это плавающее меню.
Есть еще целая куча разных плагинов, их объединяет то, что в код сайта внедряются скрипты, которые могут не сработать у посетителя (если у него стоит запрет на скрипты в браузере). Кроме того, некоторые продвинутые плагины заметно тормозят в браузерах.
Ваши посетители не оценят заметных тормозов на сайте — они не будут к вам приходить.
Все это я прошел на собственном опыте. После того как посещаемость упала, я в панике бросился искать причину такого поведения. И понял, что плагины плавающего меню сильно тормозят на слабых компьютерах, а в мобильниках вообще атас!
Таким образом я просто плюнул на все эти всплывающие меню и отключил их на фиг!
Прошел месяц. Я много сделал, полностью обновил дизайн, перешел на продвинутую платформу (не просто тема, а целая платформа для платных тем).
И поэтому у меня снова появилось желание сделать меню интерактивным, плавающим.
Пришлось менять подход и попытаться найти плагин с другим принципом действия.
Решение нашлось, и очень хорошее!
Представляю вашему вниманию плагин Sticky Menu. Его преимущество:
- Он очень простой. Его единственное действие — он закрепляет определенный элемент Html-представления сайта от прокрутки. С помощью скрипта.
- Вторая важная настройка — на малых экранах (планшеты, мобильники) — меню остается на месте.
Это делает плагин ценным помощником веб-мастеру. Плагин совершенно не тормозит, поэтому посетители будут приятно удивлены закрепленному меню, тормозить у них ничего не будет!
Итак, приступим к установке и настройке плагина!
Для тех, кто не знаком с отличным и очень важным инструментов Firebug, я позже напишу короткий обзор. Пишите в комментарии, если он вам нужен
Все! Теперь наше меню закреплено вверху страницы!
Если у вас не получается, пишите в комментарии, помогу чем смогу
Я при настройке плагина помучился с именами html-элементов 40 минут, прежде чем нашел нужное имя. у меня все работает, значит и у вас все получится
Не забывайте написать ваш комментарий, понравилась ли статья, получилось ли у вас с меню, какие вопросы у вас возникли. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!
Успехов в веб-мастеринге, счастливо, друзья!
Источник: http://BrainColor.ru/kak-zakrepit-menyu-vverhu-stranitsyi-pri-prokrutke-vniz.html
WordPress: добавляем фиксированное навигационное меню
Фиксированная навигационная панель часто встречается на различных ресурсах. Такой функционал достаточно легко воспроизвести на WordPress. Фиксированная панель поможет вашим читателям быстро перейти к интересному разделу из любой точки на странице.
1. Добавляем область меню в файле funсtions.php
Для того, чтобы меню вывести на странице, должна иметься определенная область. Создадим новую с именем ‘topnavigation‘. Ниже приводится пример обычного кода для установки области меню в файле functions.php:
register_nav_menus( array( 'topnavigation' => __( 'Top Navigation', 'ИМЯ ВАШЕЙ ТЕМЫ' ) ) );
Если у вас уже есть определение функции 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 (или тот, который используется в вашей теме):
#topnavigation { width: 100%; background-color: #999; }
Обновляем страницу и видим результат действий:
5. Сдвигаем меню в центр
Теперь нужно расположить наши ссылки в центре панели. Создадим элемент nav вокруг меню:
И определим для него стили:
#topnavigation nav { width: 940px; //у вас ширина контейнера может быть другой margin: 0 auto; } #topnavigation li { display: inline; padding: 10px; margin: 20px 0; }
Теперь наше меню будет выглядеть так:
6. Фиксируем меню
Теперь надо зафиксировать меню. Лучше всего установить меню вверху окна и сделать его плавающим поверх остальных элементов страницы.
Изменим стили для #topnavigation:
#topnavigation { width: 100%; background-color: #999; position: fixed; // Фиксируем меню вверху окна z-index: 1; // Помещаем его поверх всех остальных элементов height: 50px; // Устанавливаем высоту }
Но если перегрузить страницу, то вы увидите, что другие элементы заходят под наше меню и тогда, когда не нужно (в самом верху страницы).
Для исправления ситуации добавим поле сверху контейнера div для остальных элементов страницы. В нашем шаблоне такой элемент div называется #page. Вносим изменения CSS кода для него:
#page { padding-top: 60px; // Высота элемента topnavigation плюс небольшой отступ для визуальной привлекательности }
Получаем окончательный результат:
Внешний вид меню можно делать таким, какой требуется по стилю сайта.
Источник: https://ruseller.com/lessons.php?id=1580&rub=40
Плавующий виджет с плагином и без в сайдбаре
Здравствуйте, уважаемые читатели и гости 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
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
При необходимости можно внести изменения и установить свои значения в паре строк кода, но я этого делать не стала. Теперь остается только в файле sidebar.php зафиксировать необходимый блок. Для этого размещаем код:
| 1 2 3 |
Текст информации блока |
Текст информации блока<\p>
Вместо текста «Текст информации блока» размещаем код формы подписки, банер со ссылкой и так далее. Все что теперь остается сделать — это прописать css стили отображения зафиксированного виджета и медиа запрос в файле style.css
| 1 2 |
.widgetblok{margin-top:40px;} @media only screen and (max-width:740px) {.widgetblok{display:none;}} |
.widgetblok{margin-top:40px;} @media only screen and (max-width:740px) {.widgetblok{display:none;}}
То есть, я указала верхний отступ при помощи параметра margin-top:40px; и прописала, что при размере экрана менее 740рх плавующий виджет появляться не будет вообще.
Теперь остается проверить как отображается фиксированный виджет — откройте главную страницу сайта на wordpress или самую длинную запись вашего ресурса и пролистайте ее в самый низ. Главное, при создании такого плавующего виджета соблюдать простые правила:
- фиксируем только последний виджет в sidebar;
- не стоит фиксировать несколько блоков одновременно, тем самым уменьшая конверсию одного из них;
- не допускаем некорректное отображение блока — соблюдаем отступы сверху и снизу, блок не должен наезжать на footer или отображаться полностью сверху;
На этом у меня все! Надеюсь у вас получилось выполнить рекомендации из этой статьи и создать плавающий блок на своем ресурсе. И конечно же, если информация была для вас полезной, я не буду против лайка в соцсетях.
Удачи и скорой встречи!
С уважением, Наталья Яшина
Вам понравилась статья? Расскажите о ней друзьям!
Источник: https://www.lediseo.ru/plavuyushhij-vidzhet-ili-kak-povysit-konversiyu-formy-v-sidebar.html
Загрузка...
