Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

Главная » Web разработка » Как сделать табы в блоге на wordpress или сайте

Как сделать табы в блоге на wordpress

Табы (или закладки) позволяют экономить место, размещая в одном блоке сразу несколько «наборов информации». Выглядит это примерно так:

табы (закладки) в блоге на wordpress или сайте

При клике на закладку отобразится выбранный раздел. По-моему, вещь крайне удобная и практичная. Собственно поэтому я выбрал данный метод для вывода промежуточных результатов конкурса «в погоне за трафиком» справа в сайдбаре блога. Для каждого тура создана закладка, где будут размещены соответствующие данные. Кстати, уже сейчас можете наблюдать расположение игроков после 5-ти дней, количество переходов специально не публикую дабы не было желания накрутить показатели. Скажу лишь, что пока никто не вышел за сотню, поэтому шанс есть абсолютно у каждого!

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

Поскольку я использую wordpress, то для начала решил поискать плагины, которые бы помогали создавать табы (tabs). Нашел несколько штук, к сожалению, большинство из них работать отказалось. Вот есть неплохое решение — postTabs, но данный плагин выводит табы в постах или страницах вашего блога, что четко указано в документации по настройке. Поэтому решил не мучаться с ним, а поискать какой-то отдельный скрипт. Тем не менее, если вам нужно разбить страницу на несколько частей — рекомендую.

Опять же пришлось достаточно долго искать подходящий вариант, тестировать и настраивать, пока не пришел к UI/Tabs jQuery по наводке Ольги — автора ресурса «Блог для вебмастеров». У нее в блоге, кстати, табы реализованы. Пользуясь моментом, хочу, во-первых, поблагодарить за подсказку, а во-вторых, пригласить поучаствовать в акции — «поздравь Ольгу с Днем Рождения и получи подарок!» — весьма интересный конкурс.

А теперь к делу:

Установка UI/Tabs jQuery

1. В блоке <head> блога нужно прописать следующие строки:

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. Напоминаю про важную конференцию веб-разработчиков.
Читаем также как презренный манимейкер статьи по каталогам прогонял и мифы о дизайне сайтов.

Спасибо спонсорам: Википедия онлайн бизнеса. Все о Pay Per Lead и полезный Блог о веб-дизайне.

18.09.08

Категории: Web разработка.

Теги: , , , , ,

34 Comments
  1. As

    Интересная фишка, но ставить не стал, просто подумал что этот понт будет лишним)

  2. Tod

    Безусловно, оно слегка «подгрузит» страницу, но с другой стороны бывают моменты, когда без этого скрипта не обойтись — уж очень идеально он подходит.

  3. Станислав Малкин

    Я бы не советовал подгружать скрипты по хттп с сайта jQuery. Лучше сохранить тогда уже локально и подгружать с фс.

    И еще я так и не понял, зачем тут jQuery..Это ведь просто делается без всякого Ajax’a..

  4. Tod

    Станислав, признаться в этом не очень силен. Просто перевел и применил инструкцию на сайте разработчиков. По поводу загрузки на свой хостинг написал.
    Что касается «делается просто», то я не сомневаюсь. Здесь правда можно подключить некоторые специфические возможности типа анимации при смене табов.

  5. Станислав Малкин

    Ну обычно на табы не делают никакой анимации :) А то, что есть сейчас — делается в принципе довольно просто с помощью css.

  6. Pad

    А мне вот, что интересно :»А как поисковики относятся к таким табам?». Если например вместо простого текста забить в табах ссылки, то ПС будет их ранжировать?

  7. Tod

    Станислав Малкин, согласен:) Но я не решился вникать в дебри CSS после получаса разбирательств, поэтому обратился к готовому и 100% работающем варианту.
    Pad, насколько я понимаю, все прекрасно видится поисковиками, т.к. это все лишь визуально так подключаются табы. Если ты посмотришь на страницу (код хтмл), то увидишь, что там используется обычные div`ы. Без подгрузки скрипта тексты просто отобразились бы в столбик.

  8. As

    2 Pad, по идее, нормально, да и на многих иностранных блогах такие табы уже стоят и норм.

  9. AlexNote

    2Pad: если при просмотре исходного кода вы видите ссылки, то поисковик будет видеть их тоже. Если некоторый код подгружается только после клика, и не виден в коде без этого клика (некоторые раскрывающиеся менюшки так сделаны), то и поисковик такого кода не увидит.

  10. vVv

    хочу себе такое :)

    спасибо что откопали и перевели.

  11. Stimmi

    Вот еще
    http://www.stilbuero.de/jquery/tabs_3/ — пример
    http://www.artonesia.org/post/wordpress-tabs-and-slides-accordion.html/ — плагин к WP

  12. Tod

    Плагин неплох, а вот первый пример — точно такой же скрипт, как описан у меня.

  13. Владимир Лапшин

    А мне кажется это не слишком удобным, поэтому я наоборот из некоторых тем такое решение убираю. :)
    Мне кажется, что далеко не все пользователи могут догадаться, что по вкладке можно кликнуть… Да и даже если я сам знаю об этом, то далеко не всегда сделаю… и не увижу того, что же там скрывалось.
    Хотя в вашем случае решение подходит идеально — тот, кто надо кликнет, а для остальных сэкономится место. :)

  14. Tod

    Владимир, если есть много места, то конечно можно обойтись без табов. А насчет «не догадаются посетители», так они могут и не понять, что нужно кликать по пунктам меню:)

  15. lilumi

    як раз на днях збирався зробити собі такі таби — ІМХО — з ними можна збільшити внутрішню перелінкованість сторінок, при цьому не заважаючи відвідувачам (роздутим сайдбаром с картою сайта приміром :))
    може і хтось не додумається клацнути на такі таби, а я от розташую на третьому табі всякі там пузомірки, і глядачам не будуть мішати і я зможу на них глянути в любий момент — по моєму досить зручно

  16. Jadore

    Tod, дуже дякую Вам за цю інфу. Зробила і собі на блог :-)

    lilumi, повністю з Вами згодна щодо корисності табів і полегшення перегляду для користувачів :-)

  17. Саша

    у меня 2.6.1 , даже на стандартном шаблоне — не нажимаются(не происходит переход) по табам, видно только первый… с чем может быть связано? версия wordpress — вроде нет, шаблон — вроде тоже нет, правильность использования — по инструкции, все отображается, тоже вроде не в этом дело…
    может ли хостер не запускать такое, раньше вроде не использовал яваскрипты… что мне делать? совсем руки опустил, все настроение себе испортил.. если бы я разбирался в программировании, эх.. кто поможет? крик души.. надо posttabs запустить …

  18. Tod

    Саша, если речь идет о сайте, который в подписи был оставлен, то взгляни на верхний блок там где «записи» и «комментарии» — табы работают! Поэтому нужно сделать аналогичную конструкцию в нужном тебе месте.
    Можешь стукнуть в аську, попробуем разобраться.

  19. Mixa

    Ха, все хорошо, но php-код внутри этих контейнеров-то не работает! (((((

  20. Tod

    Mixa, возможно, он и не должен работать и нужно поискать другой метод реализации. Этот видимо только для текстов.

  21. Lex Nevermind

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

    Не сочтите за спам. Линк на мою статейку по реализации менюшки с использование табов: http://lexnevermind.com/post_1242571437.html

    В статейке есть примеры. Всё работает и отлично.
    И главное всё очень просто.

  22. Tod

    Lex Nevermind, спасибо, очень полезная статейка.

  23. elvencedor

    Вот именно этот скрипт описанный в статье страшно подгружает сайт: время загрузки страницы после внедрения этих табов увеличивается с 4 до 16 секунд. Не думаю что это есть гуд

  24. Дмитрий

    вот примерно что у меня получилось — moscowkadr.ru
    но это на боковой панелии, а как сделать на главной стр.?
    как в примеру тут: wordpress.org/extend/plugins/intensedebate/

    да и еще при том что бы все новый записи попадали на первую закладку, во вторую, например старые новости

  25. Tod

    Дмитрий, нужно править шаблон блога так чтобы эта панель с табами отображалась в центре.
    Что касается последних и предпоследних новостей, то тут также нужно разбираться с шаблоном и настраивать соответствующим образом. Могу лишь порекомендовать пост про последние посты блога, остальное отображение нужно делать самостоятельно либо заказать у кого-то.

  26. masterix

    Спасибо! Очень помогла информация. Забрал себе в сборочку фишек =)

  27. Павел

    Здравствуйте!

    Очень интересная инфа — хотел себе сделать табы в блоке комментариев, но получилось вот что: выводятся все табы в столбик, и все получаются видимыми.

    Может я что то не так делаю? Что значит «. В блоке блога нужно прописать следующие строки:…» ? Я прописал их в файле header.php внутри блока . Наверное — неправильно, а как надо?

  28. Tod

    Павел, если все табы видны, то скорее всего скрипт не подключился. Насколько я помню правильно нужно добавлять в header.php только в верхнюю часть. Кстати, если у вас wordpress блог, то проще найти подходящий для табов плагин.

  29. Евгений

    И не получилось((( мучаюсь уже неделю перепробывал много чего, тыбы либо вертикально либо вообще не появляются(

  30. Дмитрий

    А я например все сделал как написано — для комментариев. Что бы по вкладкам было wordpress, vk, facebook. А они у меня как не переключай — все равно все одновременно отображаются. И не совсем понял куда и как устанавливать СТИЛИ

  31. Tod

    Дмитрий, тоже была идея сделать табы для комментариев, но пока что не успел ее реализовать. Стили — в файл стилей style.css.

  32. Андрей

    Здравствуйте.
    Подскажите пожалуйста, как мне сделать сайт объявлений на вордпресс. Нужно чтобы можно было настроить поддомены для регионов. (чтобы присвоить в яндексе регион). Вот нашел одну доску объявлений moskva.biglus.com с регионами, подскажите какой шаблон или плагин тут используется, нужно именно, чтобы поддомены работали как в указанном сайте. Я находил плагин для создания поддоменов, но там только для категорий, тоесть из категорий создаются поддомены, а мне так не нужно.

  33. Tod

    Андрей, к сожалению, с такой задачей не сталкивался, поэтому не могу ничего подсказать. Шаблон для сайта — чисто визуальная составляющая, тут, наверное нужно искать какой-то плагин.

Добавить комментарий

Ваш e-mail не публикуется. Обязательные поля помечены *
Если вы комментируете впервые, то текст будет отправлен на модерацию.