Добавляем выезжающую панель меню в тему WordPress. Как создать “липкую” плавающую боковую панель виджетов в WordPress Где писать текст или вставлять код в плагине TheThe Sliding Panels

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

Примечание: Данная статья предполагает средний уровень знаний HTML и CSS.

Заменяем стандартное меню на выезжающую панель в WordPress

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

Первым делом нам нужно открыть текстовый редактор типа Блокнот и создать новый файл. Скопируйте и вставьте в него следующий код:

Замените example.com на ваше доменное имя сайта, а также измените your-theme на действующую папку вашей текущей темы. Сохраните файл с именем slidepanel.js на компьютер. Этот код использует jQuery для переключения выезжающей панели меню. Также он анимирует эффект переключения.

Открываем свой FTP-клиент (Filezilla или Total Commander) и подключаемся к своему сайту. Далее переходим в директорию вашей тему и если в ней уже существует папка js , тогда откройте ее. Если же в вашей теме нет такой директории, то создайте её и загрузите внутрь файл slidepanel.js.

Следующий шаг — дизайн или поиск иконки для меню. Наиболее используемая иконка для этого — с тремя полосками. Ее можно создать в любом графическом редакторе (например, в Photoshop) или найти одну из множества существующих в гугле. В этом примере мы будем использовать размер 27x23px для иконки. После того, как вы ее создадите, переименуйте в menu.png и загрузите в папку с изображениями в директории вашей темы.

Следующий шаг — для выезжающей панели меню. Нужно просто скопировать и вставить следующий код в файл functions.php темы:

Wp_enqueue_script("wpb_slidepanel", get_template_directory_uri() . "/js/slidepanel.js", array("jquery"), "20131010", true);

Теперь, когда все подготовительные работы завершены, необходимо модифицировать дефолтное меню темы. Как правило, большинство тем выводят меню навигации в файле header.php темы. Открываем header.php и находим строку, похожую на эту:

"primary", "menu_class" => "nav-menu")); ?>

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

"primary", "menu_class" => "nav-menu")); ?>

Замените example.com на ваше доменное имя и your-theme на вашу папку темы. Сохраните изменения.

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

@media screen and (min-width: 769px) { #toggle { display:none; } } @media screen and (max-width: 768px) { #popout { position: fixed; height: 100%; width: 250px; background: rgb(25, 25, 25); background: rgba(25, 25, 25, .9); color: white; top: 0px; left: -250px; overflow:auto; } #toggle { float: right; position: fixed; top: 60px; right: 45px; width: 28px; height: 24px; } .nav-menu li { border-bottom:1px solid #eee; padding:20px; width:100%; } .nav-menu li:hover { background:#CCC; } .nav-menu li a { color:#FFF; text-decoration:none; width:100%; } }

Имейте в виду, что меню вашей темы может использовать различные классы CSS и они могут конфликтовать с теми, что приведены выше. Решить эту проблему можно, используя Инспектор в Хроме или Firefox для того, чтобы выяснить какие именно классы конфликтуют с вашими. Также не забывайте о том, что внешний вид панели вы вольны настроить под дизайн сайта.

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

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

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

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

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

Наверняка вам частенько встречались на страницах сайтов, выдвигающиеся панели различного вида и расположения, высказывающие сверху, снизу, справа или слева на полном автомате, с заданным интервалом времени, или же активируемые по клику. Как правило, в таких панелях размещают скрытую с глаз пользователя до поры до времени, какую-либо дополнительную информацию, важную и не очень. Например формы подписки, виджеты соц.сетей, ссылки, теги, контактные данные и т.д и т.п., короче, всё что угодно.
Существует огромное количество готовых решений реализации выдвижных панелей на javascript, модули и плагины для различных CMS, отдельные плагины jQuery, но совсем немного, попадалось мне на глаза, полностью рабочих способов на чистом CSS.

Давно хотел замутить что-нибудь этакое, механизм использования скрытых чекбоксов хорошо знаком и понятен, да всё как-то руки не доходили. И вот, наткнувшись в пыльных кладовых CodePen на одну , решил поэкспериментировать и выдать на гора, вполне себе рабочий, немного видоизменённый и адаптированный для нашего брата, свой вариант выдвижной верхней панели на чистом CSS, получилось то, что получилось)).

Пример посмотрели, с оригиналом сравнили, и теперь, кому оно надо, давайте вместе разберём, как всё это дело работает. Ещё раз напоминаю, никаких js, только девственно-чистый html и «магия» css, сделают всю работу.

Раскладка Html

Состоит из трёх основных элементов: базовый контейнер, блок с содержанием и кнопка открытия/закрытия панели.

Здесь размещаете любое содержание.....

Как видите в конструкции панели присутствует флажок type=" " , по-умолчанию скрыт и неактивен. С помощью тега , который оформлен в виде кнопки в css, устанавливаем связь между чекбоксом, т.е., если нажать на label , то сработает input (станет активным). Ну, а с помощью псевдокласса: в css устанавливаем связь между скрытым чекбоксом и элементами панели.
Сразу хочу отметить, что кнопка открытия/закрытия не привязана к телу панели, а позиционируется относительно основного контейнера контента страницы

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

Теперь, давайте сформируем стили нашей выдвигающейся панели, для начала, установим размеры базового контейнера, определим цвет фона и его изначальное расположение. В CSS создадим класс.top-panel , в котором и пропишем все необходимые нам свойства.
Панель у нас выдвижная, а значит нам нужно её скрыть, делается это очень просто. Устанавливаем фиксированное позиционирование position: fixed; , растягиваем на всю ширину страницы width: 100%; , высоту (height:) панели не указываем, в этом случае, панель автоматом будет подстраиваться под размер содержимого, а с помощью transform: translateY(-100%); , задвигаем нашу панель за верхний край страницы.

. top- panel { background: #39464e; position: fixed; top: 0 ; width: 100 %; padding: 0 ; - webkit- box- sizing: border- box; - moz- box- sizing: border- box; box- sizing: border- box; - webkit- transform: translateY(- 100 % ) ; - moz- transform: translateY(- 100 % ) ; transform: translateY(- 100 % ) ; }

Top-panel { background: #39464e; position: fixed; top: 0; width: 100%; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); }

Блок сообщения панели расположен внутри базового контейнера и ему присвоен определённы класс class="message" , именно в неё мы указываем свойства для всех элементов располагающихся внутри этого бока, цвет и семейство шрифта, размеры изображений и т.д...
Можно конечно спокойно обойтись и без этого дополнительного блока, расположив сообщение непосредственно в базовом контейнере, но при этом теряется гибкость возможных настроек панели.
Сообщение выводится строго по центру и растягивается на заданную ширину max-width: 980px; , значение произвольное, вы можете выбрать совершенно другие размеры.

/* Блок сообщения */ .message { color: #fff; font-weight: 300; position: relative; padding: 2em; margin: 0 auto; max-width: 980px } /* Заголовок 1 уровня */ .message h1 { color: #fff } /* Заголовок 2 уровня */ .message h2 { color: #888 }

Далее, определим все необходимые стили для переключателя нашей панели. Для начала скроем с глаз пользователей флажок type="checkbox" , не особо мудрствуя, в html тегу пропишем атрибут hidden , который и определяет, отображать объект в окне браузера или нет.

Open { position: absolute; clip: rect(0 0 0 0); opacity: 0; }

Тегу присвоим class="btn" , с которым и будем работать в css, чтобы «нарисовать», вполне себе симпатичный переключатель(кнопку):

/* Переключатель панели */ label. btn { display: block; position: absolute; right: 25px; top: 100 %; /*bottom: -35px;*/ cursor: pointer; background: #2bbbad; border- radius: 0 0 3px 3px; padding: 8px 16px; color: #fff; font- size: 100 %; line- height: 1em; text- align: center; - webkit- font- smoothing: antialiased; cursor: pointer; box- shadow: 0 2px 5px 0 rgba(0 , 0 , 0 , 0.16 ) , 0 2px 10px 0 rgba(0 , 0 , 0 , 0.12 ) ; z- index: 9999 } /* Переключатель при наведении */ label. btn: hover { - webkit- transition: 0. 35s; - moz- transition: 0. 35s; transition: 0. 35s; box- shadow: 0 5px 11px 0 rgba(0 , 0 , 0 , 0.18 ) , 0 4px 15px 0 rgba(0 , 0 , 0 , 0.15 ) } /* Стрелка переключателя вниз */ label. btn: after { content: "\f078" ; font: normal 18px/ 1 FontAwesome; text- decoration: inherit }

/* Переключатель панели */ label.btn { display: block; position: absolute; right: 25px; top: 100%; /*bottom: -35px;*/ cursor: pointer; background: #2bbbad; border-radius: 0 0 3px 3px; padding: 8px 16px; color: #fff; font-size: 100%; line-height: 1em; text-align: center; -webkit-font-smoothing: antialiased; cursor: pointer; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); z-index: 9999 } /* Переключатель при наведении */ label.btn:hover { -webkit-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s; box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15) } /* Стрелка переключателя вниз */ label.btn:after { content: "\f078"; font: normal 18px/1 FontAwesome; text-decoration: inherit }

Стрелки переключателя взяты из пакета шрифт-иконок FontAwesome, соответственно файл стилей этого набора, должен быть предварительно подключён к странице:

< link href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel= "stylesheet" >

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

Активируем нашу панель и изменяем состояние переключателя с помощью псевдокласса:checked .
С помощью свойства box-shadow добавил лёгкую тень нижнему краю активной панели, а с помощью transition установил простенький эффект перехода между двумя состояниями панели(открытой и закрытой).

. open: checked ~ . top- panel { box- shadow: 0 2px 5px 0 rgba(0 , 0 , 0 , 0.16 ) , 0 2px 10px 0 rgba(0 , 0 , 0 , 0.12 ) ; - webkit- transform: translateY(0 ) ; - moz- transform: translateY(0 ) ; transform: translateY(0 ) ; - webkit- transition: 0. 35s; - moz- transition: 0. 35s; transition: 0. 35s } . open: not(: checked) ~ . top- panel { - webkit- transition: 0. 35s; - moz- transition: 0. 35s; transition: 0. 35s } /* Цвет переключателя при клике */ . open: checked ~ . top- panel > label. btn { background: #dd6149 } /* Стрелка переключателя вверх*/ . open: checked ~ . top- panel > label. btn: after { content: "\f077" ; font: normal 18px/ 1 FontAwesome }

Open:checked ~ .top-panel { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); -webkit-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s } .open:not(:checked) ~ .top-panel { -webkit-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s } /* Цвет переключателя при клике */ .open:checked ~ .top-panel > label.btn { background: #dd6149 } /* Стрелка переключателя вверх*/ .open:checked ~ .top-panel > label.btn:after { content: "\f077"; font: normal 18px/1 FontAwesome }

Для изменения размеров шрифта при просмотре на различных экранах пользовательских устройств, использовал медиа-запросы @media . Учитывая современные реалии, думаю совсем не лишнее дополнение:

@ media only screen and (max- width: 400px) { body { font- size: 90 % } } @ media only screen and (max- width: 800px) { body { font- size: 100 % } } @ media only screen and (min- width: 1100px) { body { font- size: 120 % } }

@media only screen and (max-width: 400px) { body { font-size: 90% } } @media only screen and (max-width: 800px) { body { font-size: 100% } } @media only screen and (min-width: 1100px) { body { font-size: 120% } }

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

С Уважением, Андрей

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

6 плагинов панели уведомлений для WordPress:

1. WordPress Notification Bar

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

2. Easy Heads Up Bar

Heads Up Bar – этот плагин работает подобно описанному выше WordPress Notification plugin, но с несколькими ключевыми отличиями в параметрах административной панели.

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

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

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

Здесь вы можете увидеть пример его работы:

3. Quick Notice Bar

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

Здесь вы можете увидеть пример его работы:

4. The Hello Bar

Hello Bar – этот плагин очень похож на WordPress Notification Plugin, который мы рассмотрели выше, с некоторыми исключениями. Сначала вы должны будете зарегистрироваться на сайте hello bar, чтобы получить возможность работать с этим плагином. Как и некоторые другие, Hello Bar позволяет вам размещать любое сообщение или объявление с бесконечными вариантами цвета и шрифтов. Но что действительно сильно отличает этот плагин от других – это возможность легко отслеживать сделанные клики и тестировать различные сообщения.

Здесь вы можете увидеть пример его работы:

5. Viper Bar

Viper Bar – этот плагин от Viper Chill имеет больше всего особенностей из всех основных плагинов панели уведомлений. Вы можете:

Изменять внешний вид, изменяя настройки цвета, заднего фона, прозрачности, а также цвета текста.
Вставлять выбранные формы на почтовую рассылку или ваш RSS-поток.
Собирать статистику о ваших формах, таких, как количество показов, предоставление форм и выбранные преобразования.
Устанавливать cookies, чтобы пользователи могли скрыть панель после того, как они уже видели её. Это очень полезная функция, если вы выбираете панель для прокрутки страницы с пользователем, что, разумеется, может очень раздражать и отвлекать. Вы также можете закрепить панель в верхней части страницы.
Делать различные тестирования для оптимизации результатов вашей работы с этой панелью.

Здесь вы можете увидеть пример его работы:

6. News Ticker

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

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

Если вы хотите эту статью или её часть разместить на вашем сайте, то вы можете сделать это, разместив на нём ссылку на наш сайт.

Как меню навигации по сайту, меню профиля пользователя и т. д. можно скрыть и появляться они будут при нажатии и наведении. Некоторые могут сказать, что от этого страдает юзабилити страницы. Не думаю, так как страница стает чище, а значит легче ориентироваться. Человек не путается в горе ссылок.
Сегодня я подготовил коллекцию слайд-панелей , которые по умолчанию на странице скрыты. Чтоб вызвать меню , требуется нажать или навести мышкой на соответствующую иконку. Этот прием пришел в веб-дизайн из мобильных приложений , где нельзя разметить много элементов на одном экране. Со временем такие панели перекочевали и в веб-сайты. Данная коллекция пригодятся, в первую очередь, разработчиками мобильных, . При маленьком разрешении экрана будет появляться именно такая выезжающая навигация , а на нормальных, больших мониторах можно сделать обычное меню, к которому все привыкли. Таким образом человек с мобильным устройством не запутается в вашем сайте, так как он давным давно привык к использованию слайд-панелей , ведь все приложения в его смартфоне работают по такому же принципу.
Хочу заметить, что в данную коллекцию вошли плагины , которые заточены только под мобильные сайты и на широких мониторах их использование будет неуместно. Хотя присутствуют и универсальные панели, которые подойдут для любого веб-сайта. Смотрите демо и выбирайте, что подойдет под ваши задачи.
Выпадающие панели работают на . Внедрить в свой сайт такое меню не составит особого труда, а на сайтах разработчиков присутствуют детальные инструкции по использованию их продукта.
Вскоре мы планируем редизайн сайта «Постовой» и будем использовать в верстке один из jquery плагинов , которые представлены ниже.
Итак. К вашему вниманию коллекция из 20 jquery плагинов выпадающих слайд-панелей для вашего сайта. Не забываем оставлять комментарии.

Swipeable Side Menu

Симпотичное выезжающее меню навигации на jquery в виде слайд-панели . Идеально подойдет как для мобильного сайта, так и для обычного.

Transitions for Off-Canvas Navigations

Чрезвычайно мощный плагин позволяющий организовать слайд-панель , которая будет показываться с разными анимационными эффектами в том числе и 3D. Плагин включает в себя 14 эффектов анимации.

jPanelMenu

Панель навигации выполнена в стилистике IOS приложений. Легкое и быстрое меню, которое облегчит разработку мобильного сайта.

Recreate Google Nexus Menu

Выезжающая панель выполнена по аналогии с Google Nexus меню.

bigSlide - слайд-панель навигации на Jquery

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

Multi-Level Push Menu

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

Box Lid Menu

Очень красивая слайд-панель навигации с 3D эффектом.

Animated Border Menus

Кликнув на плюсик в уголку экрана появляется маленькая боковая панель с иконками. Чтоб ее скрыть, требуется нажать на иконку с символом "-".

Snap.js

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

Slide and Push Menus

Meny

Jquery плагин позволяющий реализовать у себя на сайте классную слайд-панель навигации с 3D эффектом.

mb.jquery

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

Android Dock

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

Слайд-панель с контентом

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