От автора: в этом учебнике вы узнаете, как создать виджет в виде закладок, очень полезный в случаях, когда требуется вместить множество виджетов в боковую колонку. Он экономит пространство и рационализирует внешний вид и функциональность вебсайта, управляемого WordPress.
В прошлом существовало множество различных методов сделать его, большая часть из них была обусловлена темами. Как станет ясно из этого учебники, создание виджета-закладки, работающего самостоятельно и с любой темой – легкодостижимая задача. Так что давайте займемся ею и узнаем, как создать собственный переключаемый виджет, который можно скачать в конце этой статьи.
Экономия пространства боковой колонки
Главное преимущество закладок в том, что в боковую колонку можно вместить больше виджетов. И закладки отлично смотрятся. На изображении внизу видно, сколько вертикального пространства занимают три стандартных виджета (применяем тему по умолчанию Twenty Ten). Разметка по умолчанию находится слева, а наш виджет – справа:
Прежде чем начать
Вам полезно узнать кое-что. Так как в этой статье мы строим виджет, вы, может быть, захотите узнать о виджетах API WordPress’а и о том, как создать обычный виджет:
“Виджеты API,” WordPress Codex
“Создание виджетов для WordPress 2.8,” Тима Тротта (Tim Trott), Azulia Designs
“Продвинутые виджеты WordPress,” WP Roots
По мере надобности используйте эти ресурсы во время работы с этим учебником.
Основная мысль
Идея проста: выберите боковую колонку, а Tabber возьмет все ее виджеты и отобразит их в виде закладок. В интерфейсе виджета можно выбрать боковую колонку, определить дополнительный класс CSS и опционально применить свои собственные стили. Будучи включенным, плагин зарегистрирует дополнительную колонку (это можно пропустить, если у вас имеются другие способы добавить боковую колонку). Затем с помощью того же кода добавить еще колонки, и каждая из них может содержать экземпляры виджета Tabber.
Для управления своими виджетами Tabber применяет idTabs для jQuery, созданный Шоном Кэчпоулом (Sean Catchpole), но всегда можно использовать другое решение. Обратите внимание, что дополнительный CSS загружается для назначения стилей окончательного виджета.
Вот основная структура HTML,требуемая для создания закладок:
|
1 2 3 4 5 6 7 8 9 10 |
<ul> <li><a href="#widget-1">Виджет один</a></li> <li><a href="#widget-2">Виджет два</a></li> <ul> <div id="widget-1"> Контент виджета один </div> <div id="widget-2"> Контент виджета два </div> |
К несчастью, такую структуру нельзя получить напрямик при использовании боковой колонки WordPress’а и рендеринга виджета. Обычно структура виджета WordPress’а выглядит так:
|
1 2 3 4 5 6 7 8 |
<div id="widget-1"> <h2> Виджет один </h2> Контент виджета один </div> <div id="widget-2"> <h2> Виджет два </h2> Контент виджета два </div> |
Итак, основная цель Tabber’а состоит в превращении производства любого виджета в разметку, которую можно использовать для отображения закладок. Для осложнения дела различные темы могли зарегистрировать боковые колонки, в которых не применяется div для хранения виджета или h2 для показа его названия. Например, новая тема WordPress’а по умолчанию, Twenty Twelve, использует для этого тэги aside и h3. Остальные темы могут использовать сложную разметку, которую невозможно предсказать или успешно трансформировать в нужную для закладок структуру.
Решение этой проблемы заключается в перехвате параметров виджета до рендеринга, а затем их реструктуризации в полезные конструкции с помощью JavaScript’а или jQuery для выпуска в виде закладок. Позже вы узнаете об этом больше.
Загрузка Tabber Widget
Теперь, когда мы четко видим свою цель, давайте рассмотрим демоверсию. Наш плагин содержит основной файл PHP, один файл JavaScript и один файл CSS. Файл PHP содержит виджет и загружает CSS и JavaScript, как тут:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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'); } |
Здесь функция d4p_st_init запускается во время действия init WordPress’а. Она зарегистрирует одну боковую колонку (строка 5) и поставит файлы jQuery, JavaScript и CSS в очередь с помощью функций wp_enqueue_script и wp_enqueue_style (строки 10-12).
Затем вызывается функция d4p_st_widgets_init во время действия widgets_init WordPress’а. Мы регистрируем виджет в строке 17.
Основной класс виджета Tabber
Tabber – обычный виджет, и в данном случае располагается в классе d4p_sr_tabber.
УСТАНОВКИ: ИНТЕРФЕЙС ПЛАГИНА
У виджета есть две установки:
“sidebar” — для содержания ID выбранной боковой колонки
“css” — для дополнительных классов CSS при назначении стилей виджета Tabber
При выборе нужной боковой колонки вам нужно избегать применения той колонки, которая содержит виджет Tabber. Иначе она закрутится в бесконечной рекурсии. Чтобы избежать этого, перед рендерингом содержимого виджета проверьте, является ли выбранная боковая колонка тем же, что родительская колонка. Этого нельзя предотвратить, пока виджет устанавливается, так как его панель предоставляет за этим очень слабый контроль.
Кроме того, применение тех колонок, которые обычно не используются – это хорошая мысль. Чтобы помочь вам с этим, плагин включает в себя образец кода добавления дополнительной боковой колонки.
Методы form и update, содержащиеся в классе d4p_sr_tabber, применяются для отображения интерфейса виджета в панели “Widgets” и сохранения его настроек, и они не настолько интересны. Но поближе рассмотреть отображение виджета в интерфейсе весьма стоит.
ОСНОВНОЙ СПОСОБ ОТОБРАЖЕНИЯ
Вот основной метод виджета:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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')); } |
В этом коде строка 2 добавляет фильтр, модифицирующий параметры рендеринга виджета до их исполнения. С его помощью у всех исполняемых после этой точки виджетов параметры будут модифицированы так, как то требуется для удачной трансформации в форму закладки. И это будет сделано с виджетами выбранной колонки в строке 11 с помощью функции dynamic_sidebar.
Этой функции требуется имя боковой колонки, и она отобразит в ней все виджеты. В строке 9 содержится уже упомянутая проверка для предотвращения рекурсии при отображении содержимого колонки, если выбранная колонка – та же, что родительская.
Наконец удаляется фильтр и любые принадлежащие прочим колонкам виджеты отображаются как обычно, без модификации.
МОДИФИКАЦИЯ ВИДЖЕТА
Для подготовки к трансформации, происходящей с помощью JavaScript, виджет tabber включает класс d4p-tabber-widget, содержащий пустой тэг ul.
Фильтр для модифицирования параметров виджета выглядит следующим образом:
|
1 2 3 4 5 6 7 |
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;} |
В зависимости от того, как регистрируется боковая колонка, этот код будет менять параметры рендеринга на формат, близкий к нужному для закладок. Но JavaScript все еще нужен для перемещения заголовка виджета в тэг ul для управляющих закладок. После этого фильтра производство виджета будет выглядеть так:
|
1 2 3 4 |
<div id="widget-1"> <a href="#">Виждет один</a> Контент виджета один </div> |
JavaScript для трансформации виджета
Когда представление виджета модифицировано, остается сделать одно: закончить трансформацию, получить из виджетов названия и превратить их в закладки:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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(); }); }); |
Этот код применяет jQuery для получения всех виджетов Tabber на основе класса CSS .d4p-tabber-widget, и каждый из них получает элемент (где будут закладки):
С помощью строки 5 находим все отдельные виджеты, принадлежащие к Tabber.
В строке 6 получаем нужный для закладки ID виджета, чтобы соединить его с содержимым.
В строке 7 м находим элемент заголовка a, устанавливаем его атрибут href на ID виджета, оборачиваем в элемент li, удаляем из текущего места и перемещаем в элемент закладки ul.
После того div будет содержать только собственный контент.
Наконец, когда все это сделано, мы включаем idTabs для активации управления закладками. А с помощью стилей по умолчанию, загруженных из файла tabber.css, можно видеть, как смотрится Tabber из трех виджетов (смотрите скриншот выше). Не бойтесь поэкспериментировать и приспособить стили к своей теме.
Как установить плагин Tabber
Скачайте версию 1.0.0 плагин Tabber.
Как в случае с любым другим плагином, распакуйте его, выгрузите в папку плагинов WordPress’а и активируйте из панели плагинов. Перейдя к панели виджетов “Widgets”, в конце справа вы увидите дополнительную боковую колонку “Tabber Example Sidebar”. А “Available Widgets” покажет еще один виджет, “D4P Smashing Tabber.”
Добавьте этот новый виджет в “Main Sidebar”. Выберите в выпадающем меню виджета “Sidebar” пункт “Tabber Example Sidebar” и сохраните виджет. Теперь откройте “Tabber Example Sidebar” и добавьте те виджеты, которые нужно отобразить как закладки. Можно добавлять столько виджетов, сколько нужно, но обратите внимание, что если добавите слишком много, управление закладкой разобьется на две или более строки и будет смотреться некрасиво. Лучше всего начинать с двух-трех виджетов.
Заключение
Создание одного виджета для отображения нескольких других в виде закладок не очень трудно, сами видите. Фокус состоит в том, чтобы подогнать производство виджетов к формату, который можно трансформировать в закладки, а затем отобразить их с помощью JavaScript’а. Мы исследовали всего один из возможных методов трансформации; вы всегда можете поэкспериментировать с переделкой элементов виджета.
Здесь мы применяли idTabs, но имеется множество методов отображения закладок, и не все из них требуют JavaScript’а:
Я предпочитаю пользоваться решением на основе jQuery, а idTabs очень легко применять, ему легко назначать стили, и он работает во всех браузерах. Рассмотрите другие решения, и увидите, какие дополнительные свойства они предлагают для улучшения собственных виджетов-закладок.
Автор: Milan Petrovic
Источник: //wp.smashingmagazine.com/
Редакция: Команда webformyself.
Комментарии (1)