Как сделать табы в блоге на wordpress
Thursday, 18 Sep 08 в 13:37Табы (или закладки) позволяют экономить место, размещая в одном блоке сразу несколько «наборов информации». Выглядит это примерно так:
При клике на закладку отобразится выбранный раздел. По-моему, вещь крайне удобная и практичная. Собственно поэтому я выбрал данный метод для вывода промежуточных результатов конкурса «в погоне за трафиком» справа в сайдбаре блога. Для каждого тура создана закладка, где будут размещены соответствующие данные. Кстати, уже сейчас можете наблюдать расположение игроков после 5-ти дней, количество переходов специально не публикую дабы не было желания накрутить показатели. Скажу лишь, что пока никто не вышел за сотню, поэтому шанс есть абсолютно у каждого!
Существует множество различных реализаций и скриптов для табов - вот, например, англоязычная подборка из 37 вариантов. Там есть абсолютно все - стандартные закладки, с автоматическим переключением и различной анимацией.
Поскольку я использую wordpress, то для начала решил поискать плагины, которые бы помогали создавать табы (tabs). Нашел несколько штук, к сожалению, большинство из них работать отказалось. Вот есть неплохое решение - postTabs, но данный плагин выводит табы в постах или страницах вашего блога, что четко указано в документации по настройке. Поэтому решил не мучаться с ним, а поискать какой-то отдельный скрипт. Тем не менее, если вам нужно разбить страницу на несколько частей - рекомендую.
Опять же пришлось достаточно долго искать подходящий вариант, тестировать и настраивать, пока не пришел к UI/Tabs jQuery по наводке Ольги - автора ресурса «Блог для вебмастеров» (мой обзор). У нее в блоге, кстати, табы реализованы. Пользуясь моментом, хочу, во-первых, поблагодарить за подсказку, а во-вторых, пригласить поучаствовать в акции - «поздравь Ольгу с Днем Рождения и получи подарок!» - весьма интересный конкурс.
А теперь к делу:
Установка UI/Tabs jQuery
1. В блоке
блога нужно прописать следующие строки:1 2 3 4 5 6 7 8 9 10 | <script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js"></script>
<script>
$(document).ready(function(){
$("#example > ul").tabs();
});
</script> |
Внимание! Лично я перед использованием скриптов рекомендовал бы сохранить их к себе на хостинг и вызывать уже оттуда. Ссылки выше оставил, чтобы у вас была возможности скачать файлы.
2. Дальше для вывода табов в нужном месте шаблона должен использоваться код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div id="example" class="flora"> <ul> <li><a href="#fragment-1"><span>Один</span></a></li> <li><a href="#fragment-2"><span>Два</span></a></li> <li><a href="#fragment-3"><span>Три</span></a></li> </ul> <div id="fragment-1"> Закладка номер1 </div> <div id="fragment-2"> Закладка номер2 </div> <div id="fragment-3"> Закладка номер3 </div> </div> |
3. Последний штрих - настройка внешнего вида табов. Файл css указанный выше, насколько я понял, отвечает за стили абсолютно всех примеров в документации jQuery, поэтому я скопировал себе только:
http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.tabs.css
Для фона закладок используется изображение tabs.png:
Вы можете его изменить как угодно под стиль своего сайта, после чего исправить путь к нему в классе:
.ui-tabs-nav a, .ui-tabs-nav a span { float: left; /* fixes dir=ltr problem and other quirks IE */ padding: 0 12px; background: url(pix/tabs.png) no-repeat; color: white; }
Дополнительные возможности и описания вы можете найти в этой документации (англ).
P.S. Напоминаю про важную конференцию веб-разработчиков.
Читаем также как презренный манимейкер статьи по каталогам прогонял и мифы о дизайне сайтов.
Спасибо спонсорам:
- Категория: Web разработка
Похожие по тематике посты:
Loading ...
Интересная фишка, но ставить не стал, просто подумал что этот понт будет лишним)
Безусловно, оно слегка “подгрузит” страницу, но с другой стороны бывают моменты, когда без этого скрипта не обойтись - уж очень идеально он подходит.
Я бы не советовал подгружать скрипты по хттп с сайта jQuery. Лучше сохранить тогда уже локально и подгружать с фс.
И еще я так и не понял, зачем тут jQuery..Это ведь просто делается без всякого Ajax’a..
Станислав, признаться в этом не очень силен. Просто перевел и применил инструкцию на сайте разработчиков. По поводу загрузки на свой хостинг написал.
Что касается “делается просто”, то я не сомневаюсь. Здесь правда можно подключить некоторые специфические возможности типа анимации при смене табов.
Ну обычно на табы не делают никакой анимации :) А то, что есть сейчас - делается в принципе довольно просто с помощью css.
А мне вот, что интересно :”А как поисковики относятся к таким табам?”. Если например вместо простого текста забить в табах ссылки, то ПС будет их ранжировать?
Станислав Малкин, согласен:) Но я не решился вникать в дебри CSS после получаса разбирательств, поэтому обратился к готовому и 100% работающем варианту.
Pad, насколько я понимаю, все прекрасно видится поисковиками, т.к. это все лишь визуально так подключаются табы. Если ты посмотришь на страницу (код хтмл), то увидишь, что там используется обычные div`ы. Без подгрузки скрипта тексты просто отобразились бы в столбик.
2 Pad, по идее, нормально, да и на многих иностранных блогах такие табы уже стоят и норм.
2Pad: если при просмотре исходного кода вы видите ссылки, то поисковик будет видеть их тоже. Если некоторый код подгружается только после клика, и не виден в коде без этого клика (некоторые раскрывающиеся менюшки так сделаны), то и поисковик такого кода не увидит.
хочу себе такое :)
спасибо что откопали и перевели.
Вот еще
http://www.stilbuero.de/jquery/tabs_3/ - пример
http://www.artonesia.org/post/wordpress-tabs-and-slides-accordion.html/ - плагин к WP
Плагин неплох, а вот первый пример - точно такой же скрипт, как описан у меня.
А мне кажется это не слишком удобным, поэтому я наоборот из некоторых тем такое решение убираю. :)
Мне кажется, что далеко не все пользователи могут догадаться, что по вкладке можно кликнуть… Да и даже если я сам знаю об этом, то далеко не всегда сделаю… и не увижу того, что же там скрывалось.
Хотя в вашем случае решение подходит идеально - тот, кто надо кликнет, а для остальных сэкономится место. :)
Владимир, если есть много места, то конечно можно обойтись без табов. А насчет “не догадаются посетители”, так они могут и не понять, что нужно кликать по пунктам меню:)
як раз на днях збирався зробити собі такі таби - ІМХО - з ними можна збільшити внутрішню перелінкованість сторінок, при цьому не заважаючи відвідувачам (роздутим сайдбаром с картою сайта приміром :))
може і хтось не додумається клацнути на такі таби, а я от розташую на третьому табі всякі там пузомірки, і глядачам не будуть мішати і я зможу на них глянути в любий момент - по моєму досить зручно
Tod, дуже дякую Вам за цю інфу. Зробила і собі на блог :-)
lilumi, повністю з Вами згодна щодо корисності табів і полегшення перегляду для користувачів :-)
[...] на блоге стал слишком большим? Сделайте табы и все будет красиво [...]
[...] на блоге стал слишком большим? Сделайте табы и все будет красиво [...]
у меня 2.6.1 , даже на стандартном шаблоне - не нажимаются(не происходит переход) по табам, видно только первый… с чем может быть связано? версия wordpress - вроде нет, шаблон - вроде тоже нет, правильность использования - по инструкции, все отображается, тоже вроде не в этом дело…
может ли хостер не запускать такое, раньше вроде не использовал яваскрипты… что мне делать? совсем руки опустил, все настроение себе испортил.. если бы я разбирался в программировании, эх.. кто поможет? крик души.. надо posttabs запустить …
Саша, если речь идет о сайте, который в подписи был оставлен, то взгляни на верхний блок там где “записи” и “комментарии” - табы работают! Поэтому нужно сделать аналогичную конструкцию в нужном тебе месте.
Можешь стукнуть в аську, попробуем разобраться.
[...] Как сделать табы в блоге на wordpress Табы (или закладки) позволяют экономить место, размещая в одном блоке сразу несколько «наборов информации» [...]