
Итак, друзья. Когда-то давно я обещал Вам написать, как добавить в Ваш шаблон 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.
Желаю Вас разобраться с этой темой и создавать такие шаблоны, которые нужны именно Вам, а не тому, кто создавал шаблон.
И не забываем подписываться на обновления. Вас ждет еще очень много интересного.
Cергей! От всей души поздравляю вас с праздником Защитника Отечества. Желаю крепкого сибирского здоровья, счастья, успехов во всех делах и всего самого светлого и радостного!
Взрастил немало русский флот,
Сынов надежных и спокойных,
Они стране родной оплот
И служат Родине достойно!
И царь и Бог для подчиненных,
Он сердцем честен и душой,
Морской стихией покоренный
И романтической струной!
Таких немного мы знавали,
В любых краях, в любых столетьях,
Они, как будто бы из стали,
Их не коснутся лихолетья!
Я от души тебя поздравляю.
Одолевай с честью мили.
И в жизни твоей желаю
Семь футов тебе с семьей под килем!
Спасибо огромное, Надежда!