Как сделать виджет с табами для WordPress?

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

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

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

И меню с табами смотрится очень презентабельно. На приведенном ниже изображении видно, как много места сайдбара съедается 3-мя стандартными виджетами, расположенными вертикально, (применена дефолтная тема Twenty Ten).

Стандартное размещение виджетов — слева, наш виджет — справа.

Как сделать виджет с табами для WordPress?

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

Потому что мы собираемся заняться строительством виджета, может быть вы возжелаете выяснить о том, что такое виджеты API и научиться создавать обыкновенные базисные виджеты:«Виджеты, на базе технологии API», WordPress Codex«Создание виджетов для WordPress 2.8» Тима Тротта из Azulia Designs«Продвинутые виджеты для WordPress» WP RootsНаша задумкаИдея этого виджета ординарна: избираем боковую колонку, и виджет Tabber покажет все виджеты, расположенные там в виде меню со вкладками. Интерфейс виджета устроен таким макаром, что вы сможете избрать боковую колонку, добавить дополнительный CSS-класс и, при желании, применить свои собственные стили.

Если плагин активирован, он регистрирует новейшую боковую колонку (который, вобщем, можно удалить, если вы понимаете другой метод добавить сайдбар). Потом, использовав тот же код, вы можете добавить другие боковые колонки, любая из которых будет содержать собственный виджет Tabber.Для управления своими виджетами Tabber употребляет idTabs для jQuery, разработанный Шоном Кэчпоулом, но вы всегда сможете отыскать другое решение.

Направьте внимание, что дополнительные файлы CSS подгружаются для предназначения стилей окончательного виджета.Вот базисная структура HTML для сотворения табов:<ul><li><a href=»#widget-1?>Widget one</a></li><li><a href=»#widget-2?>Widget two</a></li><ul><div id=»widget-1?>Widget one’s content</div><div id=»widget-2?>Widget two’s content</div>12345678910<ul><li><a href=«#widget-1»>Widget one</a></li><li><a href=«#widget-2»>Widget two</a></li><ul><div id=«widget-1»>Widget one‘s content</div><div id=»widget-2?>Widget two’s content</div>К огорчению, вы не можете получить схожую структуру, просто впрямую совместив боковую колонку WordPress’а и рендеринг виджета. Стандартная структура WordPress-виджета смотрится так:<div id=»widget-1?><h2>Widget one</h2>Widget one’s content</div><div id=»widget-2?><h2>Widget two</h2>Widget two’s content</div>12345678<div id=«widget-1»><h2>Widget one</h2>Widget one‘s content</div><div id=»widget-2?><h2>Widget two</h2>Widget two’s content</div>Итак, основная цель виджета Tabber – трансформировать хоть какой виджет таким макаром, чтобы он использовал разметку, применимую для отображения в виде табов.

Задачку усложняет тот факт, что различные темы могут регестрировать боковые колонки, которые не употребляют тегв качестве контейнера для виджета, либо тег для отображения заголовка виджета. Например, новенькая дефолтная тема Twenty Twelve употребляет для этих целей теги и . Другие темы могут использовать более сложную разметку, поведение которой очень трудно предсказать, и поэтому она может безуспешно преобразоваться в подходящую для табов структуру.Данную делему можно решить, заблаговременно просмотрев характеристики виджета до рендеринга, а потом, если это пригодится, реструктурировать их в нужные структуры при помощи JavaScript либо jQuery таким макаром, чтобы они могли корректно отображаться в виде табов.

Подробнее об этом чуток позднее.Подключение Tabber виджетаТеперь, когда мы осознаем цель, к которой стремимся, давайте взглянем на демо-версию плагина. Наш плагин состоит из основного PHP-файла, файла JavaScript и 1-го CSS-файла.

PHP-файл содержит виджет и подключает CSS и JavaScript файлы. Смотрится это так:add_action(‘init’, ‘d4p_st_init’);add_action(‘widgets_init’, ‘d4p_st_widgets_init’);function d4p_st_init() {register_sidebar(array(‘name’ => ‘Tabber Example Sidebar’, ‘description’ => ‘Add widgets to this sidebar to use it from Tabber widget.’));if (!is_admin()) {$url = plugins_url(‘d4p-smashing-tabber’);wp_enqueue_script(‘jquery’);wp_enqueue_script(‘d4p_st_tabber’, $url.’/tabber.js’, array(‘jquery’));wp_enqueue_style(‘d4p_st_tabber’, $url.’/tabber.css’);}}function d4p_st_widgets_init() {register_widget(‘d4p_sr_tabber’);}123456789101112131415161718add_action(‘init’, ‘d4p_st_init’);add_action(‘widgets_init’, ‘d4p_st_widgets_init’);function d4p_st_init() {register_sidebar(array(‘name’ => ‘Tabber Example Sidebar’, ‘description’ => ‘Add widgets to this sidebar to use it from Tabber widget.’));if (!is_admin()) {$url = plugins_url(‘d4p-smashing-tabber’);wp_enqueue_script(‘jquery’);wp_enqueue_script(‘d4p_st_tabber’, $url.‘/tabber.js’, array(‘jquery’));wp_enqueue_style(‘d4p_st_tabber’, $url.‘/tabber.css’);}}function d4p_st_widgets_init() {register_widget(‘d4p_sr_tabber’);}Здесь функция d4p_st_init запускается во время срабатывания деяния widgets init WordPress’a.

Она зарегится боковая колонку (строчка 5) и попеременно подгрузит файлы jQuery, JavaScript и CSS, использовав для этого функции wp_enqueue_script и wp_enqueue_style (строчки с 10 по 12-ю).Потом функция d4p_st_widgets_init вызывается во время деяния функции widgets_init action WordPress’a. Мы регистрируем виджет в строке 17.

Основной класс Tabber виджетаTabber – это обычный виджет и, в нашем случае, он размещен в классе d4p_sr_tabber.Опции: интерфейс плагинаУ виджета есть две установки:«sidebar» — для того, чтобы показать ID избранного сайдбара;«css» — для дополнительных классов CSS при подключении других стилей виджета Tabber.Когда вы выбираете подходящую боковую колонку, вам следует избегать выбора колонки, которая уже содержит виджет Tabber. В неприятном случае, это может привести к нескончаемой рекурсии.

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

Чтоб посодействовать вам с этим, плагин содержит эталон кода, служащий вам ассистентом в добавлении дополнительной боковой колонки.Способы form и update, которые содержатся в классе d4p_sr_tabber, употребляются для отображения интерфейса виджета в панели “Widgets” и для сохранения опций виджета, но они не так увлекательны. Но все таки очень стоит ближе разглядеть виджет исходя из убеждений программера.Основной метод отображения виджетаНиже приведен основной методpublic function widget($args, $instance) {add_filter(‘dynamic_sidebar_params’, array(&$this, ‘widget_sidebar_params’));extract($args, EXTR_SKIP);$this->id = $widget_id;echo $before_widget;if ($args[‘id’] != $instance[‘sidebar’]) {echo ‘<div id=»‘.$widget_id.'»>’;echo ‘<ul></ul>’;dynamic_sidebar($instance[«sidebar»]);echo ‘</div>’;} else {echo ‘Tabber widget is not properly configured.’;}echo $after_widget;remove_filter(‘dynamic_sidebar_params’, array(&$this, ‘widget_sidebar_params’));}12345678910111213141516171819public function widget($args, $instance) {add_filter(‘dynamic_sidebar_params’, array(&$this, ‘widget_sidebar_params’));extract($args, EXTR_SKIP);$this—>id = $widget_id;echo $before_widget;if ($args[‘id’] != $instance[‘sidebar’]) {echo ‘<div id=»‘.$widget_id.‘»>’;echo ‘<ul></ul>’;dynamic_sidebar($instance[«sidebar»]);echo ‘</div>’;} else {echo ‘Tabber widget is not properly configured.’;}echo $after_widget;remove_filter(‘dynamic_sidebar_params’, array(&$this, ‘widget_sidebar_params’));}В этом кусочке кода строчка 2 добавляет фильтр, который видоизменит характеристики рендеринга виджета, до того как они будут запущены.

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

Строчка 9 содержит проверку, о которой говорилось выше и которая служит для предотвращения рекурсии при отображении содержимого колонки, если избранная колонка совпадает с родительской.В конечном итоге, когда фильтр удален, хоть какой виджет, принадлежащей хоть какой другой боковой колонке, отображается нормально, без всяких модификаций.Модификация виджетаДля подготовки к изменениям, проделанным при помощи JavaScript, виджет tabber содержит класс d4p-tabber-widget, который вмешает пустой тегФильтр, который применяется для модификации характеристик виджета, смотрится последующим образом:public function widget_sidebar_params($params) {$params[0][‘before_widget’] = ‘<div id=»‘.$params[0][‘widget_id’].'»>’;$params[0][‘after_widget’] = ‘</div>’;$params[0][‘before_title’] = ‘<a href=»#»>’;$params[0][‘after_title’] = ‘</a>’;return $params;}1234567public function widget_sidebar_params($params) {$params[0][‘before_widget’] = ‘<div id=»‘.$params[0][‘widget_id’].‘»>’;$params[0][‘after_widget’] = ‘</div>’;$params[0][‘before_title’] = ‘<a href=»#»>’;$params[0][‘after_title’] = ‘</a>’;return $params;}В зависимости от того, как регится боковая колонка, этот код изменяет характеристики рендеринга, таким макаром, чтобы он был очень приближен к формату, подходящему для табов. Но JavaScript как и раньше нужен для того, чтобы поместить заголовок виджета вовнутрь тега для контроля табов.После внедрения этого фильтра, создание виджета смотрится вот так:<div id=»widget-1?><a href=»#»>Widget one</a>Widget one’s content</div>1234<div id=«widget-1»><a href=«#»>Widget one</a>Widget one‘s content</div>JavaScript для трансформации виджетаТеперь, когда презентация виджета изменена, осталось доделать совершенно малость: окончить трансформацию, извлечь заглавия виджетов и перевоплотить их в табы:jQuery(document).ready(function(){jQuery(«.d4p-tabber-widget»).each(function(){var ul = jQuery(this).find(«ul.d4p-tabber-header»);jQuery(this).children(«div.d4p-st-tab»).each(function() {var widget = jQuery(this).attr(«id»);jQuery(this).find(‘a.d4p-st-title’).attr(«href», «#» + widget).wrap(‘<li></li>’).parent().detach().appendTo(ul);});jQuery(this).idTabs();});});123456789101112jQuery(document).ready(function(){jQuery(«.d4p-tabber-widget»).each(function(){var ul = jQuery(this).find(«ul.d4p-tabber-header»);jQuery(this).children(«div.d4p-st-tab»).each(function() {var widget = jQuery(this).attr(«id»);jQuery(this).find(‘a.d4p-st-title’).attr(«href», «#» + widget).wrap(‘<li></li>’).parent().detach().appendTo(ul);});jQuery(this).idTabs();});});Этот код употребляет jQuery, чтоб получить все Tabber-виджеты, основанные на the .d4p-tabber-widget CSS-классе, и любой из их получает элемент (где будут табы):При помощи строчки 5 мы находим все отдельные виджеты, принадлежащие Tabber виджету.В строке 5 мы получаем ID виджета, подходящий для связи определенного таба с содержимым соответственного виджета.В строке 7 мы находим элемент заголовка , устанавливаем его атрибут href на подходящий ID виджета, сворачиваем все это в элемент, удаляем из текущего месторасположения и переносим в элемент таба .После чего тегбудет вмешать только этот контент.

Как сделать виджет с табами для WordPress?

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

Не смущяйтесь экспериментировать с оформлением виджета и с интеграцией его в вашу темуУстановка плагина TabberСкачайте версию плагина Tabber1.0.0[wpfilebase tag=file id=81 tpl=download-button /]Распакуйте его, как и хоть какой другой плагин, загрузите директорию «Плагины» и активируйте его в панели «Плагины». Когда вы перейдете в панель «Виджеты», вы увидите дополнительную боковую панель под заглавием «Tabber Example Sidebar» в самом низу, справа.

И в “Доступных виджетах” вы увидите очередной виджет — «D4P Smashing Tabber».Добавьте новый виджет в «Main Sidebar». В выпадающем меню изберите “Tabber Example Sidebar,” и сохраните виджет.

Сейчас откройте «Tabber Example Sidebar», и добавьте те виджеты, которые желаете показать в виде табов. Вы сможете добавить столько виджетов, сколько желаете, но направьте внимание на то, что не стоит добавлять очень много виджетов.

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

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

Таким макаром, вы всегда сможете поэкспериментировать со методами переустройства частей виджета.В данной аннотации мы использовали idTabs, но существует огромное количество других методов показать табы, и не все из их требуют использования JavaScript:idTabsEasyTabsjQueryUI TabsTabifyЯ предпочитаю использовать решение на базе jQuery. А idTabs прост в использовании, ему просто назначать стили, и он корректно работает во всех браузерах. Попытайтесь другие решения и поглядите, какие новые характеристики они предлагают для улучшения ваших собственных виджетов с табами.Вобщем, если у вас таки нет никакого желания заниматься своими руками созданием такового виджета, вы всегда сможете испытать уже готовое решение.Источникtegs:Плагины,Советы

источник: {https://artstroy.net/kak-sozdat-vidzhet-s-tabami-dlya-wordpress/|Как создать виджет с табами для WordPress?|ArtStroy.net}