Как сделать табы в блоге на 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 и полезный Блог о веб-дизайне.
Интересная фишка, но ставить не стал, просто подумал что этот понт будет лишним)
Безусловно, оно слегка «подгрузит» страницу, но с другой стороны бывают моменты, когда без этого скрипта не обойтись — уж очень идеально он подходит.
Станислав, признаться в этом не очень силен. Просто перевел и применил инструкцию на сайте разработчиков. По поводу загрузки на свой хостинг написал.
Что касается «делается просто», то я не сомневаюсь. Здесь правда можно подключить некоторые специфические возможности типа анимации при смене табов.
А мне вот, что интересно :»А как поисковики относятся к таким табам?». Если например вместо простого текста забить в табах ссылки, то ПС будет их ранжировать?
Станислав Малкин, согласен:) Но я не решился вникать в дебри CSS после получаса разбирательств, поэтому обратился к готовому и 100% работающем варианту.
Pad, насколько я понимаю, все прекрасно видится поисковиками, т.к. это все лишь визуально так подключаются табы. Если ты посмотришь на страницу (код хтмл), то увидишь, что там используется обычные div`ы. Без подгрузки скрипта тексты просто отобразились бы в столбик.
2 Pad, по идее, нормально, да и на многих иностранных блогах такие табы уже стоят и норм.
Я бы не советовал подгружать скрипты по хттп с сайта jQuery. Лучше сохранить тогда уже локально и подгружать с фс.
И еще я так и не понял, зачем тут jQuery..Это ведь просто делается без всякого Ajax’a..
Ну обычно на табы не делают никакой анимации :) А то, что есть сейчас — делается в принципе довольно просто с помощью css.
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 запустить …
Саша, если речь идет о сайте, который в подписи был оставлен, то взгляни на верхний блок там где «записи» и «комментарии» — табы работают! Поэтому нужно сделать аналогичную конструкцию в нужном тебе месте.
Можешь стукнуть в аську, попробуем разобраться.
Ха, все хорошо, но php-код внутри этих контейнеров-то не работает! (((((
Mixa, возможно, он и не должен работать и нужно поискать другой метод реализации. Этот видимо только для текстов.
Использовать жкваери имхо не стоит при реализации простых решений. И табы к ним относятся.
Жкваери довольно весомая библиотека, а табы организовать можно с помощью нескольких строк жаваскрипта.
Не сочтите за спам. Линк на мою статейку по реализации менюшки с использование табов: http://lexnevermind.com/post_1242571437.html
В статейке есть примеры. Всё работает и отлично.
И главное всё очень просто.
Lex Nevermind, спасибо, очень полезная статейка.
Вот именно этот скрипт описанный в статье страшно подгружает сайт: время загрузки страницы после внедрения этих табов увеличивается с 4 до 16 секунд. Не думаю что это есть гуд
вот примерно что у меня получилось — moscowkadr.ru
но это на боковой панелии, а как сделать на главной стр.?
как в примеру тут: wordpress.org/extend/plugins/intensedebate/
да и еще при том что бы все новый записи попадали на первую закладку, во вторую, например старые новости
Дмитрий, нужно править шаблон блога так чтобы эта панель с табами отображалась в центре.
Что касается последних и предпоследних новостей, то тут также нужно разбираться с шаблоном и настраивать соответствующим образом. Могу лишь порекомендовать пост про последние посты блога, остальное отображение нужно делать самостоятельно либо заказать у кого-то.
Спасибо! Очень помогла информация. Забрал себе в сборочку фишек =)
Здравствуйте!
Очень интересная инфа — хотел себе сделать табы в блоке комментариев, но получилось вот что: выводятся все табы в столбик, и все получаются видимыми.
Может я что то не так делаю? Что значит «. В блоке блога нужно прописать следующие строки:…» ? Я прописал их в файле header.php внутри блока . Наверное — неправильно, а как надо?
Павел, если все табы видны, то скорее всего скрипт не подключился. Насколько я помню правильно нужно добавлять в header.php только в верхнюю часть. Кстати, если у вас wordpress блог, то проще найти подходящий для табов плагин.
И не получилось((( мучаюсь уже неделю перепробывал много чего, тыбы либо вертикально либо вообще не появляются(
Евгений, спустя пару лет я нашел еще парочку решений данной проблемы, о чем можете почитать в статьях — лучшие системы табов для wordpress и про Tabbed Widgets Plugin для табов — весьма простое и функциональное решение данной задачи.
А я например все сделал как написано — для комментариев. Что бы по вкладкам было wordpress, vk, facebook. А они у меня как не переключай — все равно все одновременно отображаются. И не совсем понял куда и как устанавливать СТИЛИ
Дмитрий, тоже была идея сделать табы для комментариев, но пока что не успел ее реализовать. Стили — в файл стилей style.css.
Здравствуйте.
Подскажите пожалуйста, как мне сделать сайт объявлений на вордпресс. Нужно чтобы можно было настроить поддомены для регионов. (чтобы присвоить в яндексе регион). Вот нашел одну доску объявлений moskva.biglus.com с регионами, подскажите какой шаблон или плагин тут используется, нужно именно, чтобы поддомены работали как в указанном сайте. Я находил плагин для создания поддоменов, но там только для категорий, тоесть из категорий создаются поддомены, а мне так не нужно.
Андрей, к сожалению, с такой задачей не сталкивался, поэтому не могу ничего подсказать. Шаблон для сайта — чисто визуальная составляющая, тут, наверное нужно искать какой-то плагин.