Во многих популярных темах для 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'); ?> |
Кстати, перед добавлением, не забудьте провести оптимизацию заголовков виджетов!
Следует добавить, что описанным способом можно создать какое угодно количество виджетов – надо просто создать новый текстовый виджет и скопировать в него код. Как видите, в том, чтобы создать виджеты с вкладками, нет ничего сложного 
Да это отличный способ сделать, отличный код. Тем более что можно добавить стили и получить очень красивые вкладки, например, как в шаблоне мистик
Да, тут можно по-разному поиграть стилями, я указывала самый простой вариант.
Надо попробовать. Хотел давно уже себе такой виджет для экономии места в сайдбаре.
привет,у меня вот такой вопрос,в ворде добавляю виджет рубрики и хочу дать ему уже другой название и вывести отельно от первого виджета “рубрик” где уже заполнено рубриками,но как бы хочу разбить на два отдельных блока,но когда я добавляю второй виджет рубрики все рубрики находящиеся в первом виджете автоматом копируются туда и мне их никак не убрать я а я хочу уже добавить новые,подскажите как там исправить можно?
Артем, попробуйте сделать следующим образом. Сначала в файле functions разрешите использование php в текстовом виджете (см. код в этом посте).
Затем создаете два текстовых виджета. В первый вставляете:
Вместо 1,2,3 – пишете через запятую ID рубрик, которые не должны выводиться в первом виджете.
Во второй вставляете:
Вместо 1,2,3 – пишете через запятую ID рубрик, которые должны выводиться во втором виджете.
создать два текстовых виджета? эо вот эти два текста в файле functions.php?и где можно id рубрик увидеть?
ID рубрик – при редактировании рубрики выводится в адресной строке браузера.
ну и вот допусти м я все сделаю как вы написали,а где мне название для тех новых рубрик вот написать будет можно и где эти рубрики выводиться будут? вот в первом списке там написано у меня “ЖАНР:” а вот во второй где мне надо будеть название прописать добавить новый виджет после этого кода прописанного?
Ничего не поняла
Названия виджетов Вы имеете в виду?
ничего не получилось,сплошные ошибки выдает,даже при разрешении пхп в виджетах ошибку выдал
Артем, сейчас зашла на Ваш сайт, вроде бы все нормально. Разобрались?
с id разобрался,а рубрики сделал с помощью виджета “собственное меню” все было так просто а я целый день возился
спасибо большое за помощь если будут вопросы,а они наверное будут:) то я обязательно посещу ваш блог,спасибо!
Много заморочек с кодом, не проще написать виджет с возможностью выбирать что отображать во вкладках?
Преимущество моего решения – в полной настраиваемости вкладок через CSS, и в возможности вывести столько виджетов с вкладками, сколько вы захотите, в любом порядке.
Есть много плагинов, которые позволяют выбирать, что показывать во вкладках. Напрмер:
1 – http://wordpress.org/extend/plugins/fun-with-sidebar-tabs/
2 – http://wordpress.org/extend/plugins/tabber-tabs-widget/
3 – http://wordpress.org/extend/plugins/sidebartabs/
Я пробовала все эти плагины. Их основной недостаток – то, что они не позволяют настроить как мне надо то содержимое, которое будет выводиться во вкладках.
Также, ни один из них не позволяет создать то количество виджетов с вкладками, которое вам захочется – всегда будут ограничения.
Один из этих плагинов (не помню, который) создают дополнительный скрытый сайдбар, и в него надо размещать виджеты, которые должны выводиться во вкладках. При этом даже если там будет 10 виджетов, они все будут в одном блоке вкладок.
Может, существует какой-то другой плагин, который бы позволил:
1 – вывести любое количество виджетов с вкладками,
2 – настроить CSS вкладок так, как я хочу,
3 – управлять тем, что должно выводиться во вкладках (количество выводимых рубрик, постов, комментариев, авторов, выводить или нет количество постов в рубрике и т.д.)
…но я его не нашла.
Если Вы можете написать подобный плагин – я буду рада сделать обзор
Плагины не мой метод, щас выдрал виджет из одной темы, тестю пока на локалке,(накидать их в сайдбар можно хоть сто штук
).Стандартные задачи которые возлагают на табы в принципе он решает на 100%
А из какой темы, если не секрет?
Theme Name: Central
Theme URI: http://newwpthemes.com/central-free-wordpress-theme/
Спасибо, посмотрю.
Отличная статья!
Ирина, у меня в шаблоне уже есть виджет с вкладками, могу я просто отредактировать его и просто заменить содержимое одной вкладки на Рубрики? Если да, то как организовать Рубрики в 2 колонки и вывод количества постов в каждой??
Игорь, о том, как сделать рубрики в две колонки, читайте здесь: http://truemisha.ru/blog/wordpress/two-column-categories-list.html
Сколько будет стоить готовый виджет? У самого не получается…
Игорь, ответила Вам на почту.
привет подскажите а как сделать несколько вкладок – 4,5 в виджете чтобы вставить туда коды групп от соц сетей ??