Как добавить поддержку виджетов в тему WordPress в 3 шага

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

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

Шаг 1: Создаем functions.php

В нашем примере такой файл в теме отсутствовал, поэтому мы просто создали новый functions.php и загрузили его в папку темы через FTP. Вот такой код был помещен в файл:

<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>

Он сработает, если только вы используете разметку по-умолчанию от WordPress с h2 в заголовках сайдбаров и ненумерованные списки:

<ul>
  <li>
<h2>Заголовок сайдбара</h2>
  <ul>
    <li><a href="link1.html">Ссылка 1</a></li>
    <li><a href="link2.html">Ссылка 2</a></li>
  </ul>
  </li>
</ul>

Настраиваем functions.php
Если же нам не подходит разметка по-умолчанию от wordpress, то для SEO необходимо использовать h4 для заголовков виджетов и не применять немаркированные списки ul или li. Поэтому вместо вышеприведенного кода мы изменили код следующим образом для того, чтобы задать свою собственную разметку:

<?php if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>',
'after_title' => '</h4>',
)); ?>

Код выше говорит сам за себя. before_widget и after_widget — здесь нам не нужен собственный код, поэтому оставляем значения пустыми. before_title и after_title мы использовали для h4. Такая модификация переназначит дефолтную разметку и теперь будет поддерживать наш собственный шаблон вывода. Можете изменять этот код для того, чтобы стилизировать элементы под дизайн своего сайта с помощью CSS.

Шаг 2: Добавляем виджеты в динамический сайдбар

Этот код в functions.php поможет вам добавить области виджетов в свою тему и активирует возможность добавления динамического сайдбара. Теперь переходим в админку WordPress, а затем в меню Виджеты.

В разделе доступных виджетов вы сможете выбрать нужные вам из списка (Облако тегов, Свежие зхаписи, Свежие комментарии, Календарь, Архивы, Рубрики, Поиск и т.п).

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

Шаг 3: Добавляем динамический сайдбар в шаблон

Теперь вам потребуется добавить php код в сайдбар для того, чтобы активировать динамический сайдбар, который будет отображать добавленные в админке виджеты. Вставьте этот код в нужное место в файле sidebar.php:

<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar() ) : ?>
<?php endif; ?>

Сохраните изменения и новый сайдбар выведет ваши виджеты.

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

В файл functions.php нужно будет добавить следующий код:

function devise_widgets_init() {
register_sidebar(array(
'name' => __( 'Сайдбар 1', 'devise' ),
'id' => 'sidebar-1',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>',
'after_title' => '</h4>',
));
}
add_action( 'init', 'devise_widgets_init' );

А в sidebar.php добавляем его вызов:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<?php dynamic_sidebar( 'sidebar-1' ); ?>
<?php endif; ?>

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.