Меню

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

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

[pwal id=»11955356″ description=»Чтобы посмотреть видеоурок, нажмите на одну из кнопок»]

[/pwal]

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

Скачать плагин вкладок для сайта 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>

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

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

Способ 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 */

Комментарии 16

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

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

  • Отличный плагин, пригодится однозначно. Спасибо.

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

  • Я попробую сегодня его установить, как раз то что мне нужно.

  • Александр, а можем мы в уже сформированные вкладки добавлять текст в каждую вкладку?

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

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

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

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

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

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

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *