Создание виджета. Рубрики блоками, с картинками на сайдбаре

В продолжении предыдущей статьи, расскажу, как сделал виджет, располагающий блочные рубрики с картинками на сайдбаре.
Пример такого виджета можно посмотреть по ссылке: Гончарна майстерня Етника пластична.

Сайдбар с рубриками.

Сайдбар с рубриками.



Для начала, какие компоненты нам понадобятся, чтобы соорудить такую конструкцию.
Как видно, на скрине каждая рубрика представлена своей картинкой. В стандартноv функционале WORDPRESS этого нет. Поэтому для отображения картинок рубрики я использовал плагин >>Categories Images<<. После установки и активации этого плагина, заходите на страницу Записи\Рубрики, где можно увидеть, что добавилось еще одна колонка Image, и кнопка Upload\Add Image, которая доступна при добавлении новой категории.
Categories Images

Categories Images


Categories Images

Categories Images


Изменить картинку для категории можно в режиме быстрого редактирования категории.
Categories Images

Categories Images


Для вывода существующего изображения категории, достаточно использовать следующий код:


<?php
   if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url();
?>

Теперь приступаем к написанию нашего плагинавиджета, в котором будут отображены категории в блочной структуре, с изображениями в правой части сайта (сайдбаре).

Скачать наш готовый плагин можно здесь: >>categories_block_widget.zip<<.

Внимание!!!
a) Для корректной работы этого пагина, у одной записи не может быть больше одной рубрики;
b) У категории (рубрики) не должно быть подкатегорий (вложенных рубрик).

Осталось самое сложное — разобрать наш плагин.

Итак, начнем с конца.
1) сначала вызываем функцию вызова рабочих функций плагина при инициализации:

   add_action('init', 'register_categories_widget');

2) Дальше видим саму функцию register_categories_widget(), в которой описаны функции отображения категорий в виджете register_sidebar_widget() и контроля над виджетом register_widget_control().

function register_categories_widget() {
   register_sidebar_widget('Category Categorization Widget', 'categories_widget');
   register_widget_control('Category Categorization Widget', 'categories_widget_control' );
}

В этих функциях параметрически обращаемся к ф-циям построения элементов контроля виджета в админке categories_widget_control() и отображения виджета на сайдбаре categories_widget()

3) Рассмотрим функцию контроля виджетом categories_widget_control() (с пояснениями):
В нашем случае контролируем только два момента — отображение заголовка виджета с рубриками, и цвет рамки в изображениях рубрик.

function categories_widget_control() {
Поле заголовка виджета:
  if (!empty($_REQUEST['categories_widget_title'])) {
   update_option('categories_widget_title', $_REQUEST['categories_widget_title']);
  }
  $currentValue = get_option('categories_widget_title');
  ((trim($currentValue) == "")?$currentValue="Визуализация рубрик":$currentValue=$currentValue);
Заголовок (переменная categories_widget_title) вызывается функцией get_option('categories_widget_title'), в которую эта переменная передается параметрически при отображении рубрик на сайдбаре.
  echo 'Заголовок : <input type="text" name="categories_widget_title" Value="'.$currentValue.'"/>';

Поле для отображения цвета рамки изображения категорий/рубрик на сайдбаре:
  if (!empty($_REQUEST['categories_widget_border_color'])) {
   update_option('categories_widget_border_color', $_REQUEST['categories_widget_border_color']);
  }
  $currentColorValue = get_option('categories_widget_border_color');
  ((trim($currentColorValue) == "")?$currentColorValue="AAAAAA":$currentColorValue=$currentColorValue);
  echo '<br />';
  echo 'Цвет рамки: ';

Переменная categories_widget_border_color параметрически вызывается функцией get_option('categories_widget_border_color') при отображении рубрик на сайдбаре
  echo '#<input size="6" maxlength="6" type="text" name="categories_widget_border_color"
   value="'.$currentColorValue.'"

Когда курсор мыши покидает поле, отрабатывает событие onblur, которое показывает выбранный цвет в блоке ниже (наименование этого блока - BorderColorCategoryWidget)
   onblur="
    var divEl = document.getElementsByName(\'BorderColorCategoryWidget\');
    var i;
    for (i = 0; i < divEl.length; i++) {
     divEl[i].style.backgroundColor = \'#\'+this.value;
     divEl[i].innerText = \'color: #\'+this.value
    }
   "
  />';
  echo '<br />';
  echo '<small>Для просмотра изменения цвета
  уберите фокус мышки с элемента поля ввода цвета.</small>';

Блок, в котором отображается цвет выбранный для рамки изображения рубрик на сайдбаре:
  echo '<DIV name="BorderColorCategoryWidget"
   style="display: block;
    background-color: #'.$currentColorValue.';
    color: #FFFFFF;
    border: 0px solid #BBBBBB;
    margin 5px;
    padding: 5px;
    width: 100px;
    height: 20px;
    overflow: hidden;
    text-align: center;"> color: #'.$currentColorValue.' </DIV>';
}

4)Остается у нас функция отображения виджета на сайдбаре categories_widget()


function categories_widget($args) {
  extract($args);

  echo $before_widget;
  echo $before_title;
  //echo 'Рубрики:';

Заголовок рубрики получаем с помощью функции get_option('categories_widget_title'), где categories_widget_title - название опции, которую нужно получить. Эта опция определялась в функции контроля виджета categories_widget_control() в поле categories_widget_title.

  echo get_option('categories_widget_title');
  echo $after_title;
 if (is_page('main-page', 'Каталог виробів')) {
   /* Не выводим рубрики блоками */

В нашем случае дизайн шаблона не предусматривает сайдбара на главной странице. Поэтому вызываем ф-цию the_widget('WP_Widget_Categories'). 'WP_Widget_Categories' - название PHP класса, который отвечает за виджет. Базовый синтаксис: <?php the_widget('WP_Widget_Categories'); ?> нам ничего не выдаст.

   the_widget('WP_Widget_Categories');
 } else {
   /* вывод списка рубрик блоками */

Функция get_categories(&args) возвращает массив объектов, содержащих информацию о категориях. Параметры этой ф-ции могут быть переданы как массив, так и строка запроса (например: type=post&order=DESC). В нашем случае используем массив: 1)Передается таксономия, для которой нужны изображения; 2) hide_empty -> 0 - получаем пустые категории; 3) поле, по которому выполняем сортировку; 4) - порядок сортировки (по возрастанию).

   $categories = get_categories( array(
    'taxonomy' => 'category', // таксономия, для которой нужны изображения
    'hide_empty' => 0,
    'orderby' => 'name', // или'term_id', если надо.
    'order' => 'ASC'
   )); // получаем список рубрик
   $i = 0;
   foreach($categories as $category){
    if (($category->name == 'Без рубрики') || ($category->term_id == 1)) {
Если категория без рубрики (это почти всегда первая категория, у которой term_id == 1), то такую категорию не отображаем.
     // категорию "без рубрики" не выводим
    } else {
     $i = $i + 1;
Формируем строку с контентом для рубрики (категории) для данной итерации цикла (foreach).
     $category_link = sprintf( '<a href="%1$s" alt="%2$s" title="%3$s">%4$s</a>',
      esc_url( get_category_link( $category->term_id ) ),
      esc_attr( sprintf( __( 'View all posts in %s', 'textdomain' ), $category->name ) ),
      esc_attr( $category->name ),
      '<img src="'.z_taxonomy_image_url($category->term_id, 'thumbnail').'" width="96" height="96" STYLE="width:96px; height:96px; max-width: 96px; padding: 0px; margin: 0px;"><span STYLE="display: block;">'.esc_html( $category->name ).' ('.esc_html($category->count).')</span>'
     );
     // выводим описание и название рубрики
     if ($i % 2==0) {
В цикле определяем нечетную (каждую вторую) рубрику, которую помещаем внутрь блока с блочным отображением контента (display: block;), благодаря чему обеспечиваем отображение рубрик в 2 колонки.
      echo '<div STYLE="display: block; width: 100%;">';
     }
Рисуем блоки для рубрик (категорий).
outline: 1px solid #'.get_option('categories_widget_border_color').'; - определяет цвет рамки блока.
При помощи функции get_option('categories_widget_border_color') получаем опцию categories_widget_border_color (цвет рамки) для категории на данной итерации цикла.
     echo '<div STYLE="display: '.((fmod($i,2)==1)?'inline':'inline').'; width: 96px; height: 126px; font-size: 9px; color: #777; text-align: center; margin: 20px 20px 0px 0px; padding: 0px; outline: 1px solid #'.get_option('categories_widget_border_color').'; background-color: #DDD; overflow: hidden; float: left;">';
     echo ' ' . sprintf( esc_html__( '%s', 'textdomain' ), $category_link );
     echo '</div>';
     if ($i % 2==0) {
Закрывающий тег блока <DIV>...</DIV> для четной (второй) рубрики, определяющего вторую колонку.

      echo '</div>';
     }
    }
   }
 }
  echo $after_widget;
}

5) Ну, и если у вас хватило сил и терпения дочитать все это до конца, то еще раз ссылка на готовое решение этого плагина:
>>categories_block_widget.zip<<

В следующей статье разберем построение отображения рубрик (категорий) на главной странице сайта для темы The WP от ceewp в табличной реализации.

Пример такого сайта: Гончарна майстерня Етника пластична.

Comments are closed.