Вкладки jQuery в сайдбаре WordPress

Снимаю перед вами шляпу, дорогие мои читатели!!! Если Вы здесь первый раз, подпишитесь на мою ленту новостей, и Вы будете получать мои новые очень интересные статьи на свой RSS ридер.

Так получилось, что я задался идеей сделать вкладки в сайдбаре своего блога уже приличное время назад. Но тогда что-то не дало мне реализовать эту идею, скорее всего, это была нехватка времени. Сегодня же я довел это дело до конца и получилось, вроде, совсем неплохо. По крайней мере, мне нравится. Аккурат, то, что я хотел.

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

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

Как установить вкладки на сайдбар блога на WordPress.

(Листинги всех файлов я беру со своего блога, вам останется по аналогии переделать их под свои нужды, это, я уверен, трудностей у вас не вызовет. Данный пример расчитан на четыре вкладки.)

1. [download id="48"]

2. Разархивируйте полученный архив и загрузите файл jquery-1.2.3.pack.js в корень папки вашей темы.

3. Создайте файл tabs.js с помощью блокнота и внесите в него следующее содержание:

var $j = jQuery.noConflict ();

$j (document).ready (function () {

$j ('ul.tabees li').css ('cursor', 'pointer');

$j ('ul.tabees.tabees1 li').click (function (){
var thisClass = this.className.slice (0,2);
$j ('div.t1').hide ();
$j ('div.t2').hide ();
$j ('div.t3').hide ();
$j ('div.t4').hide ();
$j ('div.' + thisClass).show ();
$j ('ul.tabees.tabees1 li').removeClass ('tab-current');
$j (this).addClass ('tab-current');
});

});

4. Загрузите файл tabs.js  в корень папки с вашей темой.

5. Допишите в файл header.php (шапка) вашей темы  перед тегом </head> следующие строки:

<script type="text/javascript" src="http://ваш путь/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="http://ваш путь/tabs.js"></script>

6. Допишите в конец файла style.css вашей темы следующее содержимое, предварительно подправив его под дизайн своего блога:

[sourcecode language='css']ul.tabees {
height: 25px;
line-height: 25px;
margin: 0 0 3px;
list-style: none;
font: 10pt;
}
* html ul.tabees {margin-bottom: 0;}
ul.tabees li {
float: left;
margin-right: 1px;
font: 10px;
}
ul.tabees li a {
display: block;
padding: 0 5px 1px;
margin-bottom: -1px;
color: #ffffff;
text-decoration: none;
cursor: pointer;
background: #800000;
border: 1px solid #800000;
border-bottom: 1px solid #800000;
position: relative;
font: 10px;
}
* html ul.tabees li a {float: left}
*+html ul.tabees li a {float: left}
ul.tabees li a:hover {
color: silver;
padding: 0 5px;
background: #8b0000;
border: 1px solid #8b0000;
font: 10px;
}
ul.tabees li.tab-current a {
color: #fffff;
background: #800000;
padding: 0px 5px 2px;
border: 1px solid #800000;
border-bottom: 1px solid #EFEFEF;
font: 10px;
}
div.t2,
div.t3,
div.t4 {
display: none;
font: 10pt;
}
div.t1,
div.t2,
div.t3,
div.t4 {
background: #ffffff;
padding: 0 12px;
font: 9pt Arial, Helvetica, sans-serif;
line-height: 20px;
}[/sourcecode]

7. Скачайте плагин Daiko’s Text Widget, установите  и активируйте его.[download id="42"]

8. С помощью виджета Daiko’s Text Widget установите в любое место вашего тулбара следующий текст:

[sourcecode language='html']

< ?php wp_get_archives('type=postbypost&amp;limit=10'); ?>
< ?php akpc_most_popular($limit = 10); ?>
< ?php get_calendar(); ?>
< ?php wp_get_archives(); ?>


< ?php wp_list_categories('sort_column=name'); ?>

[/sourcecode]

9. Перейдите на ваш блог и посмотрите на то, что получилось, отредактируйте все по вашему вкусу и в соответствие с дизайном вашего блога.

Должно все хорошо работать, если, конечно, вы все правильно сделали.

После того, как я закончил работу над вкладками, задался вопросом, а почему нет плагина для WordPress с помощью которого можно легко реализовать вкладки на своем блоге. Поискав в Яндексе, ничего не нашел, кроме совета на каком-то форуме, сделать аналогичный запрос по-английски в Google. В поисковой выдаче оказалось два хороших плагина, которые легко устанавливают вкладки в сайдбар WordPress. Первый, “Wordpress Tabs And Slides”, вставляет блок со вкладками прямо в пост, кроме того он поддерживает слайдер в этом блоке. Посмотреть описание по-английски и скачать плагин можно на его домашней странице.

Второй плагин “Tabbed Widgets” решает непосредственно ту задачу, которую мы сделали за 9 шагов, описанных в этой записи, то есть вставляет вкладки в вашу боковую панель без каких бы то ни было лишних манипуляций. Скачать плагин “Tabbed Widgets” для вставки вкладок (табов) в сайдбар вашего блога на WordPress можно на официальном сайте WordPress, там тоже все по-английски, но красную кнопку Download, вы найдете и не зная иностранных языков.

  1. Анна

    Нипалучилось...

    все сделала как написано. может пути неправильно прописала или еще чего?

    Результат: выводится в сайдбаре код

    [sourcecode language='html']

    * Последнее

    * Читаемое

    * История

    * Рубрики

    [/sourcecode]

    не понимаю что не так...какой еще код нужно вводить в сам виджет?

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

Ваш e-mail не будет опубликован.