Создание виджет-совместимой темы для Wordpress

В этом посте я расскажу как создать тему, поддерживающую виджеты и как превратить облако меток в список тегов.

У нас есть (у меня есть) папка с темой в одну колонку и таким содержимым:

• images\
• style.css
• index.php
• comments.php
• footer.php
• header.php
• functions.php
• screenshot.png

Подробнее о теме в одну колонку, всех этих файлах и их содержимом можно прочитать в моих первом и втором постах.

Для создания темы, поддерживающей виджеты, нужен сайдбар (sidebar.php). Он может быть один (например правый), а может случится так, что вам понадобится несколько (2 правых, 2 левых, правый и левый, может еще нижний – это уже для шаблонов с множеством колонок). Но обо всем по порядку.

Предположим, нам нужен один сайдбар, правый. Будем использовать стандартные виджеты (т.е. те, что настраиваются в админке – Дизайн – Виджеты). Чтобы они работали и вордпресс не писал, что тема не виджет-совместимая, мы ее (тему) будем адаптировать.

Создаем файл sidebar.php:

<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar() ) : ?>
<?php endif; ?>

</div>
<!-- end #sidebar -->

В functions.php пишем (если такого файла нет, то создаем его, а затем добавляем следующий код):

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="title">',
        'after_title' => '</h2>',
    ));
?>

Подключаем наш сайдбар в index.php (сразу после подключения шапки) с помощью

<?php get_sidebar(); ?>

Заходим в админку, меню Дизайн, пункт Виджеты и видим список доступных виджетов. Выбираем нужные. У меня это выглядит так

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

Создаем папку includes, в ней файл widget_tags.php, в нем такой код:

<?php
/**
 * Widget: show tags list with usage count
 */
function widget_tags($args) {
    extract($args);

    // Get tags and show it:
    $tags = get_tags('orderby=count&order=DESC');

    $tags_ul_pattern = '<ul>%s</ul>';
    $tags_li_pattern = '<li>
	<a href="%s">%s%s</a>
	</li>';
    $tag_count_pattern = ' (%s)';
    $tags_li = '';
    foreach ($tags as $tag) {
        $tags_li .= sprintf(
            $tags_li_pattern,
            get_tag_link($tag->term_id),
            $tag->name,
            ($tag->count) ? sprintf($tag_count_pattern, $tag->count) : ''
            );
    }

    echo $before_widget;
    echo $before_title . 'Теги' . $after_title;
    printf($tags_ul_pattern, $tags_li);
    echo $after_widget;

}
// Register widgets:
register_sidebar_widget('Теги', 'widget_tags');

Если вы пытались отобразить облако в виде списка, то должны были столкнуться с функцией wp_tag_cloud(), но от нее ничего не добьешься. Функция get_tags() позволяет управлять полученными данными и при этом обладает такими же параметрами как и wp_tag_cloud(). Я использую сортировку тегов по популярности.

В functions.php подключаем созданный нами виджет

include ‘includes/widget_tags.php’;

В админке в меню Дизайн пункте Виджеты появился наш нестандартный виджет – Теги. Подключаем (настроек у него нет) и оцениваем результат.

Теги выводятся списком. Обратите внимание на число в скобках – это количество постов, в которых встречается тег.

Теперь усложняем задачу – предполагаем, что у вас несколько сайдбаров (к примеру 2). Тогда корректируем functions.php:

<?php if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
        'name' => 'first',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="title">',
        'after_title' => '</h2>',
    ));
    register_sidebar(array(
        'name' => 'second',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => '',
    ));
}
?>

Как видите, во втором сайдбаре нет никаких тегов, классов. Это не ошибка. Вы можете не оборачивать заголовок виджета и список, тогда у вас будет просто текст (а не заголовок h2, как в первом случае) и просто список.

В корне папки с темой создаем два файла sidebar-first.php и sidebar-second.php с таким содержимым:

<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar('first') ) : ?>

<?php endif; ?>

</div>
<!-- end #sidebar -->

Первый отличается от второго именем файла (если sidebar-first.php, то используется ‘first’, если  sidebar-second.php, то используется  ’second’) в строке

|| !dynamic_sidebar(‘first’) ) : ?>

Если вам понадобится больше сайдбаров, то вы знаете как увеличить их число – создаем нужное количество файлов sidebar-*, не забываем их регистрировать в functions.php, указывая номер.

Для отображения двух сайдбаров заменяем в index.php строку

<?php get_sidebar(); ?>

на две

<?php get_sidebar(‘first’); ?>
<?php get_sidebar(’second’); ?>

и в админке настраиваем оба сайдбара, добавив виджеты.

Вот есть у нас тема (theme-archive) с двумя сайдбарами – скажем так трехколоночный вариант, расположение этих колонок достаточно легко изменяется с помощью стилей.