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

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

screenshot_014

Демо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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