Частина 1. Спеціальний сайдбар для тем WordPress - Блог chomovva

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

Що можна розмістити в сайдбарі:

  • меню;
  • підписку на розсилку;
  • перелік категорій;
  • список популярних статей;
  • останні статті та коментарі до них;
  • посилання на профілі соціальних мереж власників сайту;
  • кошик або форму замовлення послуг.

Великий перелік можливих варіантів використання робить сайдбар важливим інструментом. Тому він часто зустрічається практично на всіх типах сайтів.

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

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

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

Спеціальний сайдбар в WordPress тем

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

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

Кожен із способів має свої плюси і мінуси. Що доцільніше використовувати сказати складно. Це визначається для кожного проекту індивідуально. У статті йдеться про третій спосіб, а саме додавання в нову або дочірню тему. Цей спосіб стане в нагоді розробникам сайтів і просунутим адміністраторам, які хочуть використовувати таку функцію в своїх сайтах та темах.

Опис принципу реалізація спеціальних сайдбарів

Сайдбарі реєструється в 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