Від автора: у цьому уроці ви дізнаєтеся, як створити віджет у вигляді закладок, дуже корисний у випадках, коли потрібно вмістити безліч віджетів в бічну колонку. Він економить простір і раціоналізує зовнішній вигляд і функціональність веб-сайту, керованого 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,необхідна для створення закладок:
- Один віджет
До нещастя, таку структуру можна отримати навпростець при використанні бічної колонки wordpress’а і рендеринга віджета. Зазвичай структура віджета wordpress’а виглядає так:
Один віджет
Вміст віджета один
Віджет два
Вміст віджета два
Отже, основна мета Tabber’а складається в перетворенні виробництва будь-якого елемента в розмітку, яку можна використовувати для відображення закладок. Для ускладнення справи різні теми могли зареєструвати бічні колонки, в яких не застосовується div для зберігання віджета або h2 для показу його назви. Наприклад, нова тема wordpress’а за замовчуванням, Twenty Twelve, використовує для цього теги aside і h3. Інші теми можуть використовувати складну розмітку, яку неможливо передбачити чи успішно трансформувати в потрібну для закладок структуру.
Рішення цієї проблеми полягає в перехопленні параметрів віджета до візуалізації, а потім їх реструктуризації корисні конструкції з допомогою JavaScript’а чи jQuery для випуску у вигляді закладок. Пізніше ви дізнаєтесь про це більше.
Завантаження Tabber Widget
Тепер, коли ми чітко бачимо свою мету, давайте розглянемо демоверсію. Наш плагін містить основний файл 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 запускається під час дії 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” та збереження його налаштувань, і вони не настільки цікаві. Але ближче розглянути відображення віджета в інтерфейсі досить стоїть.
ОСНОВНИЙ СПОСІБ ВІДОБРАЖЕННЯ
Ось основний метод віджета:
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 ‘
echo ‘
‘;
dynamic_sidebar($instance[“sidebar”]);
echo ‘
‘;
} 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’] = ‘
$params[0][‘after_widget’] = ‘
‘;
$params[0][‘before_title’] = “;
$params[0][‘after_title’] = “;
return $params;}
В залежності від того, як реєструється бічна колонка, цей код буде змінювати параметри візуалізації на формат, близький до потрібного для закладок. Але JavaScript все ще потрібен для переміщення заголовка віджета в тег ul для керуючих закладок. Після цього фільтра виробництво віджета буде виглядати так:
Вміст віджета один
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(‘
‘).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’а:
idTabs
EasyTabs
jQueryUI Tabs
Tabify
Я волію користуватися рішенням на основі jQuery, а idTabs дуже легко застосовувати, йому легко призначати стилі, і він працює у всіх браузерах. Розгляньте інші рішення, і побачите, які додаткові властивості вони пропонують для поліпшення власних віджетів-закладок.
