Как добавить виджет с табами на jQuery в WordPress. Часть 1

Наверняка вы видели виджеты в табах на популярных сайтах, отображающих популярные, недавние и отмеченные записи по одному клику? Это называется виджет с табами на jQuery, и он позволяет вам сохранить место на экране пользователя, комбинируя различные виджеты в один. В этой статье мы покажем вам как добавить виджет с табами на jQuery в WordPress.

Зачем нужен виджет с табами на jQuery?

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

Примечание: эта статья рассчитана на средний уровень знаний HTML и CSS.

Создам виджет с табами на jQuery в WordPress

Итак, начнем. Прежде всего вам нужно создать папку на вашем компьютере и назвать ее devise-tabber-widget. После этого, необходимо создать три файла внутри этой папки, используя текстовый редактор типа Блокнот.

Первым файлом будет devise-tabber-widget.php. Он будет содержать HTML и PHP код для создания табов и собственного виджета WordPress. Второй файл, который мы создадим, это devise-tabber-style.css и он будет содержать в себе стили CSS для контейнера табов. Третьим и последним файлом, что мы создадим, будет devise-tabber.js, который будет содержать jQuery скрипт для переключения вкладок и добавления анимации.

Давайте начнем с файла devise-tabber-widget.php. Целью этого файла является создание плагина, который регистрирует виджет. Если вы впервые создаете виджет WordPress, то мы рекомендуем вам ознакомиться со статьей Создаем собственный виджет в WordPress или же просто скопировать нижеследующий код в файл devise-tabber-widget.php:

<?php
/* Plugin Name: Devise jQuery Tabber Widget
Plugin URI: http://web-devise.com
Description: A simple jquery tabber widget.
Version: 1.0
Author: Devise
Author URI: http://web-devise.com
License: GPL2
*/

// создаем виджет
class DeviseTabberWidget extends WP_Widget {

function DeviseTabberWidget() {
		$widget_ops = array(
		'classname' => 'DeviseTabberWidget',
		'description' => 'Simple jQuery Tabber Widget'
);
$this->WP_Widget(
		'DeviseTabberWidget',
		'Deviseeginner Tabber Widget',
		$widget_ops
);
}
function widget($args, $instance) { // вывод виджета сайдбара

function devise_tabber() { 

// Теперь мы подгружаем нашу таблицу стилей и скрипт jQuery

wp_register_style('devise-tabber-style', plugins_url('devise-tabber-style.css', __FILE__));
wp_register_script('devise-tabber-widget-js', plugins_url('devise-tabber.js', __FILE__), array('jquery'));
wp_enqueue_style('devise-tabber-style');
wp_enqueue_script('devise-tabber-widget-js');

// Создавая табы, вы будете добавлять ваш собственный код в каждую вкладку
?>

<ul class="tabs">
<li class="active"><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>

<div class="tab_container">

<div id="tab1" class="tab_content">
<?php 
// Введите код для Вкладки №1
?>
</div>

<div id="tab2" class="tab_content" style="display:none;">
<?php 
// Введите код для Вкладки №2
?>
</div>

<div id="tab3" class="tab_content" style="display:none;">
<?php 
// Введите код для Вкладки №3
?>
</div>

</div>

<div class="tab-clear"></div>

<?php

}

extract($args, EXTR_SKIP);
// код перед виджетом из темы
echo $before_widget; 
$tabs = devise_tabber(); 
// выводим HTML-код табов
echo $tabs; 
// код после виджета из темы
echo $after_widget; 
}
}

// регистрируем и загружаем виджет
add_action(
'widgets_init',
create_function('','return register_widget("DeviseTabberWidget");')
);
?>

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

Продолжение статьи смотрите по ссылке Как добавить виджет с табами на jQuery в WordPress. Часть 2