Табы в 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>

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