Табы в WordPress без плагинов

Сегодняшняя статья о том, как создать табы в блоге без использования громоздких и нагружающих сайт и хостеров плагинов. Код реализует переключение между табами без различного рода эффектов, ввиду этого он очень простой и быстрый. Пример можно увидеть на моем бывшем сайте lastfmtools.ru в сайдбаре (блок Популярное и Комментарии)

1. Открываем файл, в который будут добавляться табы (как правило, это single.php или sidebar.php) и вставляем следующий код:

            <dl class="tabs">
                <dt class="selected">Таб1</dt>
                <dd class="selected">
                    <div class="tab-content">содержимое первого таба</div>
                </dd>                                                              
                <dt>Таб2</dt>
                <dd>
                    <div class="tab-content">содержимое второго таба</div>
                </dd>
                <dt>Таб3</dt>
                <dd>
                    <div class="tab-content">содержимое третьего таба </div> 
                </dd>                          
            </dl>

3. Все вкладки и их содержимое — в одной таблице. Для визуально приятного их оформления нужно добавить и настроить под свой стиль код ниже:

.tabs { width:260px; overflow:hidden; margin:0; zoom:1; padding:1px ;position:relative; }
.tabs dt { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #FFF; text-shadow: 1px 1px 1px #333; z-index: 2; position: relative; background: #B80000; float:left; line-height:2; height:2em; background: #B80000; border-bottom:0; padding:0 1em; position:relative; margin-right:0px; cursor:pointer; }
.tabs dt:hover { background-color:#ccc; }
.tabs dt.selected { border-color:#aaa; background:#B33519; z-index:3; cursor:auto;}
.tabs dd { background:#fff; display:none; float:right; width:100%; margin:2em 0 0 -100%; position:relative; z-index:2; }
.tabs dd.selected { display:block; }
.tabs .tab-content { background:#fff; border:0px solid #ccc; padding:5px 5px 5px 5px; }

Настройте под себя ширину (здесь 260), фон, цвет шрифтов, рамку. В общем, нужно будет подогнать оформление под общий стиль вашего сайта.

3. Для того, чтобы активировать табы и автоматически выделить первую вкладку, необходимо подключить java-скрипт, добавив его в header.php. Код:

        <script type="text/javascript">
            $(function(){
                $('dl.tabs dt').click(function(){
                    $(this)
                        .siblings().removeClass('selected').end()
                        .next('dd').andSelf().addClass('selected');
                });
            });
        </script>

Табы в таблице — наиболее простой способ использования табов, а небольшой скрипт в хидере автоматически выделяет первый из них. Работает быстро и без тормозов и глюков.

VN:F [1.9.22_1171]
Rating: 3.0/5 (8 votes cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
  • Tim

    Спасибо.

  • Tim

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

    • http://lastfmtools.ru/ ADv

      1й код: выводит сами табы в нужном месте
      2й: отвечает за их визуальное оформление
      3й: автоматическое выделение первого таба

      Для того, чтобы вывести посты:
      — функция на том моем блоге, отвечающая за вывод самых просматриваемых постов
      коменты:

      код от системы комментирования Disqus

      В вашем же случае нужно исходить из того, какие плагины (возможно) у вас установлены, какие функции используются для вывода постов и комментов.

      • Tim

        Да, спасибо. Разобрался. Но всё таки предпочел плагин.. За советы огромное спасибо. Грамотно всё объясняете. Буду заходить к вам, будет желание — приходите и к нам на сайт.
        Удачи!

  • Женя

    у меня почему то закладки таб2 и таб3 внизу под окном комментирования если
    выбрано таб1 и поднимаются на свое место только если их выбрать. В
    чем ошибка и где ее исправить, все копировал с данной странички ничего
    не менял

    • http://lastfmtools.ru/ ADv

      Покажите пример, попробуем разобраться

      • Женя

         подскажите, как мне то сделать, сайт пока строится на локальном  сервере(denver)

        • http://lastfmtools.ru/ ADv

          Возможно, дело в ширине заголовков табов, попробуйте поиграться с шириной в css-коде либо попробовать написать короткие загловки для табов (например: 1,2,3)

          • Женя

             http://informatika.mksat.net/wp-content/uploads/2012/07/help4.jpg не помагает

        • http://lastfmtools.ru/ ADv

          Вот что получается у меня, если вставить вышеприведенный код в пустой html-файл http://wpincode.com/files/tabs.html . У Вас не так?

          • Женя

             не открывается, ссылка,я  сейчас сфоткаю и ссылочку брошу

          • Женя

             http://informatika.mksat.net/wp-content/uploads/2012/07/help1.jpg вот так они показываются при активном первом блоке, а вот так при активации второго таб: http://informatika.mksat.net/wp-content/uploads/2012/07/help2.jpg

          • http://lastfmtools.ru/ ADv

            Попробуйте следующий код для css
            .tabs { width:400px; overflow:hidden; margin:0; zoom:1; padding:1px ;position:relative; }
            .tabs dt { float:left; line-height:2; height:2em; background:#fff; border:1px solid #ccc; border-bottom:0; padding:0 1em; position:relative; left:35px; margin-right:1px; cursor:pointer; }
            .tabs dt:hover { background-color:#ccc; }
            .tabs dt.selected { border-color:#aaa; background:#fff; z-index:3; cursor:auto; }
            .tabs dd { background:#fff; display:none; float:right; width:100%; margin:2em 0 0 -100%; position:relative; z-index:2; }
            .tabs dd.selected { display:block; }
            .tabs .tab-content { background:#fff; border:1px solid #ccc; padding:20px 20px 10px 20px; }

          • Женя

             такая штука получилась:
            http://informatika.mksat.net/wp-content/uploads/2012/07/help3.jpg

          • Женя

            может у вас есть скайп, так бы дело может быстрее пойдет, а то как ссылку ложу нужно код вводить а я его прочитать могу только с 10-й попытки

          • http://lastfmtools.ru/ ADv

             скайп advokat_b

          • Женя

             пишу в скайп

          • Женя

            написал вам в скайп, но авторизации пока нет, может что не так сделал мой ник в скайп baksbani13, мне очень нужна ваша помощь

      • Женя

        И еще скажите плиз как вы сделали, такую удобную регистрацию к комментариям, я ею просто очарован. Можно ли такую же поставить на сайт на движке wordpress

        • http://lastfmtools.ru/ ADv

          Естественно можно :) Этот сайт также работает на WordPress, ну и посвящен ему же.
          Установлена отдельная, нестандартная система комментирования, называется Disqus. В гугле легко найдете мануал по установке, или обращайтесь, помогу чем смогу. Ставится в принципе в 2 клика. Скачал плагин — установил — импортировал старые комменты — ГОТОВО.

  • Микола Калакуцький

    не срабатывает java-скрипт, табы не переключаются

    • ADv

      Код в хидер прописали?

    • http://lastfmtools.ru/ ADv

      Скрипт в хидер между тегами head не забыли прописать?

  • Дмитрий

    Все работает спасибо. Просто и эффективно.

  • Роман

    Здравствуйте. Все сделал как написано, но не переключается между табами, скрипт вставил между тегами . Выделяется только первая вкладка

    • Карина

      У меня точно также, тоже не переключается между табами.

      • http://web-devise.com/ ADv

        Вероятно, проблема в библиотеке jQuery, которую ваша тема может не использовать/не подгружать на определенных страницах.

        • valdus

          как устранить эту ошибку, чтобы библиотека подгружалась.
          я её скачал и просто подключил на всякий случай, так же не работает.

    • http://praestes.ru/ praestes

      То же самое… Квери вроде поддерживается.

  • greatseo

    Огромное Вам человеческое спасибо! Пересмотрел кучу вариантов, а как надо работает только Ваш. Спасибо!

    • http://web-devise.com/ ADv

      = )

  • Артём

    У кого не работают табы. Для этого пропишите в файле function.php после <?php следующий код:
    if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js&quot;), false);
    wp_enqueue_script('jquery');
    }

    • http://praestes.ru/ praestes

      Что прописать, дружище? Ты уснул, что-ли, пока писал?))

      • Vic Key

        Наверно забыл о чем хотел написать и ушел.

  • big_jacky

    А зачем код добавлять в single.php? Тогда табы будут во всех записях. Зачем это надо? не проще ли непосредственно в сам пост вставлять в html-редакторе ?

    • http://web-devise.com/ ADv

      «как правило, это single.php или sidebar.php» (с)

      Чаще всего, это конечно же сайдбар. Но может возникнуть необходимость вывести какой-либо контент в табах на ВСЕХ страницах записей.

  • Виталий

    А как сделать вертикальные табы, типа как здесь http://mos-holidays.ru/muzei-moskvy-na-karte/ ?

  • Awsuccess Gymarov

    круто все работает! :)

  • Сергей Гурин

    А демо слабо показать? На приличных ресурсах это принято. Даже скрин не удосужились показать!

Scroll To Top