Как добавить зону виджетов в шаблон WordPress

Итак, друзья. Когда-то давно я обещал Вам написать, как добавить в Ваш шаблон WordPress новые зоны виджетов или отредактировать старые. Но к сожалению, забыл об этом.

Прошу за это прощения. Спасибо большое Марине за то, что напомнила мне об этом. Я очень люблю получать обратную связь от посетителей моего сайта. И всегда рад помочь.

Давайте же начнем.

Первым делом я хотел бы поговорить о том, что такое вообще виджет в WordPress. Наверняка многие не знают.

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

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

Вот об этом мы сейчас и поговорим.

1. Инициализация зон виджетов в файле functions.php

Да-да. Именно в этом файле прописаны зоны виджетов. Файл этот находится в папке с Вашей темой. Конкретнее вот здесь:

/wp-content/themes/имя_темы/functions.php

Открываем его любым текстовым редактором. Удобнее всего пользоваться Notepad++ (для более продвинутых — Adobe Dreamweaver). И прокручиваем его почти до самого конца вниз. До функции:

function twentyten_widgets_init()

twentyten — имя темы (у Вас может быть другое). В этой функции видим следующие конструкции:

// Area 1, located at the top of the sidebar.
    register_sidebar( array(
        'name' => __( 'Левая колонка', 'twentyten' ),
        'id' => 'primary-widget-area',
        'description' => __( 'Область левой колонки', 'twentyten' ),
        'before_widget' => '<li id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ) );

Их может быть несколько похожих. Собственно говоря, сколько их будет прописано — столько зон виджетов и будет в Вашем шаблоне.

Давайте разберем синтаксис.

// Area 1, located at the top of the sidebar.

Это просто строчка с комментарием (она закомментирована двойным слэшем //). Она не влияет на код. Можно ее совсем удалить, или написать в ней какой-нибудь свой комментарий (который поможет Вам потом понять, зачем нужна эта конкретная зона виджетов).

register_sidebar( array(

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

'name' => __( 'Левая колонка', 'twentyten' ),

Эта строчка задает имя для зоны виджетов, которое будет отображаться в админ панели на вкладке «Виджеты». «twentyten» — название темы (у вас может отличаться).

Далее:

'id' => 'primary-widget-area',

Вот это самый главный параметр зоны виджетов. Его идентификатор. Именно по этому идентификатору мы будем указывать шаблону — где именно разместить эту зону виджетов. Этот параметр должен быть уникальным для каждой зоны виджетов.

'description' => __( 'Область левой колонки', 'twentyten' ),

Это описание, которое будет отображаться при открытии зоны виджетов во вкладке «Виджеты».

'before_widget' => '<li id="%1$s">',

Код, указанный в этом параметре будет добавляться перед виджетом. Будет добавлять каждому виджету в этой зоне уникальный идентификатор. Чтобы можно было потом при помощи CSS отформатировать каждый виджет по-разному (при желании).

Например, может получиться так:

<li id="text-3">

Продолжим рассматривать код:

'after_widget' => '</li>',

Соответственно этот код добавится после виджета. Если мы перед виджетом открыли тег <li>, то тут обязательно нужно его закрыть.

'before_title' => '<h3>',

Этот код будет добавлен перед заголовком, который мы введем в текстовое поле при создании самого виджета.

'after_title' => '</h3>',

Соответственно, этот код добавится после заголовка. Закрываем в нем теги, которые открыли перед заголовком.

Вот и все! Инициализация зоны виджетов завершена. Идем дальше.

2. Размещение зоны виджета в шаблоне.

Все зависит от того, где Вы хотите разместить зону виджетов. Если Вы хотите разместить ее в шапке, то добавляем код в файл header.php.

Если в сайдбаре — то в файл sidebar.php

Если в подвале — то в footer.php

А теперь рассмотрим код, который нужно добавить:

<?php if ( is_active_sidebar( 'primary-widget-area' ) ) : ?>
    <div id="primary" role="complementary">
        <ul>
            <?php dynamic_sidebar( 'primary-widget-area' ); ?>
        </ul>
    </div>
<?php endif; ?>

Как и в прошлый раз — пойдем по строкам.

<?php if ( is_active_sidebar( 'primary-widget-area' ) ) : ?>
   ...
<?php endif; ?>

Этот код проверяет, добавлены ли какие-нибудь виджеты в конкретную зону. Ведь, согласитесь — нет смысла отображать зону, если в ней нет ни одного виджета.

«primary-widget-area» — это как раз тот самый идентификатор, о котором я говорил в предыдущей главе. Он указывает на конкретную зону.

Итак, условие проверили. Если виджет не добавлен в зону — зона не отображается, если же добавлен — то в код страницы вставляется конструкция:

<div id="primary" role="complementary">
     <ul>
         <?php dynamic_sidebar( 'primary-widget-area' ); ?>
     </ul>
</div>

А именно — добавляется контейнер <div>. Внутри него маркированный список <ul>. Список нужен! Ведь в одной зоне может быть расположено несколько виджетов.

Ну и соответственно инструкция:

<?php dynamic_sidebar( 'primary-widget-area' ); ?>

... Вставляет конкретную зону виджетов в это место. Опять же идентифицируется по «primary-widget-area» — тому же самому идентификатору.

Ну вот и все! Теперь Вы знаете как добавить зону виджетов в Ваш шаблон WordPress.

Желаю Вас разобраться с этой темой и создавать такие шаблоны, которые нужны именно Вам, а не тому, кто создавал шаблон.

И не забываем подписываться на обновления. Вас ждет еще очень много интересного.