Как создать виджет вкладок с поддержкой jQuery

Примечание: Этот текст может содержать некоторые партнерские ссылки, а это значит, что я зарабатываю небольшую комиссию без каких-либо дополнительных затрат с вашей стороны, если вы воспользуетесь этими ссылками. Спасибо за понимание и поддержку.

Вы наверняка не раз видели на сайтах в боковой колонке виджет с вкладками: при нажатии на заголовок вкладка меняется и открывается другая. Это называется виджет вкладок при поддержке jQuery.

Очень часто в этих вкладках находятся ссылки на популярные, рекомендуемые записи, последние комментарии, облака тегов, формы подписки и так далее.

Такие вкладки позволяют экономить место в боковой колонке. Ведь фактически на одном и том же месте расположено несколько информационных секций:

На скриншотах выше вы видите варианты таких вкладок на новостных порталах.

Чаще всего необходимость во вкладках возникает на новостных сайтах, у которых очень много разных форматов информации, и размеры страницы не справляются с таким объемом вывода необходимых блоков, так что приходится «прятать» часть секций во вкладки.

Если ваш сайт молодой и у вас много свободного места в боковой колонке, не советую ставить и использовать вкладки.

А если места мало и хочется его немного сэкономить — тогда я вам сегодня расскажу, как сделать вкладки с поддержкой jQuery без плагина WordPress.

Этот небольшой урок — только для зарегистрированных читателей. Если хотите — можете стать участником.

Почему я предлагаю поставить вкладки не с помощью стандартных плагинов?

Используя стандартные виджеты, вы с легкостью можете добавить нужные информационные секции в боковоую колонку. Если нужен виджет вкладок — можно поискать в Сети, в официальном репозитории WordPress. Наверняка, что-то найдется. Например:

http://wordpress.org/plugins/search.php?q=tabber+widget

По этому запросу в репозитории плагинов WordPress можно найти больше десятка разных вариантов виджетов вкладок. А если хочется вставить в вкладки что-то свое, особенное, не стандартное? Например, последние записи с миниатюрами, или записи с миниатюрами из определенной рубрики или другие фильтры с помощью запроса New WP_Query? Или форму подписки? Или еще что-то такое, о чем я сразу и не вспомню.

Именно для вас — этот урок.

Первое, что вам нужно сделать, это создать на рабочем столе (компьютера) папку с именем: wpbeginner-tabber-widget.

После этого вы должны создать три файла внутри этой папки. Совет: для редактирования файлов PHP лучше всего использовать специальные редакторы текста с подсветкой кода. Я, например, всегда использую программу-редактор под названием Notepad++. Русская, бесплатная, с постоянной поддержкой и обновлениями. Скачать — легко найти через поиск.

Первый файл назовем — wpb-tabber-widget.php

Он будет содержать HTML и PHP код для создания вкладок и пользовательских (ваших) виджетов.

Второй файл назовем — wpb-tabber-style.css

Он будет содержать стили CSS для контейнера вкладок.

Третий и последний файл назовем — wpb-tabber.js

Он будет содержать скрипт jQuery для переключения вкладок и добавления анимации.

Давайте начнем с wpb-tabber-widget.php

Цель этого файла — создать стандартный плагин WordPress для регистрации пользовательского виджета. Просто скопируйте и вставьте код в этот файл:

< ?php
/* Plugin Name: WPBeginner jQuery Tabber Widget
Plugin URI: http://www.wpbeginner.com
Description: A simple jquery tabber widget.
Version: 1.0
Author: WPBeginner
Author URI: http://www.wpbeginner.com
License: GPL2
*/

// creating a widget
class WPBTabberWidget extends WP_Widget {

function WPBTabberWidget() {
                $widget_ops = array(
                'classname' => 'WPBTabberWidget',
                'description' => 'Simple jQuery Tabber Widget'
);
$this->WP_Widget (
                'WPBTabberWidget',
                'WPBeginner Tabber Widget',
                $widget_ops
);
}
function widget ($args, $instance) { // widget sidebar output

function wpb_tabber () {

// Now we enqueue our stylesheet and jQuery script

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

// Creating tabs you will be adding you own code inside each tab
?>

<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
// Enter code for tab 1 here.
?>
</div>

<div id="tab2" class="tab_content" style="display:none;">
< ?php
// Enter code for tab 2 here.
?>
</div>

<div id="tab3" class="tab_content" style="display:none;">
< ?php
// Enter code for tab 3 here.
?>
</div>

</div>

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

< ?php

}

extract($args, EXTR_SKIP);
// pre-widget code from theme
echo $before_widget;
$tabs = wpb_tabber();
// output tabs HTML
echo $tabs;
// post-widget code from theme
echo $after_widget;
}
}
// registering and loading widget
add_action(
'widgets_init',
create_function('','return register_widget("WPBTabberWidget");')
);
?>

Обратите внимание на код в файле между строками 39-41. Здесь  вы видите названия вкладок: Tab 1, Tab 2 и Tab3. Вам потом в этом месте надо будет написать свой текст.

Затем обратите внимание на комментарии в строках: 49, 55 , 61. В этом месте вы будете думать, какой подключить в этом месте код и что вывести в вкладке.

Следующий файл — wpb-tabber.js — добавим скрипт для переключения вкладок и анимации:

(function ($)  {
$(«.tab_content»).hide ();
$(«ul.tabs li:first»).addClass («active»).show ();
$(«.tab_content:first»).show ();
$(«ul.tabs li»).click (function () {
$(«ul.tabs li»).removeClass («active»);
$(this).addClass («active»);
$(«.tab_content»).hide ();
var activeTab = $(this).find («a»).attr («href»);
//$(activeTab).fadeIn ();
if ($.browser.msie) {$(activeTab).show ();}
else {$(activeTab).fadeIn ();}
return false;
});
})(jQuery);

Последний шаг — добавление стилей в файл — wpb-tabber-style.css

ul.tabs {
position: relative;
z-index: 1000;
float: left;
border-left: 1px solid #C3D4EA;
}
ul.tabs li {
position: relative;
overflow: hidden;
height: 26px;
float: left;
margin: 0;
padding: 0;
line-height: 26px;
background-color: #99B2B7;
border: 1px solid #C3D4EA;
border-left: none;
}
ul.tabs li  a{
display: block;
padding: 0 10px;
outline: none;
text-decoration: none;
}
html ul.tabs li.active,
html ul.tabs li.active a:hover {
background-color: #D5DED9;
border-bottom: 1px solid #D5DED9;
}
.widget-area .widget .tabs a  {
color: #FFFFFF;
}
.tab_container {
position: relative;
top: -1px;
z-index: 999;
width: 100%;
float: left;
font-size: 11px;
background-color: #D5DED9;
border: 1px solid #C3D4EA;
}
.tab_content {
padding: 7px 11px 11px 11px;
line-height: 1.5;
}
.tab_content ul {
margin: 0;
padding: 0;
list-style: none;
}
.tab_content li {
margin: 3px 0;
 }
.tab-clear {
clear:both;
}

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

Вот и все. Теперь просто загрузите новый плагин на ваш сайт и активируйте его, затем перейдите на страницу Виджеты и добавьте виджет в ваш Сайдбар:

tabber-widget-wordpress

Напоминаю: вкладки у вас пока пустые. Что в них добавить — зависит от ваших желаний.

Я надеюсь, этот урок вам поможет создать виджет вкладок на вашем сайте. Вопросы и отзывы можете оставить ниже в комментариях. Не забывайте нажать «лайк», чтобы поделиться с вашими френдами этой публикацией.

Тем, кто не любит заниматься копи-пастом с сайтов, предлагаю скачать готовые файлы урока в формате архива.

Скачать файлы плагина

Если материал вам понравился, нажмите или расскажите о нем друзьям!

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

0 Comments

Добавить комментарий

Ваш email нигде не будет показан. Обязательные поля помечены *