Автор: Майкл Мартин
Перевод: Всеволод Козлов

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

Css оформление закладок

DOMtabs – бесплатный скрипт, об установке и использовании которого я и хочу поговорить в этой статье-руководстве.

Пример реализации данного скрипта можете посмотреть в сайдбаре блога Pro Blog Design. Эти вкладки очень удобны для пользователей и позволяют разумно использовать свободное пространство.

Обратите внимание, что это руководство пишется для блогеров, использующих WordPress в качестве своей блоговой CMS, но этот скрипт можно приспособить и для любой другой платформы.

Итак, процесс установки DOMtabs состоит из 5 этапов:

  1. Скачать скрипт с официального сайта и разархивировать
  2. Загрузить domtab.js в папку с темой оформления
  3. Скачать pbd_domtab.css (клик правой кнопкой мыши и «Сохранить как») и загрузить также в папку с темой оформления
  4. Вставить следующий код в файл темы оформления header.php над тегом </head>:<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/domtab.js"></script> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/pbd_domtab.css" media="screen" />
  5. В файл sidebar.php или в виджет в место, где Вы хотите, чтобы отображался скрипт в действии, добавьте следующий код:<div class="domtab">
    <ul class="domtabs">
    <li><a href="#t1">Вкладка 1</a></li>
    <li><a href="#t2">Вкладка 2</a></li>
    <li><a href="#t3">Вкладка 3</a></li>
    </ul>
    <div>
    <a name="t1" id="t1"></a>
    <p>Контент первой вкладки</p>
    </div>
    <div>
    <a name="t2" id="t2"></a>
    <p>Контент второй вкладки</p>
    </div>
    <div>
    <a name="t3" id="t3"></a>
    <p>Контент третьей вкладки</p>
    </div>
    </div>

Вот и все! Как видите, ничего сложного нет! Количество вкладок неограниченно.

Стили оформления можете настроить в css-файле, ссылка на который выше уже упоминалась! Стили, которые можно изменять, выделены в самом начале файла.

Оригинал статьи: How To Install DomTABs on WordPress























Смотрите также:

Понравилась статья? Поделитесь ей в социальных сетях: