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

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

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

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

Экономия пространства сайдбара

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

Прежде чем, начать работу над виджетом

Просто немного полезной информации. Так как мы собираемся заняться строительством виджета, возможно вы захотите узнать о том, что такое виджеты 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>

К сожалению, вы не сможете получить подобную структуру, просто напрямую совместив боковую колонку 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>

Итак, основная цель виджета Tabber – трансформировать любой виджет таким образом, чтоб он использовал разметку, пригодную для отображения в виде табов. Задачу усложняет тот факт, что разные темы могут регестрировать боковые колонки, которые не используют тег <div> в качестве контейнера для виджета, или тег <h2> для отображения заголовка виджета. К примеру, новая дефолтная тема Twenty Twelve использует для этих целей теги <aside> и <h3>. Другие темы могут использовать более сложную разметку, поведение которой весьма сложно предсказать, и потому она может неудачно преобразоваться в нужную для табов структуру.

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

Подключение Tabber виджета

Теперь, когда мы понимаем цель, к которой стремимся, давайте взглянем на демо-версию плагина. Наш плагин состоит из основного PHP-файла, файла JavaScript и одного 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');
}

Здесь функция 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'));
}

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

Эта функция отвечает за введение названия боковой панели и отображает внутри нее все виджеты. Строка 9 содержит проверку, о которой говорилось выше и которая служит для предотвращения рекурсии при отображении содержимого колонки, если выбранная колонка совпадает с родительской.

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

Модификация виджета

Для подготовки к изменениям, проделанным с помощью JavaScript, виджет tabber содержит класс d4p-tabber-widget, который вмешает пустой тег <ul>

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

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> для контроля табов.

После применения этого фильтра, производство виджета выглядит вот так:

<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();
  });
});

Этот код использует jQuery, чтобы получить все Tabber-виджеты, основанные на the .d4p-tabber-widget CSS-классе, и каждый из них получает элемент (где будут табы):

• С помощью строки 5 мы находим все отдельные виджеты, принадлежащие Tabber виджету.
• В строке 5 мы получаем ID виджета, нужный для связи определенного таба с содержимым соответствующего виджета.
• В строке 7 мы находим элемент заголовка <a>, устанавливаем его атрибут href на нужный ID виджета, сворачиваем все это в элемент </li>, удаляем из текущего месторасположения и переносим в элемент таба <ul>.
• После этого тег <div> будет вмешать только этот контент.

Наконец, когда все эти операции проделаны, мы включаем 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:

• idTabs
• EasyTabs
• jQueryUI Tabs
• Tabify

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

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

Источник