Во многих популярных темах для WordPress виджеты в сайдбаре оформлены во вкладках: это удобно, красиво, функционально, и, к тому же, позволяет экономить место и размещать большое количество информации одновременно. Поэтому не удивительно, что создано большое количество плагинов, позволяющих выводить виджеты во вкладках . Однако у большинства плагинов есть существенный недостаток. Они не позволяют создать два и более блоков с вкладками. Поэтому в сегодняшнем посте я расскажу, как сделать вкладки в сайдбаре без плагина.
Демо
Шаг 1. Подготовка. Вывод php в сайдбаре
Выводить вкладки мы будем при помощи обычных текстовых виджетов, в которых поместим PHP-код. Так что на первом этапе нам необходимо разрешить вывод php в сайдбаре, если вы не сделали это раньше. Добавляем в файл функций темы такой код:
|
1
2
3
4
5
6
7
8
9
10
11
|
/* Разрешаем PHP в виджетах */
add_filter(‘widget_text’,‘sp_widget_execute_php’,100);
function sp_widget_execute_php($text) {
if(strpos($text,‘<?‘) !== false) {
ob_start();
eval(‘?>‘.$text);
$text = ob_get_contents();
ob_end_clean();
}
return $text;
}
|
Добавить его можно в самом низу файла functions.php, либо там, где вам удобнее.
Шаг 2. Подключение скрипта
Теперь необходимо подключить к вашему сайту jQuery, если вы это еще не сделали. Добавляем в между тегами head строку:
|
1
|
<script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js?ver=1.9.0”></script>
|
После этого, надо создать сам скрипт переключения вкладок. Создаем пустой файл с любым названием и расширением .js следующего содержания:
|
1
2
3
4
5
6
7
8
9
10
|
(function($) {
$(function() {
$(‘ul.tabs’).delegate(‘li:not(.current)’, ‘click’, function() {
$(this).addClass(‘current’).siblings().removeClass(‘current’)
.parents(‘div.section’).find(‘div.box’).eq($(this).index()).fadeIn(150).siblings(‘div.box’).hide();
})
})
})(jQuery)
|
И закачиваем файл по FTP на свой сайт. После этого подключаем скрипт к сайту:
|
1
|
<script type=“text/javascript” src=“http://ваш-сайт.ру/путь-к-скрипту/ваш-скрипт.js”></script>
|
Шаг 3. Вывод вкладок
Ну, а теперь можно перейти к самому интересному, то есть непосредственно выводу вкладок с виджетами и их стилизацией через CSS! Зайдите в настройки виджетов в админке вордпресса, и разместите виджет “Текст” в сайдбаре там, где вы хотите вывести вкладки. В виджете необходимо разместить код:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<div class=“section”>
<ul class=“tabs”>
<li class=“current”>1–я вкладка</li>
<li>2–я вкладка</li>
</ul>
<div class=“box visible”>
Содержимое первого блока
</div>
<div class=“box”>
Содержимое второго блока
</div>
</div><!— .section —>
|
Также необходимо дополнить файл стилей:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
/* Вкладки в сайдбаре */
.box {
display: none; /* по умолчанию прячем все блоки */
border: 1px solid #777;
padding: 10px;
}
.box.visible {
display: block; /* по умолчанию показываем нужный блок */
border: 1px solid #777;
padding: 10px;
}
ul.tabs {
height: 27px;
background: #FFF;
border: none;
margin: -4px -4px 0 !important;
padding: 0 4px;
overflow: hidden;
list-style: none;
}
.tabs li.current {
background: #777;
}
.tabs li {
float: left;
line-height: 27px;
margin: 0 1px 0 0;
padding: 0 0 0 11px;
font-weight: bold;
cursor: pointer;
border: none;
}
.tabs li.current span {
color: #FFF;
}
.tabs li span {
float: left;
padding: 0 11px 0 0;
height: 27px;
color: #777;
}
|
Шаг 4. Добавление виджетов во вкладки
Сейчас давайте определим, какие вкладки мы будем выводить. В соответствии с этим, может понадобится внести дополнительные изменения в файл функций. Чтобы не повторяться, приведу ссылки на несколько руководств:
- Вывод последних постов
- Вывод популярных постов
- Вывод последних комментариев
- Вывод списка активных комментаторов
Теперь, если, например, нужно создать виджет, который будет называться “Посты” и иметь две вкладки, “Последние” и “Популярные”, нужно дописать в текстовом виджете:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<div class=“section”>
<ul class=“tabs”>
<li class=“current”>Последние</li>
<li>Популярные</li>
</ul>
<div class=“box visible”>
<ul>
<?php kama_recent_posts (10); ?>
</ul>
</div>
<div class=“box”>
<ul>
<?php kama_get_most_viewed(“num=10”); ?>
</ul>
</div>
</div><!— .section —>
|
А чтобы вывести список рубрик, никаких изменений делать не надо, достаточно между <div class=”box”></div> вставить такой код:
|
1
|
<?php wp_list_categories(‘orderby=name&show_count=1&title_li=0’); ?>
|
Кстати, перед добавлением, не забудьте провести оптимизацию заголовков виджетов!
Следует добавить, что описанным способом можно создать какое угодно количество виджетов – надо просто создать новый текстовый виджет и скопировать в него код. Как видите, в том, чтобы создать виджеты с вкладками, нет ничего сложного 😉
(Пока оценок нет)
Загрузка...