Индивидуальное оформление виджетов для WordPress

Владимир | | PHP, Web разработка, WordPress.

wordpress widget styling

Последнее время мне довольно часто приходится заниматься разработкой виджетов для 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 и т.д. в разметке виджета).

Если есть вопросы или замечания пишите, буду рад обсудить 😉

До встречи!

Интересно почитать

Нужно продвижение ресторана? Попробуйте муляжи блюд от японских дизайнеров

Качественные и удобные промо сумки на заказ от швейного цеха

  • Alexpts

    Все это уже где-то читал давно.

  • Где вы черпаете информацию для functions.php?
    тоже на кодексе?

    • Кодекс + исходники WP.

      • А много берете, если надо скрипт один подправить.. самописный?

  • Здравствуйте!
    Я в программировании мало что понимаю, и никак не могу найти информацию как и где нужно настроить виджеты. В моей теме облако меток, например, вылезает слишком близко к краю сайдбара. Нужно как то вставить отступ, но я не могу понять как. В CSS полазила, поменяла там циферки наугад, но ничего не получилось.
    Может Вы подскажете что делать?

    • Здравствуйте!

      Менять циферки в CSS наугад можно очень долго.

      Нужно установить плагин под названием firebug (к браузеру Firefox). С
      его помощью смотрите какие стили применяются к вашему облаку тегов.
      Там должны быть правила margin или padding (и то, и другое определяет
      отступы). Их значения и нужно изменять.

      В вашем случае.
      Создайте в файл стилей добавьте

      div#sidebar div.sidebar-box a {
      padding: 5px 10px 5px 10px;
      }

      25 февраля 2011 г. 15:44 пользователь Disqus
      написал:

      • Стили еще можно посмотреть через Google Chrome в инструментах разработчика.

        • Сейчас такие инструменты есть во всех современных браузерах, и даже в IE 😉