Виджетизация тем для WordPress
Вот скачали классную тему для WordPress, поднастроили ее маленько под свои нужды, порадовались тому, как легко все получается, захотели настроить сайдбар, набить его своими виджетами и обломались.
В администраторской консоли в списке виджетов Appearance->Widgets обнаружили жуткую ругань вордпресса. Она жаловался, что тема, видите ли, как-то не так устроена, и виджеты в ее сайдбаре он показывать не хочет. Ну, как ребенок маленький, честное слово! То есть, что-то похожее на виджеты в сайдбаре, конечно, есть, да вот не совсем то, что хотелось бы, и настроить это “что-то похожее” не получается. В поисках истины заглянули в интернет и вот что узнали…
Оказывается, чтобы вордпрессовская тема поддерживала виджеты, она должна удовлетворять некоторым критериям. А если тема критериям не удовлетворяет, то ядро вордпресса в растерянности разводит руками и признает, что оно не знает, как в “эту хрень” вообще вставлять виджеты.
Я для примера специально взял тему, которая не поддерживает виджеты, называется эта тема marque.
Итак, вы скачали тему marque для вордпресса вот здесь, распаковали ее и закинули на ваш хостинг в папочку вордпресса /wp-content/themes/. Затем активировали тему в панели Appearance->Themes.
И вот теперь начинаются танцы с бубном. Можно, кстати, приобрести в магазине музыкальных инструментов штуковину, которую эскимосы в рот вставляют и зудят на ней. Очень помогает при проведении подобных процедур.
Итак, первый шаг.
Сам исходник сайдбара хранится вот здесь: /wp-content/themes/marque/sidebar.php, именно его мы и будем исправлять в первую очередь. Нам нужно сделать так, чтобы в нем обязательно присутствовал один ненумерованный список <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>
Страшно, да? Вот именно этот пустой список впоследствии и будет наполнен виджетами. Кстати, если поддержка виджетов включена, но ни один виджет не выбран, то будет отображен сайдбар по умолчанию, то есть как раз вся та разметка, что вы видите в первом листинге.
Итак, теперь шаг второй.
Проверяем, есть ли в папке /wp-content/themes/marque/ файлик functions.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
В тему:
Уважаемый автор! Все сделал, как в статье. Все прописал ручками. Начало работать, но дизайн стал ужасным (титульные заголовки выджетов, почему-то, на всю длинну страницы; статьи сместило в левый нижний угол. Не могли бы Вы выслать на мой e-mail архив с измененными файлами?
evgen, May 19, 2009 12:38 amЕвгений, я добавил в конце поста ссылку для скачивания исправленных файлов. Если этого недостаточно, то пишите, будем разбираться дальше. Будет хорошо, если я посмотрю то что получилось у вас, если дадите ссылку.
admin, May 19, 2009 5:38 pmЗдравствуйте. Я писала отзыв на вашу статью про кино но мне никто не ответил. Тут нужно зарегистрироватся что ли как я поняла ? 🙂
Боня, June 20, 2010 8:29 pmСпасибо, очень полезная статья, а то на сайте WordPress’a все на английском. Можете еще добавить про виджетизацию на div’ах, но по принципу она похожа.
И кстати, для того чтобы виджетизировать тему не обязательно удалять весь сайдбар, можно вставить код:
…
там где Вы хотите вставить виджеты, а все что перед и после этого кода останется нетронутым даже если будут виджеты
Виктор, April 15, 2011 9:58 amА у меня почему-то выдает ошибку в файле function.php: Parse error: syntax error, unexpected T_STRING, expecting ‘)’
Дмитрий, December 9, 2011 4:21 amНаиболее вероятно, это от того, что при вставке кода в блог, в коде испортились все кавычки. Сделайте замену одинарных и двойных кавычек на правильные. Они обе находятся на клавише Э. В коде, приведенном в статье, кавычки – неправильные.
Вячеслав Гринин, December 9, 2011 8:37 am