Урок 235 Как сделать панель вкладок в WordPress

Привет! Много кто из читателей спрашивали и продолжают спрашивать, как сделать панель с вкладками в WordPress (примерно такую, как у меня на сайте справа: "Рубрики", "Популярно", "Архив"). Если лезть в код, это довольно проблематично, я пробовал разбираться, но у меня ничего не получилось, так как в PHP я довольно слаб.

Сегодня же я решил поделиться способом, как просто сделать панель вкладок через плагин SidebarTabs. Ели вдруг этот плагин Вам не поможет, то  можете попробовать его аналоги: Tabbed Widgets, Tabber Tabs Widget,  Fun with Sidebar Tabs и другие.

Как сделать панель вкладок в WordPress

  1. Для начала нужно скачать плагин SidebarTabs.
  2. Теперь нужно будет каждую вкладку создать по отдельности. Для этого заходим в Админка WordPress -> Параметры -> sidebarTabs.
  3. Нажимаем на кнопку "Create New sidebarTab".
  4. В следующем окне, где написано 'Widget", выбираем нужный виджет вкладки. В данном случае я сделаю панель вкладок из "Рубрики" и "Архивы", сначала выбираем "Рубрики":
  5. По желанию Вы можете добавить иконки к вкладкам, также задаете название вкладке (Tab name), изменить стили. После редактирования всего этого, нажимаем на кнопку Save.
  6. Повторяем 3-ий и 4 -ый шаг, только уже для "Архивы".
  7. Там же в настройках данного плагина запоминаем номера "Order ":
  8. Заходим админка WordPres -> Внешний вид -> Виджеты. Перетаскиваем виджет плагина sidebarTabs и где написано "Orders sidebarTabs: " прописываем те самые номера "Order" через запятую, которые нам нужно вывести в панели вкладок.
  9. Если покопаться в внешнем виде, можете даже сделать что-то подобие моей панели вкладок 🙂 :
  10. У данного плагина очень много настроек: можно задать заголовок панели вкладок, вывести вкладки по горизонтали/вертикали, редактировать внешний вид, задать иконки и т.п. Думаю, Вы разберетесь.

Повторюсь, если вдруг данный плагин не заработает, можете еще попробовать Tabbed Widgets, Tabber Tabs Widget,  Fun with Sidebar Tabs.

Спасибо за внимание, до скорой встречи! 🙂

P.s.  Вы хотите купить недвижимость? Знайте, существует огромная база недвижимости на портале www.bpn.ru!

С уважением, Пётр Александров.
Подпишитесь на бесплатные уроки

Понравился урок? Вы не хотите пропускать новые бесплатные уроки по созданию, раскрутке и монетизации блога? Тогда подпишитесь на RSS или на электронный ящик в форме выше и получайте новые уроки мгновенно! Также можете следить за мной в Twitter.

Ваш комментарий

  1. Евгений
    http://gaydpc.ru

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

  2. Disemper
    http://f1-it.ru

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

  3. Николай
    http://newswp.ru/

    ООО спасибо давно мечтал это сделать!!! Спасибо большое Вам…

    • Петр Александров

      Рад, что Вам пригодилось.

  4. Николай
    http://newswp.ru/

    Правда еще у меня есть вопрос, как Вы сделали что бы с верху было выдвижное меню секретные материалы и это с права мои цели и уже достиг… Подскажите пожалуйста!!!!

    • Петр Александров

      Это делал верстальщик темы, я не знаю как 🙂

      • Николай
        http://newswp.ru/

        Ясно спасибо за ответ!!!!

  5. Андрей
    http://bistroinfo.com

    Еле нашел доступное описание по панели вкладок, спасибо большое!!!

  6. Вячеслав
    http://effectmoney.ru/

    Спасибо. Как всегда вовремя. Давно ищу такой плагин, но находил обычно плагины с глюками или не то, что хотел…. Этот как раз то что я искал.

  7. Михаил
    http://gakugo.ru

    Версия плагина слабенькая. Пытался сделать такой же, да не получается. =(

  8. Никита Рябин
    http://pro97.ru/

    А я вот как-то не хочу делать такую панель, нравится больше когда всё в столбце, и результата приносит больше!

  9. Mr. Android
    http://androidtab.ru

    Почитал об этом плагине на сайте вордпресса. Написано что он не обновлялся уже 2 года. Поновее ничего такого нет? 🙂

  10. Алексей
    http://prostoguitar.ru

    Ура! 🙂 Спасибо Петь, давно ждал этот урок! Пытался замутить такое кодом, но нечего не вышло. А тут все так просто! Огонь!)))

  11. Андрей
    http://goo.gl/z6ghj

    Плагины для WORDPRESS вообще являются спасительной соломинкой для решения абсолютно всех возникающих проблем при создании и эксплуатации своей площадки.

  12. Константин

    А как сделать, чтобы в этом плагине была иерархия рубрик и подрубрики выпадали как у Вас

  13. Ирина

    Плагин не работает. Остальные глючат (

  14. Татьяна

    Я совершеннешний Чайник , можно ли создать простейший блог без всех этих непонятных терминов и чтобы его могли читать все желающие ? . Пока я скачиваю интересные посты , но кроме меня их никто не может читать. Пример – 10 готических соборов. Сделала в черновике , а когда выставляла , не печатались подписи к фото . Но в конце , всем скопом , напечатались. А сейчас ещё интересней – в черне сделала пост , нажимая предпросмотр , а в заключение , когда хотела выставить пост ,кнопка Добавить не работает. После окончания работы , когда убрала все программы , и плод моего труда пропал. Т. е. раньше хоть всё переносилось , а теперь и этого нет. Браузер интернет эксплоер , соц. система майл ру. Зарабатывать не собираюсь , но хочу понять , в чём дело , а спросить не у кого.

    • Петр Александров

      Попробуйте использовать другой браузер, например Google Chrome

  15. Роман

    Добрый вечер, Петр. Сделал все как у вас написано, вывел Рубрики и Популярные записи. Но на сайте отображаются только кнопки и информацию не отображают. В чем может быть проблема

  16. Александр
    http://3apabotai-pro100.ru/

    День добрый, интересует вот такой вопрос, какой плагин поможет отобразить мою фотографию в верхушке правого блока? И очень хочется узнать, как создать подписку на свой сайт?

    • Петр Александров

      Там не нужен плагин, с помощью кода надо )

  17. Алексей
    http://ws-life.ru

    Спасибо большое! Долго искал что то подобное…. Даже сам пытался на чужих сайтах в PHP и скриптах покопаться…. Сейчас CSS настроить мне разплюнуть!

  18. Павел
    http://www.sokolovpavel.ru

    Петр, спасибо за информацию о плагинах. Вышел на эту страницу, кстати, через “карту сайта”. Так, что действительно это полезно не только для поисковиков, но и для рядового пользователя, как ты и пишешь.

  19. Евгений
    http://smetskiy.com

    Не работает в новой версии вордпрес

    • IvYur
      http://kuponam.ru

      Перед тем как скачивать плагин посмотрите для какой он версии вордпресса. Что касается вашего случая – то посмотрите есть ли обновление для вашего плагина до нужной вам версии движка.

  20. Евгений
    http://smetskiy.com

    Петр, помоги сделать такие вкладки, данный плагин не работает в новой версии, может что-то подобное есть !!! Буду очень благодарен..

    • Петр Александров
      http://wpnew.ru

      К сожалению, я не знаю, с другими плагинами не работал.

  21. Novikov
    http://novikov.dp.ua/

    Петр, благодарю за статью, хоть еще и не прочитал до конца и еще не попробовал ))
    Только собрался написать вам на имейл вопрос об этом, как решил сперва полистать ваш блог и нашел как раз то ,что искал!!!

  22. Юрий

    День добрый! Если сможете, подскажите пожалуйста. Необходимо во вкладки поставить, разместить карусели-слайдеры. Но оказалось , что срабатывает только одна вкладка, в остальных карусели не работают . Как быть

Наверх