Делаем виджеты во вкладках без плагина

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

screenshot_014

Демо

Шаг 1. Подготовка. Вывод php в сайдбаре

Выводить вкладки мы будем при помощи обычных текстовых виджетов, в которых поместим PHP-код. Так что на первом этапе нам необходимо разрешить вывод php в сайдбаре, если вы не сделали это раньше. Добавляем в файл функций темы такой код:

Добавить его можно в самом низу файла functions.php, либо там, где вам удобнее.

Шаг 2. Подключение скрипта

Теперь необходимо подключить к вашему сайту jQuery, если вы это еще не сделали. Добавляем в между тегами head строку:

После этого, надо создать сам скрипт переключения вкладок. Создаем пустой файл с любым названием и расширением .js следующего содержания:

И закачиваем файл по FTP на свой сайт. После этого подключаем скрипт к сайту:

Шаг 3. Вывод вкладок

Ну, а теперь можно перейти к самому интересному, то есть непосредственно выводу вкладок с виджетами и их стилизацией через CSS! Зайдите в настройки виджетов в админке вордпресса, и разместите виджет “Текст” в сайдбаре там, где вы хотите вывести вкладки. В виджете необходимо разместить код:

Также необходимо дополнить файл стилей:

Шаг 4. Добавление виджетов во вкладки

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

Теперь, если, например, нужно создать виджет, который будет называться “Посты” и иметь две вкладки, “Последние” и “Популярные”, нужно дописать в текстовом виджете:

А чтобы вывести список рубрик, никаких изменений делать не надо, достаточно между <div class=”box”></div> вставить такой код:

Кстати, перед добавлением, не забудьте провести оптимизацию заголовков виджетов!

Следует добавить, что описанным способом можно создать какое угодно количество виджетов – надо просто создать новый текстовый виджет и скопировать в него код. Как видите, в том, чтобы создать виджеты с вкладками, нет ничего сложного ;)




29 комментариев к “Делаем виджеты во вкладках без плагина”

  1. Iglous

    Да это отличный способ сделать, отличный код. Тем более что можно добавить стили и получить очень красивые вкладки, например, как в шаблоне мистик

    Ответить
    • Ирина

      Да, тут можно по-разному поиграть стилями, я указывала самый простой вариант.

      Ответить
  2. Валерий

    Надо попробовать. Хотел давно уже себе такой виджет для экономии места в сайдбаре.

    Ответить
  3. артем

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

    Ответить
    • Ирина

      Артем, попробуйте сделать следующим образом. Сначала в файле functions разрешите использование php в текстовом виджете (см. код в этом посте).

      Затем создаете два текстовых виджета. В первый вставляете:

      Вместо 1,2,3 – пишете через запятую ID рубрик, которые не должны выводиться в первом виджете.

      Во второй вставляете:

      Вместо 1,2,3 – пишете через запятую ID рубрик, которые должны выводиться во втором виджете.

      Ответить
  4. артем

    создать два текстовых виджета? эо вот эти два текста в файле functions.php?и где можно id рубрик увидеть?

    Ответить
    • Ирина

      ID рубрик – при редактировании рубрики выводится в адресной строке браузера.

      Ответить
  5. артем

    ну и вот допусти м я все сделаю как вы написали,а где мне название для тех новых рубрик вот написать будет можно и где эти рубрики выводиться будут? вот в первом списке там написано у меня “ЖАНР:” а вот во второй где мне надо будеть название прописать добавить новый виджет после этого кода прописанного?

    Ответить
  6. артем

    ничего не получилось,сплошные ошибки выдает,даже при разрешении пхп в виджетах ошибку выдал

    Ответить
  7. артем

    с id разобрался,а рубрики сделал с помощью виджета “собственное меню” все было так просто а я целый день возился :) спасибо большое за помощь если будут вопросы,а они наверное будут:) то я обязательно посещу ваш блог,спасибо!

    Ответить
  8. WPixel

    Много заморочек с кодом, не проще написать виджет с возможностью выбирать что отображать во вкладках?

    Ответить
    • Ирина

      Преимущество моего решения – в полной настраиваемости вкладок через CSS, и в возможности вывести столько виджетов с вкладками, сколько вы захотите, в любом порядке.

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

      1 – http://wordpress.org/extend/plugins/fun-with-sidebar-tabs/
      2 – http://wordpress.org/extend/plugins/tabber-tabs-widget/
      3 – http://wordpress.org/extend/plugins/sidebartabs/

      Я пробовала все эти плагины. Их основной недостаток – то, что они не позволяют настроить как мне надо то содержимое, которое будет выводиться во вкладках.

      Также, ни один из них не позволяет создать то количество виджетов с вкладками, которое вам захочется – всегда будут ограничения.

      Один из этих плагинов (не помню, который) создают дополнительный скрытый сайдбар, и в него надо размещать виджеты, которые должны выводиться во вкладках. При этом даже если там будет 10 виджетов, они все будут в одном блоке вкладок.

      Может, существует какой-то другой плагин, который бы позволил:
      1 – вывести любое количество виджетов с вкладками,
      2 – настроить CSS вкладок так, как я хочу,
      3 – управлять тем, что должно выводиться во вкладках (количество выводимых рубрик, постов, комментариев, авторов, выводить или нет количество постов в рубрике и т.д.)
      …но я его не нашла.

      Если Вы можете написать подобный плагин – я буду рада сделать обзор ;)

      Ответить
  9. WPixel

    Плагины не мой метод, щас выдрал виджет из одной темы, тестю пока на локалке,(накидать их в сайдбар можно хоть сто штук :) ).Стандартные задачи которые возлагают на табы в принципе он решает на 100%

    Ответить
  10. Игорь

    Отличная статья!
    Ирина, у меня в шаблоне уже есть виджет с вкладками, могу я просто отредактировать его и просто заменить содержимое одной вкладки на Рубрики? Если да, то как организовать Рубрики в 2 колонки и вывод количества постов в каждой??

    Ответить
  11. Игорь

    Сколько будет стоить готовый виджет? У самого не получается…

    Ответить
  12. александр

    привет подскажите а как сделать несколько вкладок – 4,5 в виджете чтобы вставить туда коды групп от соц сетей ??

    Ответить
  13. Ash Grey

    Спасибо, за наука.
    Сейчас будем пробовать у себя такую штуку поставить.

    Ответить
  14. Урма

    Спасибо, все понятно и доходчиво. Попробовал на тестовом сайте – работает.
    У меня вопрос: как сделать табы (их наличие), исходя из каких-то условий. Для примера, на сайте http://pioner-cinema.ru/ расписание сеансов сделано табами, насколько я понял. Но сами вкладки (сегодня, завтра, конкретные даты) изменяются. Скажем, если сегодняшняя дата 29.05.14, то табы будут начинаться с этой даты, а назавтра данная вкладка исчезнет и табы уже будут начинаться с 30.05.14.
    Сложно ли замутить что-то подобное на вордпрессе?
    Заранее спасибо за ответ.

    Ответить
    • Ирина

      Да, так сделать можно. Для этого в названии вкладок надо написать PHP-код:
      Для даты сегодня:

      Для даты завтра:

      Если надо другую дату, то вместо +1 day пишете нужное значение. Примеры можно посмотреть тут: http://www.w3schools.com/php/func_date_strtotime.asp

      Ответить
      • Урма

        Да, названия вкладок можно сделать таким способом. Но как сделать так, чтобы содержимое данных вкладок соответствовали названию (содержимое разное по разным датам)?

        Ответить
        • Ирина

          На том сайте, который Вы привели в качестве примера, сделано не вкладками, это, если я правильно поняла, фильтры. Само расписание вообще взято из рамблер-касс, вот оно же: https://widget.kassa.rambler.ru/schedulewidget/place/311?geoplaceid=2&widgetid=19437. Поэтому если Вам нужно такое расписание, то проще воспользоваться виджетом от рамблера :)

          Что касается вопроса. Я не знаю, что именно вы хотите сделать, поэтому в общих чертах будет примерно так. Во-первых, надо будет добавить к записи дополнительное поле (дата сеанса). Потом создать переменную, которая будет обозначать дату вкладки (примерно так как я писала выше). И с этой переменной сравнивать дату сеанса из дополнительного поля. Если совпадает – то выводить записи. Но мне кажется, что это сложно сделать.

          Ответить

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