Последнее время мне довольно часто приходится заниматься разработкой виджетов для WordPress и иногда возникают ситуации, когда стандартных возможностей движка не хватает.
Сегодня я хочу показать прием, который позволяет назначить виджетам (которые находятся внутри одного сайдбара) индивидуальные CSS стили.
Прежде всего, разберемся, о каких именно стилях идет речь.
Вообще содержимое виджета и его разметка определяются разработчиком. Но для того, чтобы виджеты красиво вписывались в дизайн темы предусмотрены 4 параметра, которые должны использовать разработчики виджетов (по крайней мере в теории 🙂 ).
Эти параметры задаются разработчиком темы при создании сайдбара. Например, так:
register_sidebar(array( ..., 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>' ));
Разработчики виджетов обычно используют их внутри метода widget. Взгляните на фрагмент примера из кодекса.
class My_Widget extends WP_Widget {
...
function widget($args, $instance) {
extract( $args );
$title = apply_filters('widget_title', $instance['title']);
?>
<?php echo $before_widget; ?>
<?php if ( $title )
echo $before_title . $title . $after_title; ?>
Hello, World!
<?php echo $after_widget; ?>
<?php
}
}
Как видите, в параметре before_widget использованы две переменные: %1$s и %2$s (их значения подставляются с помощью функции sprintf). В результате для текстового виджета получим что-то вроде.
<li id="text-3" class="widget widget_text">
Т.е. мы можем задать стили отдельно для каждого типа виджетов. Но представьте, что нам нужно вывести заголовки каждого четного виджета в сайдбаре темно-синим, а каждого нечетного – серым цветом. И при этом цвет не зависит от типа виджета, а определяется исключительно порядком размещения виджетов и если пользователь переставит виджеты местами, то и цвета должны измениться.
Использовать параметр id для этих целей вряд ли получится. Он создается при вставке виджета в сайдбар и не изменяется при перемещении виджета.
Решение довольно простое.
Добавьте в файл functions.php следующий код.
function custom_widget_counter($params) {
global $widget_counter;
if ($params[0]['id'] == 'my_sidebar') {
$widget_counter++;
If ($widget_counter % 2 == 0) {
$params[0]['before_title'] = '<h2 class="even">';
}
else {
$params[0]['before_title'] = '<h2 class="odd">';
}
}
return $params;
}
add_filter('dynamic_sidebar_params','custom_widget_counter');
«Фокус» заключается в использовании фильтра dynamic_sidebar_params, который позволяет изменять параметры, указанные при создании сайдбара (функция register_sidebar).
Установка атрибута class выполняется функцией custom_widget_counter (её имя мы указываем при добавлении фильтра). В первом параметре эта функция получает массив с текущими настройками.
Затем мы объявляем глобальную переменную $widget_counter, которая используется в качестве счетчика виджетов в сайдбаре.
Учитывая, что сайдбаров может быть несколько, проверяем id сайдбара и если он равен my_sidebar, устанавливаем параметр before_title. Для этого достаточно просто присвоить соответствующему элементу массива новое значение.
Если текущий виджет четный, устанавливаем <h2 class="even">, в противном случае — <h2 class="odd">.
И, самое главное, нужно обязательно вернуть (return) изменённый массив, иначе наши изменения применены не будут.
После этого остаётся только добавить соответствующие CSS правила в таблицу стилей.
И ещё раз хочу обратить ваше внимание. Этот метод будет работать для виджетов, которые разработаны в соответствии с рекомендациями кодекса (используются переменные before_widget, before_title и т.д. в разметке виджета).
Если есть вопросы или замечания пишите, буду рад обсудить 😉
До встречи!
Интересно почитать
Нужно продвижение ресторана? Попробуйте муляжи блюд от японских дизайнеров
Качественные и удобные промо сумки на заказ от швейного цеха
