amp-web-push-widget button.amp-subscribe { display: inline-flex; align-items: center; border-radius: 5px; border: 0; box-sizing: border-box; margin: 0; padding: 10px 15px; cursor: pointer; outline: none; font-size: 15px; font-weight: 500; background: #4A90E2; margin-top: 7px; color: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .amp-logo amp-img{width:190px} .amp-menu input{display:none;}.amp-menu li.menu-item-has-children ul{display:none;}.amp-menu li{position:relative;display:block;}.amp-menu > li a{display:block;} .icon-widgets:before {content: "\e1bd";}.icon-search:before {content: "\e8b6";}.icon-shopping-cart:after {content: "\e8cc";}

Categories: Плагины

Меню WordPress в виде удобных вкладок

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

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

Меню WordPress с плагином Tabs Shortcode And Widgets

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

Итак, начать нужно с обычных и знакомых всем действий – скачайте, установите и активируйте плагин Tabs Shortcode And Widgets. После этого сразу перейдите в редактор записей или страниц и там нажмите на кнопку «InsertShortCode». Перед вами откроется окно для настройки вкладок меню WordPress. Рассмотрим его опции:

Выбираем количество вкладок в меню. Можно сделать от 1 до 10.
Вкладки могут быть горизонтальными или вертикальными.
Tabs title. Задаём заголовок меню WordPress.
Tab 1 title. Задаём заголовок для первой вкладки меню.
Tab 1 icon. Задаём иконку для первой вкладки. Есть значительный ассортимент иконок.
Tab 1 Icon URL. Или можно задать ссылку на свою иконку.
Tab 1 content. Записывается содержимое первой вкладки.

А далее идут все эти же настройки, только для всех остальных вкладок.

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

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

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

Адель Гадельшин