Интеграция вкладок jQuery в WordPress

Опубликовано: 6 Ноябрь 2010Автор ratemir

Интеграция вкладок jQuery в WordPressДанный пост является продолжением статьи о вкладках jQuery, в которой описан процесс их создания более подробно. Здесь же Вы узнаете как можно установить вкладки в широко известный блог WordPress. На самом деле в интеграции нет ничего сложного. Просто, нужно кое-что изменить в HTML разметке. Останавливаться на стилях CSS и jQuery я не буду. Увидеть, взять, а в дальнейшем, если захотите, применить их, Вы сможете, прочитав предыдущий пример. Вот как всё будет выглядеть после некоторых преобразований:

<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>

Думаю, Вы успели заметить перемены. А именно, заменены элементы <li> на некоторые функции WordPress, которые при необходимости Вы можете сменить на свои или же на обычную текстовую информацию.

Обычно выше приведенный код устанавливается в файле sidebar.php, то есть для вывода в боковой панели, но использовать можно в разных частях страницы сайта.



Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

Оставить комментарий

Наверх