Видели ли вы на популярных сайтах область табов, которая позволяет увидеть популярные, недавние и тематические посты одним щелчком мыши?? Он называется jQuery tabber widget и позволяет экономить место на экране пользователя, объединяя различные виджеты в один. В этой статье мы покажем вам, как добавить jQuery Tabber Widget в WordPress.
Почему вы должны добавить виджет jQuery Tabber?
При управлении сайтом WordPress вы можете легко добавлять элементы в боковые панели с помощью виджетов перетаскивания. По мере роста вашего сайта, вы можете почувствовать, что вам не хватает места в сайдбаре, чтобы показать весь полезный контент. Это именно тот случай, когда табулятор может пригодиться. Это позволяет вам показывать различные элементы в одной и той же области. Пользователи могут нажимать на каждую вкладку и видеть контент, который их больше всего интересует. Многие крупные сайты используют его для показа популярных статей сегодня, на этой неделе и в этом месяце. В этом руководстве мы покажем вам, как создать виджет табов. Однако мы не будем показывать вам, что нужно добавить в ваши вкладки. Вы можете добавить практически все, что вам нравится.
Примечание: этот учебник предназначен для пользователей среднего уровня и требует знаний HTML и CSS. Для начинающих пользователей, пожалуйста, обратитесь к этой статье.
Создание виджета jQuery Tabber в WordPress
Давайте начнем. Первое, что вам нужно сделать, это создать папку на рабочем столе и назвать ее wpbeginner-tabber-widget . После этого вам нужно создать три файла в этой папке с помощью обычного текстового редактора, например, Блокнота.
Первый файл, который мы собираемся создать, это wpb-tabber-widget.php . Он будет содержать HTML и PHP код для создания вкладок и пользовательского виджета WordPress. Второй файл, который мы создадим — wpb-tabber-style.css , и он будет содержать CSS стили для контейнера вкладок. Третий и последний файл, который мы создадим — wpb-tabber.js , который будет содержать скрипт jQuery для переключения вкладок и добавления анимации.
Давайте начнем с wpb-tabber-widget.php файл. Цель этого файла — создать плагин, который регистрирует виджет. Если вы впервые создаете виджет WordPress, то мы рекомендуем вам взглянуть на наше руководство по созданию пользовательских виджетов WordPress или просто скопировать и вставить этот код в wpb-tabber-widget.php файл:
В приведенном выше коде мы сначала создали плагин, а затем внутри этого плагина создали виджет. В разделе вывода виджета мы добавили скрипты и таблицу стилей, а затем сгенерировали HTML-вывод для наших вкладок. Наконец, мы зарегистрировали виджет. Помните, что вам нужно добавить содержимое, которое вы хотите отобразить на каждой вкладке.
Теперь, когда мы создали виджет с PHP и HTML кодом, необходимым для наших вкладок, следующим шагом будет добавление jQuery для отображения их в виде вкладок в контейнере вкладок. Для этого вам нужно скопировать и вставить этот код в wp-tabber.js файл.
(function($) < $(".tab_content").hide(); $("ul.tabs li:first").addClass("active").show(); $(".tab_content:first").show(); $("ul.tabs li").click(function() < $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab_content").hide(); var activeTab = $(this).find("a").attr("href"); //$(activeTab).fadeIn(); if ($.browser.msie) else return false; >); >)(jQuery);
Теперь наш виджет с jQuery готов, последний шаг — добавить стилизацию к вкладкам. Мы создали пример таблицы стилей, которую вы можете скопировать и вставить в wpb-tabber-style.css файл:
ul.вкладки < position: relative; z-index: 1000; float: left; border-left: 1px solid #C3D4EA; >ul.tabs li < position: relative; overflow: hidden; height: 26px; float: left; margin: 0; padding: 0; line-height: 26px; background-color: #99B2B7; border: 1px solid #C3D4EA; border-left: none; >ul.tabs li a < display: block; padding: 0 10px; outline: none; text-decoration: none; >html ul.вкладки li.активный, html ul.вкладки li.active a:hover < background-color: #D5DED9; border-bottom: 1px solid #D5DED9; >.widget-area .виджет .вкладки < color: #FFFFFF; >.tab_container < position: relative; top: -1px; z-index: 999; width: 100%; float: left; font-size: 11px; background-color: #D5DED9; border: 1px solid #C3D4EA; >.tab_content < padding: 7px 11px 11px 11px; line-height: 1.5; >.tab_content ul < margin: 0; padding: 0; list-style: none; >.tab_content li < margin: 3px 0; >.tab-clear
Вот и все. Теперь просто загрузите папку wpbeginner-tabber-widget в каталог /wp-content/plugins/ вашего WordPress сайта через FTP. В качестве альтернативы вы также можете добавить папку в zip-архив и перейти в раздел Плагины » Добавить новый в области администратора WordPress. Нажмите на вкладку «Загрузить», чтобы установить плагин. Как только плагин будет активирован, перейдите в раздел Внешний вид » Виджеты, перетащите WPBeginner Tabber Widget в боковую панель и все.
Мы надеемся, что это руководство помогло вам создать jQuery-таббер для вашего сайта WordPress. Для получения вопросов и отзывов вы можете оставить комментарий ниже или присоединиться к нам в Twitter или Google+.
Источник: www.wpbeginner.com