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

Продолжение статьи Как добавить виджет с табами на jQuery в WordPress. Часть 1
Теперь, когда мы создали виджет с необходимым кодов PHP и HTML для наших табов, следующим шагом будет добавление jQuery для вывода их в конетейнер для табов. Для этого необходимо скопировать и вставить этот код в файл wp-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);

Теперь наш виджет «оснащен» jQuery, и последним шагом будет добавление стилей табам. Мы создали простую таблицу стилей, которую вы можете скопировать и вставить в файл devise-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;
}

Вот и все. Теперь нужно загрузить папку devise-tabber-widget в директорию /wp-content/plugins/ вашего сайта на WordPress через FTP. Или же, вы можете просто создать zip архив из этой папки и перейти в Плагины » Добавить новый в административной панели WordPress. Кликните на вкладку Загрузить для установки плагина. После активации плагина перейдите в раздел Внешний вид » Виджеты и перетяните виджет Devise Tabber Widget в ваш сайдбар. Всё!

Надеемся, что эта статья помогал вам создать виджет с табами на jQuery в WordPress. По вопросам и предложениям пишите в комментарии.