Часть 1. Пользовательский сайдбар для WordPress темы - Блог chomovva

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

Что можно разместить в сайдбаре:

  • меню
  • подписку на рассылку
  • перечень категорий
  • список популярных статей
  • последние статьи и комментарии к ним
  • ссылки на профили социальных сетей владельцев сайта
  • корзину или форму заказа услуг.

Большой перечень возможных вариантов использования делает сайдбар важным инструментом. Поэтому он часто встречается практически на всех типах сайтов.

В системе WordPress сайдбары называют «Колонками», а информационные блоки в них – «Виджетами». По умолчанию в WordPress выводит один сайдбар для всех страниц либо один сайдбар для одного шаблона страницы, но при условии, что программист предусмотрел это в теме.

Часто на сайте может быть больше одного типа контента. Для того, чтобы предложить пользователям дополнительные материалы схожей тематики появляется необходимость в отдельном пользовательском сайдбаре.

Сайт университета – это одним из примеров использования настраиваемых пользовательских сайдбаров. Основная аудитория такого сайта состоит из абитуриентов и студентов. Для каждой из групп пользователей есть свой раздел в котором размещается специфическая информация. Так в разделе «Абитуриетн» можно разметить популярные специальности или факультеты. А в разделе «Студенту» информацию о стипендии, расписание занятий, новости связанные со студенческими проектами и прочее.

Пользовательский сайдбар в WordPress теме

Добавить пользовательский сайдбар в WordPress можно несколькими способами, это:

  • установить плагин из каталога WordPress (Easy Custom Sidebars, Content Aware Sidebars, Widget Options);
  • использовать тему, которая поддерживает пользовательские сайдбары;
  • создать новую тему или расширить функционал существующей создав дочернюю, которая поддерживает добавление пользовательских сайдбаров.

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

Описание принципа реализация пользовательских колонок в WordPress теме

Сайдбары регистрируется в WordPress теме во время событию widgets_init с помощью функции register_sidebar.

Функция register_sidebar() регистрирует сайдбар для виждетов и формат вывода для каждого виджета: html тег заголовка, html тег до и после виджета. Зарегистрировав сайдбар, в админ-панели появится место, куда можно помещать виджеты. Разместив виджеты на сайдбаре, их можно в дальнейшем вывести в шаблоне с помощью функции dynamic_sidebar.

add_action( 'widgets_init', 'resume_register_sidebars' );
function resume_register_sidebars(){
  register_sidebar( array(
    'name'          => __( 'Сайдбар подвала', TEXTDOMAIN ),
    'id'            => 'column',
    'description'   => '',
    'class'         => '',
    'before_widget' => '<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"><div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div></div>',
    'before_title'  => '<h3 class="widget__title title">',
    'after_title'   => '</h3>',
  ) );
}

По образцу и с этими же настройками зарегистрируем в цикле новые сайдбары. Информация о дополнительных колонках храниться в настройках темы. Это ассоциативный массив состоящий из:

  • имени сайдбара
  • внутреннего идентификатора
  • описания
  • дополнительного класса

Изменим функцию регистрации соответствующим образом.

function resume_register_sidebars() {
  // получаем массив с пользовательскими сайдбарами из настроек темы и добавляем из к уже имеющимся
  $columns = array_merge( [ [
    'name'          => __( 'Колонка', TEXTDOMAIN ),
    'id'            => 'column',
    'description'   => '',
    'class'         => '',
  ] ], get_theme_mod( 'register_columns', [] ) );
  // проходим по полученному массив циклом
  foreach ( $columns as $column ) {
    // регистрируем новые сайдбары
    register_sidebar( array(
      'name'             => $column[ 'name' ],
      'id'               => $column[ 'id' ],
      'description'      => $column[ 'description' ],
      'class'            => $column[ 'class' ],
      'before_widget'    => '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><div id="%1$s" class="widget %2$s">',
      'after_widget'     => '</div></div>',
      'before_title'     => '<h3 class="widget__title title">',
      'after_title'      => '</h3>',
    ) );
  }
}
add_action( 'widgets_init', 'resume_register_sidebars' );

Выбор сайдбара в публичной части сайта

Просто зарегистрировать дополнительные пользовательские сайдбары недостаточно. Следующим шагом будет “подмена” стандартной колонки на пользовательскую в публичной части сайта. Для этого воспользуемся хуками wp и sidebars_widgets. Последний позволяет изменять список сайдбаров и виджетов в них.

function resume_replace_default_column() {
  $custom_columns = '';
  // определяем какой шаблон темы сейчас будет генерироваться
  if ( is_singular( 'page' ) ) {
    // если это постоянная страница, то информация об отдельной пользовательской колонке хранится в метаданных для страницы
    $custom_columns = get_post_meta( get_the_ID(), '_custom_columns', true );
  } elseif ( is_singular( 'post' ) ) {
    // если просматривается пост, то информация о пользовательской колонке хранится в метаднных категории
    // получим список категорий текущего поста
    $categories = get_terms( [
      'taxonomy'   => 'category',
      'object_ids' => get_the_ID(),
      'fields'     => 'ids',
      'meta_key'   => '_custom_columns',
    ] );
    if ( is_array( $categories ) && ! empty( $categories ) ) {
      // если пост в категории, то получим информацию о колонке
      $custom_columns = get_term_meta( $categories[ 0 ], '_custom_columns', true );
    }
  } elseif ( is_category() ) {
    // если просматривается страница категории, то информация хранится в метаданных категорий
    $custom_columns = get_term_meta( get_queried_object()->term_id, '_custom_columns', true );
  }
  if ( ! empty( $custom_columns ) ) {
    // если необходима замена колонки, то регистрируем хук
    add_filter( 'sidebars_widgets', function( $sidebars ) use ( $custom_columns ) {
      // если сайдбар с таким идентификатом существует, то произведём замену
      if ( array_key_exists( $custom_columns, $sidebars ) ) {
        $sidebars[ 'column' ] = $sidebars[ $custom_columns ];
      }
      return $sidebars;
    }, 5, 1 );
  }
}
add_action( 'wp', 'resume_replace_default_column' );

Продолжение

  • Часть 2. Создание страницы настроек для добавление списка пользовательских сайдбаров
  • Часть 3. Добавление дополнительных полей при редактировании постоянных страниц и категорий.
голос
Рейтинг статьи
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x