Главная Часть 1. Создание блога Глава 8. Техническая часть Урок 79. Табы (вкладки) в сайдбаре WordPress

Урок 79. Табы (вкладки) в сайдбаре WordPress

wordpress табы сайдбар

Привет, друзья!

Как-то я писал про плагин SideBarTabs вот в этой статье. И заметил, с каждым обновлением этого плагина проблем становится все больше, настраивать все сложнее. Но замен я ему не находил. Не находил, до сегодняшнего дня. Плагин называется postTabs в этой статье мы с Вами установим и настроим его. Он довольно универсален, его можно использовать не только в сайдбаре для переключения с рубрик на, например, архив. Можно его также встроить в страницу, разделив тем самым ее на несколько страниц. Здорово, не так ли?

И да, пока не забыл, как мы видим этот плагин в действии? Одна вкладка открыта, остальные скрыты, правда? Так вот, исходя из этого, появились люди, которые говорили, якобы подобные плагины скрывают информацию от поисковиков. И тем самым индексация блога становится хуже.

Вымысел! Роботы не гуляют по сайту, подобно людям. Они открывают код, и роются в нем. А в коде как раз ничего не скрыто, следовательно поисковики к этому относятся положительно. Точнее нейтрально, что они (табы) есть, что их нет. А вот людям удобнее, да и места сколько экономится.

Переходим к настройке плагина. Сначала скачайте его вот здесь. Активируем, и переходим в «Параметры» -> «postTabs». Здесь мы оформляем их как нам нравится. Это процедура долгая, если Вы хотите сделать все идеально. Если тяп-ляп, то пара минут.

Давайте немного разберемся в английском языке, дабы понять, чего от нас хотят.

настройки postTabs

Слева настройки, справа образец того, как будут выглядеть табы.

  1. Line color - Цвет линии, на картинки он у меня синий. Я специально немного изменил цветовую гамму, чтобы было понятнее, где да что.
  2. Active Tab - Активная вкладка. Активная - в смысле, Вы на нее нажали, и вот просматриваете ее содержимое.
  3. Mouse Over Tab - При наведении мышкой на вкладку.
  4. Inactive Tab - Неактивная вкладка.

Выбираем для этого всего нужный цвет, чтобы была гармония с дизайном блога.

Есть еще Tabs alignment - это расположение вкладок. Существует 3 вида: Left, Center, Right. (лево, центр, право соответственно).

Когда все настройки оформления завершили, переходите на создание страницы. Создайте новую, или отредактируйте старую. В общем необходимо в страницу вот что вставить:

Можно сделать и не 3 вкладки, а больше или меньше. Хоть 10 🙂

Я примерно так это все сделал:

примерА вот каков результат:

результатНеплохо-неплохо. Но это мы рассмотрели лишь работу вкладок на странице. А в сайдбаре они не работают. Чтобы заработали, нам придется потрудиться. Тут нужны знания html\css хотя бы небольшие.

Хотя постараюсь объяснить подробно, надеюсь знания html не понадобятся, посмотрим. Скачиваем вот этот архив. Распаковываем его в папку с нашей темой. То есть, в корне сайта выбираем папку wp-content\themes\Ваша тема\сюда кидаем 2 файла из архива.

Необходимо их подключить к нашей теме, для этого откроем файл header.php и перед закрывающим тегом вставляем этот код:

Файлы мы подключили к теме! Ура! Теперь идем в админку, переходим в виджеты, вставляем виджет «Текст» в нужный сайдбар, и вписываем туда следующий код:

Если что-то тут непонятно, предлагаю посмотреть на то, как я сделал, и просто заменить название и текст на свой:

А вот как это выгляди в работающем состоянии:

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

Вот там Вы увидите немного строк, первые, примерно, строк 7-9 относятся исключительно к цвету. Остальные пара-тройка - в выравниванию и т.д. Разобраться не сложно, тут даже главное знать английский и все. Цвета Вы можете в том же фотошопе выбрать, или с помощью программ «изъятия цвета», список которых я приводил тут. Но если у Вас не мазила браузер, то просто скачайте программу pixie. Она мало весит, не требует установки.

Что я могу добавить? Да ничего вроде, используйте табы! Они - неотъемлемый элемент юзабилити сайта. Если бы не меню со встроенными табами в моей теме, то я бы не раздумывая делал подобное с помощью плагинов.

Надеюсь этот урок принесет Вам пользу.

Всем удачи и до скорых встреч!

Полезные статьи Вам на почту!

Нас более 700 человек!

Комментарии

Shkippi
0

Спасибо за инфо, как раз сегодня жена мурыжила по такому вопросу как такое сделать)))

31.12.2012
Sly
0

Рад что вовремя очень))

31.12.2012
taras-beljaev
0

Отличная статья Спасибо огромное

04.02.2013
Sly
0

🙂

04.02.2013
Роман
0

Добрый вечер. Я хочу в сайдбаре сделать табы (популярные, новые, архивы, рубрики). Можно ли с помощью этого плагина это реализовать, если да, то что вставлять в поле "Сюда нужную информацию"
[tab: Рубрики]
Сюда нужную информацию???

26.03.2013
Sly
0

Добрый! Да, реализовать это вполне возможно с помощью данного плагина, а в поле "сюда нужную информацию" необходимо прописать html код. Тут вам понадобятся знания данного языка.

26.03.2013
Nadezda Krivohizina
0

Что ж… и такое мнение допустимо. Хотя, думаю, возможны и другие варианты, так что не огорчайтесь.

09.04.2013
Sly
0

Вы о чем? 🙂

09.04.2013
Pavel
0

Доброго времени суток. Хотел бы узнать, можно как то редатировать стили этого слайдбара? ЧТобы вкладки были по-больше, шрифт по-читабельнее и так далее. Спасибо

22.05.2013
Sly
0

Добрый вечер!
Да, конечно, можно. Если Вы делали сайдбар по уроку, то у Вас

. Теперь откройте файл style.css и пропишите в нем стили для данного дива.
22.05.2013
Александр
0

А как можно сделать скроллинг в табах?

16.03.2014
Sly
0

В css коде пропишите табам: overflow:scroll;

17.03.2014

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

Поделиться