Виджетизация тем для WordPress

Вячеслав Гринин, January 6, 2009

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

В администраторской консоли в списке виджетов Appearance->Widgets обнаружили жуткую ругань вордпресса. Она жаловался, что тема, видите ли, как-то не так устроена, и виджеты в ее сайдбаре он показывать не хочет. Ну, как ребенок маленький, честное слово! То есть, что-то похожее на виджеты в сайдбаре, конечно, есть, да вот не совсем то, что хотелось бы, и настроить это “что-то похожее” не получается. В поисках истины заглянули в интернет и вот что узнали…

Оказывается, чтобы вордпрессовская тема поддерживала виджеты, она должна удовлетворять некоторым критериям. А если тема критериям не удовлетворяет, то ядро вордпресса в растерянности разводит руками и признает, что оно не знает, как в “эту хрень” вообще вставлять виджеты.

Я для примера специально взял тему, которая не поддерживает виджеты, называется эта тема marque.

Итак, вы  скачали тему marque для вордпресса вот здесь,  распаковали ее и закинули на ваш хостинг в папочку вордпресса /wp-content/themes/. Затем активировали тему в панели Appearance->Themes.

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

Итак, первый шаг.

Сам исходник сайдбара хранится вот здесь: /wp-content/themes/marque/sidebar.php, именно его мы и будем исправлять в первую очередь. Нам нужно сделать так, чтобы в нем обязательно присутствовал один ненумерованный список <ul></ul>. Именно этот список ядро вордпресса заполнит впоследствии виджетами.

Поэтому вы сначала сохраняете копию этого файла (а вдруг там что интересное есть), а затем начинаете без зазрения совести переписывать весь код сайдбара с нуля. Нам нужно, чтобы в нем осталось вот что:

<ul>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<li>
<h2>Заголовок виджета №1</h2>
Тело виджета №1
</li>
<li>
<h2>Заголовок виджета №2</h2>
Тело виджета №2
</li>
<?php endif; ?>
</ul>

Итак, что мы здесь видим. 1) UL-список, 2) PHP-блок if-endif 3) html-код внутри PHP-блока.

Блок if-endif проверяет включена ли в вордпрессе возможность динамического добавления виджетов в сайдбар. И если она НЕ включена, то выводит в результирующий документ тот html-код, что находится в этом блоке, то есть в данном случае два элемента списка <li>. Если же поддержка динамического сайдбара включена, то от всего этого остается лишь вот что:

<ul>
</ul>

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

Итак, теперь шаг второй.

Проверяем, есть ли в папке /wp-content/themes/marque/ файлик functions.php. Конечно, если тема не поддерживает виджеты, то файлика этого Вы там не обнаружите. Создайте его и напишите внутри вот что:

<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));
?>

Этот код зарегистрирует сайдбар и задаст для его отображения некоторые параметры. В данном случае, каждый виджет он обернет в тег <LI>, а заголовок у каждого виджета будет обернут в тег <H2>.  Первое нам необходимо, чтобы список <UL> был валидным (чтобы он содержал в себе не всякий текстовый мусор, а именно элементы <LI>), а второе – чтобы затем с легкостью подправив файл стилей styles.css данного шаблона, мы могли отрегулировать требуемый нам внешний вид заголовков виджетов.

И последний, третий шаг. (необязательный)

Правка файла стилей.  Сначала найдите его здесь: /wp-content/themes/marque/style.css и проконтролируйте, чтобы в нем существовало или появилось следующее:

h2 {
font-size: 12px;
margin: 0px 0 6px 0;
padding: 3px 0 3px 5px;
font-weight: bold;
color: #ffffff;
border-bottom: #3d3d3d 1px solid;
background: url(“images/title.jpg”) repeat-x;
}

h2 a,
h2 a:visited,
h2 a:hover,
h2 a:visited:hover {
text-decoration: none;
color: #ffffff;
}

Здесь мы полностью отрегулировали внешний вид заголовков виджетов.  Первый стиль для H2 вы задаете самостоятельно, сообразно Вашим требованиям к внешнему виду заголовков. В приведенном примере заголовки будут заполнены фоном images/title.jpg. Ну а вторая часть стиля для H2 просто отменяет подчеркивания и изменение цвета для заголовков, если они вдруг (не приведи Господи!) содержат ссылки.
Вот и все. Наслаждайтесь.
А вот здесь лежат исправленные файлы.
—————————————————–

Хостинг изображений – radikal.ru

В тему:

6комментариев

Уважаемый автор! Все сделал, как в статье. Все прописал ручками. Начало работать, но дизайн стал ужасным (титульные заголовки выджетов, почему-то, на всю длинну страницы; статьи сместило в левый нижний угол. Не могли бы Вы выслать на мой e-mail архив с измененными файлами?

evgen, May 19, 2009 12:38 am Reply

Евгений, я добавил в конце поста ссылку для скачивания исправленных файлов. Если этого недостаточно, то пишите, будем разбираться дальше. Будет хорошо, если я посмотрю то что получилось у вас, если дадите ссылку.

admin, May 19, 2009 5:38 pm Reply

Здравствуйте. Я писала отзыв на вашу статью про кино но мне никто не ответил. Тут нужно зарегистрироватся что ли как я поняла ? 🙂

Боня, June 20, 2010 8:29 pm Reply

Спасибо, очень полезная статья, а то на сайте WordPress’a все на английском. Можете еще добавить про виджетизацию на div’ах, но по принципу она похожа.
И кстати, для того чтобы виджетизировать тему не обязательно удалять весь сайдбар, можно вставить код:

там где Вы хотите вставить виджеты, а все что перед и после этого кода останется нетронутым даже если будут виджеты

Виктор, April 15, 2011 9:58 am Reply

А у меня почему-то выдает ошибку в файле function.php: Parse error: syntax error, unexpected T_STRING, expecting ‘)’

Дмитрий, December 9, 2011 4:21 am Reply

Наиболее вероятно, это от того, что при вставке кода в блог, в коде испортились все кавычки. Сделайте замену одинарных и двойных кавычек на правильные. Они обе находятся на клавише Э. В коде, приведенном в статье, кавычки – неправильные.

Вячеслав Гринин, December 9, 2011 8:37 am Reply
Ваше имя
Ваш email*
Ваш сайт
Текст вашего комментария:

Поиск по блогу:
Подписаться:
Популярные:
Облако тегов:
Разное:
Счетчик: