Вкладки для сайта (tabs)

Вкладки для сайта (их еще называют «табы» от английского «tabs») — удобный способ логически разделить страницу для упрощения восприятия и удобства чтения статьи.
В сегодняшнем уроке мы разберем один интересный плагин, который позволит оптимизировать размещение текста на страницах сайта. Речь идет о так называемых вкладках — tabs, с помощью которых можно на одной странице разбить контент по небольшим подразделам для удобства отображения и чтения статьи на мониторе, уменьшив полосу вертикальной прокрутки. Для этого используется плагин для wordpress PostTabs.

Плагин для установки вкладок на сайте

Скачать плагин вкладок для сайта PostTabs

Похожий плагин Tabber Tabs Widget так же позволяет сделать вкладки в виджетах — его я разбирать подробно не буду, там совсем все просто.

WP UI — еще один хороший плагин для создания, управления и оформления вкладок на сайте

Вкладки tabs на сайте без плагина

Ну а для тех, кто не хочет лишний раз напрягать свой сервер запросами в БД, предлагаю руководство по самостоятельно внедрению в сайдбар вкладок на jQuery.

Способ 1 — долгий

Приступим. Прежде всего создадим файл скрипта, вставим туда нижеприведенный код и сохраним как tabs.js

$(document).ready(function(){
    // When a link is clicked
    $("a.tab").click(function () {
          // switch all tabs off
          $(".active").removeClass("active");
          // switch this tab on
          $(this).addClass("active");
          // slide all content up
          $(".content").hide();
          // slide this content up
          var content_show = $(this).attr("title");
          $("#"+content_show).show();
    });
});

Теперь подключим библиотеку jQuery и этот файл к нашему блогу, вставив такой код (делается это обычно в header.php)

< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
"></script>
<script type="text/javascript" src="http://ПУТЬ-К-ФАЙЛУ-НА-САЙТЕ/tabs.js"></script>

Следующий шаг — в файл стилей style.css добавляем оформление вкладок для сайта:

#tabbed_box_1 {
    margin: 0px auto 0px auto;
    width:300px;
}
.tabbed_box h4 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:23px;
    color:#ffffff;
    letter-spacing:-1px;
    margin-bottom:10px;
}
.tabbed_box h4 small {
    color:#e3e9ec;
    font-weight:normal;
    font-size:9px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    position:relative;
    top:-4px;
    left:6px;
    letter-spacing:0px;
}
.tabbed_area {
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
}
ul.tabs {
    margin:0px;
    padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
ul.tabs li {
    list-style:none;
    display:inline;
}
ul.tabs li a {
    background-color:#464c54;
    color:#ffebb5;
    padding:8px 14px 8px 14px;
    text-decoration:none;
    font-size:9px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    text-transform:uppercase;
    border:1px solid #464c54;
}
ul.tabs li a:hover {
    background-color:#2f343a;
    border-color:#2f343a;
}
ul.tabs li a.active {
    background-color:#ffffff;
    color:#282e32;
    border:1px solid #464c54;
    border-bottom: 1px solid #ffffff;
}
.content {
    background-color:#ffffff;
    padding:10px;
    border:1px solid #464c54;
    font-family:Arial, Helvetica, sans-serif;
}
#content_2, #content_3 { display:none; }
.content ul {
    margin:0px;
    padding:0px 20px 0px 20px;
}
.content ul li {
    list-style:none;
    border-bottom:1px solid #d6dde0;
    padding-top:15px;
    padding-bottom:15px;
    font-size:13px;
}
.content ul li:last-child {
    border-bottom:none;
}
.content ul li a {
    text-decoration:none;
    color:#3e4346;
}
.content ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
}
.content ul li a:hover {
    color:#a59c83;
}
.content ul li a:hover small {
    color:#baae8e;
}





Ну и наконец в сайдбар вставляем такой код:

<div id="tabbed_box_1" class="tabbed_box">
	<h4>Навигация сайта <small>Выберите вкладку</small></h4>
    <div class="tabbed_area">
        <ul class="tabs">
          <li><a href="#" title="content_1" class="tab active">Рубрики</a></li>
          <li><a href="#" title="content_2" class="tab">Теги</a></li>
          <li><a href="#" title="content_3" class="tab">Новости</a></li>
        </ul>        
        <div id="content_1" class="content">
		    <ul>
<?php wp_list_categories('title_li='); ?>
            </ul>
        </div>
        <div id="content_2" class="content">
		    <ul>
<?php wp_tag_cloud('smallest=8&largest=19'); ?>
            </ul>
        </div>
        <div id="content_3" class="content">
		       <ul>
<?php wp_get_archives('type=postbypost&limit=7'); ?>
              </ul>
        </div>   
    </div>
</div>

Если сделали все верно, то на выходе получится примерно так:

Способ 2 — короткий

Есть вариант покороче — его вы видите на данном блоге в правом сайдбаре. Качаем скрипт domtabs и распаковываем оттуда файлы в папку с темой оформления.
Далее открываем в редакторе header.php, добавляем код:

<script type="text/javascript" src="ПУТЬ К ПАПКЕ ТЕМЫ/domtab.js"></script>
<link rel="stylesheet" type="text/css"
href="ПУТЬ К ПАПКЕ ТЕМЫ/pbd_domtab.css" media="screen" />

Это мы добавили скрипт и файл стилей на сайт. И теперь в том месте, где надо проставить табы, например в виджете, в шаблоне или прямо на странице, вставляем строки (количество вкладок ограниченно вашей фантазией и шириной экрана):

<div class="domtab">
 <ul class="domtabs">
 <li><a href="#tab1">Заголовок раз</a></li> 
<li><a href="#tab2">Заголовок два</a></li>
  </ul>

 <div> <a name="tab1" id="tab1"></a>
<p>Текст вкладки раз</p></div> 

<div><a name="tab2" id="tab2"></a>
<p>Текст вкладки два</p></div> 
</div>

Поиграв со стилями в файле «pbd_domtab.css» может получиться весьма симпатично!

Вкладки для сайта в комментариях

Аналогично можно разбить на вкладки комментарии, например отделить встроенные от вконтактовских и фейсбуковских.
Точно так же подключаем jQuery, далее вставляем в шаблон страницы нижеследующий код. В нем вам нужно будет только заменить API ключ для комментариев ВКонтакте и Facebook. Разумеется, для работы сторонних скриптов необходимо их сначала правильно подключить, но об этом отдельные уроки из рубрики «Комментарии»

<div class="section">
<ul class="tabs"></ul>
<ul class="tabs">
<li class="current" title="Комментировать с помощью WordPress"><span>Комментарии</span>
</li>
</ul>
<ul>
<li title="Комментировать с помощью аккаунта вконтакте"><span>ВКонтакте</span></li>
</ul>
<ul>
<li title="Комментировать с помощью аккаунта в фейсбуке"><span>Facebook</span></li>
</ul>
<div class="box visible recent">
<ul>
<li><?php comments_template(); ?></li>
</ul>
</div>
<div class="box popular">
<ul>
<li>
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "496", attach: "*"});
</script></li>
</ul>
</div>
<div class="box recent">
<ul>
<li><div id="fb-root"></div><script src="http://connect.facebook.net/ ru_RU/all.js#xfbml=1"><fb:comments href="<?php the_permalink(); ?>" num_posts="2" width="500"></fb:comments></li>
</ul>
</div>
</div>

И сам список стилей:

/* tabs */
.section {
}
ul.tabs {
}
.tabs li {
}
.tabs li span {
}
.tabs li.current {
}
.tabs li.current span {
}
.tabs li:hover span {
}
.tabs li:hover span {
}
div.box {
}
div.box.visible {
}
div.box:hover {
}
/* end tabs */

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

  • Спасибо, Александр,давно искала что-то подобное.
    А вот не подскажете ли, как сделать так, чтобы на одной странице открывались 2 поста полностью…
    У меня в детских рецептах посты достаточно короткие и когда открываешь Singl Page то содержимое сайдбара идет далеко вниз

    • а что если использовать плагин Dynamic Widgets и на внутренних страницах выводить меньшее количество баннеров?

  • сегодня я таки установила этот плагин и настроила. такой удобный! просто слов нет. я в восторге! зашла еще раз Вас поблагодарить. СПАСИБО!

    • Вы имеете в виду добавлять текст статьи в каждую из вкладок?
      Разумеется, они лишь разделяют Вашу статью тегами, можете до и после тега-разделителя-создателя_вкладки (новый термин получился 😉 ) добавлять необходимый текст

      • я имею в виду использовать это разделение в качестве рубрикатора, то есть после того как статью (или страницу) разбили, потом дополнять другим еще текстом. Я начинающий блогер, поэтому может быть вопрос задаю не профессионально. А может быть для таких целей существует другой плагин.

        • Да, можно конечно! Добавляете текст в нужное место и все. Ничего, все когда-то делают что-то в первый раз 🙂

  • Александр, здравствуйте. Такой вопрос: как можно сделать соответствие определенному объекту на сайте разных рубрик через вкладки? Например, есть игра. И на странице с ее описанием чтобы выводилось во вкладках по этой игре новости, статьи, картинки, видео.

    Такое можно наблюдать почти на всех сайтах игровых. Можно ли такое сделать на Вордпрессе?

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

  • Доброго времени.
    Как бы решить проблему, один комментарий на все страницы?
    То есть чтоб каждой страницы были свои комментарии, которые оставил пользователь.

    • Поподробнее объясните, честно говоря не уловил суть. Вам надо, чтобы на каждой странице были одни и те же комментарии?

  • Обалденная вещь! Я даже, по-моему, не встречала таких вкладок на других сайтах. Жалко, что не знала про этот плагин раньше. Теперь обязательно буду им пользоваться. Спасибо! =)

    • Да они много где используются — классно экономят место на мониторе

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