Розуміння і використання віджетів у WordPress

Віджети дозволяють додавати і розширювати функціональність сайту на движку WordPress. Їх можна використовувати для додавання різних меню, списків, простого тексту, програмного коду та багато чого іншого в потрібні області сайту. І ці області не обмежуються тільки бічними панелями (тобто сайдбарами). Чимало сучасних тем для Вордпрес спроектовано так, що області віджетів доступні практично у всіх структурних місцях сайту: хедері, футері, сайдбарі, до, після і всередині контенту.

Ця стаття покликана допомогти початківцям Вордпресу розібратися з віджетами і навчитися створювати стільки віджетів, скільки буде необхідно. Якщо вам мало вбудованих в дефолтні теми Вордпрес віджетів (таких як Календар, Теги, Категорії і т.д.) і ви хочете мати більший вплив на відображення вашого сайту – ймовірно і вам ця стаття стане в нагоді.

Відображення віджета: а) реєстрація області віджету

Є два основні кроки для початку відображення нового віджету в WordPress. По-перше, потрібно зареєструвати нову область віджету у файлі functions.php шаблону, по-друге, потрібно викликати цю нову область нового віджету десь в потрібному файлі вашої теми.

Спочатку потрібно вирішити, де ви хочете бачити новий віджет і яке завдання він повинен вирішувати. Варіантів маса: це може бути віджет показу останніх 5 статей у футері, віджет рекламного банера в шапці сайту, віджет погоди, віджет останніх коментарів, пошук і т.д. і т.п.

Як приклад, ми створимо нову область віджету, включимо її відображення в шаблоні, а потім створимо новий екземпляр віджету під назвою «Віджет для реклами» і будемо показувати його в новій області в сайдбарі.

Щоб зареєструвати область віджета створіть у файлі functions.php вашої теми нову функцію з унікальним ім’ям. Ця функція буде викликати системну функцію Вордпрес register_sidebar.

Приклад коду:

function registraciya_oblasti_widgeta() {
	register_sidebar( array(
		'name'          => 'Нова область віджетів',
		'id'            => 'mesto-dlya-reklami',
		'description'   => 'Опис: Це нова область для віджетів, в котрій ми будемо потім показувати віджет з рекламою.',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'registraciya_oblasti_widgeta' );

P.S. Ваша тема вже може містити функцію, яка викликає реєстрацію області, тому спочатку перевірте наявність функції, що викликає register_sidebar. Якщо вона існує, тоді реєстрацію нової області віджета можна зробити простим копіюванням/вставкою ділянки коду register_sidebar (....); і змінивши потім ім’я, опис і ID нової області. Зразок можете підглянути в дефолтній темі для WordPress Twenty Fifteen в файлі functions.php у функції twentyfifteen_widgets_init().

Після того як ви додали нову область, можете перевірити її появу в адмінці сайту: перейдіть в Консоль – Зовнішній вигляд – Віджети і там повинен з’явитися новий блок «Нова область віджетів».

Відображення віджета: б) вивід області віджету в шаблоні сайту

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

Аналізуємо поставлену задачу і вирішуємо, що найбільш підходящим місцем для майбутнього віджета з рекламою буде бічна колонка сайту – сайдбар. У нашій «піддослідній» темі Twenty Fifteen, сайдбар виводиться окремим файлом-шаблоном, а саме sidebar.php. Відкриваємо цей файл і додаємо область віджету в потрібне місце, тобто після підключення наявної області віджетів з ідентифікатором «sidebar-1».

Приклад коду:

...
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
			<div id="widget-area" class="widget-area" role="complementary">
				<?php dynamic_sidebar( 'sidebar-1' ); ?>
			</div><!-- .widget-area -->
		<?php endif; ?>

<!-- Далі йде підключення нашої нової області -->
<?php if ( is_active_sidebar( 'mesto-dlya-reklami' ) ) : ?>
			<div class="widget-s-reklamoy">
				<?php dynamic_sidebar( 'mesto-dlya-reklami' ); ?>
			</div>
		<?php endif; ?>
....

У цьому прикладі коду ми використовуємо дві вбудовані функції WordPress: is_active_sidebar (яка перевіряє чи активна область віджетів і чи є в ній додані віджети) та dynamic_sidebar (яка виводить всі додані в область віджети). Умовою if перевіряємо активність області віджетів з ідентифікатором “mesto-dlya-reklami” і якщо умова повертає true, тобто область є і в ній є віджети, виводимо область в блоці div з класом widget-s-reklamoy.

Нічого складного!

Тепер можемо перевірити відображення віджетів в цій області віджетів, шляхом додавання в неї тестових віджетів (поки ми не створили новий цільовий віджет для реклами). Для цього в адмінці перейдіть в Консоль – Зовнішній вигляд – Віджети і простим перетягуванням з лівої колонки «Доступні віджети» перемістіть віджет Текст в блок «Нова область віджетів» у правій колонці. Впишіть будь-який текст та натисніть Зберегти. Оновіть фронтенд сайту і в боковій колонці повинен з’явитися доданий текст.

Подібним чином ми можемо тепер створювати нові області віджетів в потрібних нам місцях сайту і додавати туди цільові віджети. Реєструєте область віджета і підключаєте її в потрібному місці і в потрібному шаблоні (наприклад, щоб відображати область у футері сайту – потрібно редагувати файл теми footer.php і так далі). Потім через Консоль «вкладаєте» в цю область необхідні віджети, щоб вони з’явилися на самому сайті.

Створення нового віджету

У цьому розділі ми створимо новий екземпляр віджету, який будемо використовувати для показу рекламного банера в сайдбарі сайту. Після створення віджета він стане активним в лівій колонці «Доступні віджети» і його можна буде «вкладати» в будь-які наявні області віджетів на сайті.

Для створення нового екземпляра віджета потрібно виконати кілька кроків:

Зареєструвати віджет
Створити Клас для зберігання функцій віджета
Написати функцію construct для конструювання віджета
Написати функцію widget для виведення віджету у Front-end
Написати функцію form для відображення форми в меню Зовнішній вигляд – Віджети
Написати функцію update, щоб віджет можна було оновлювати з форми

Базова структура примірника віджета в WordPress виглядає так:

class Reklamniy_Widget extends WP_Widget {

  function __construct() { }
  function widget($args, $instance) { }
  function form($instance) { }
  function update($new_instance, $old_instance) { }

}

function registraciya_widgeta_function() {
  register_widget('Reklamniy_Widget');
}
add_action( 'widgets_init', 'registraciya_widgeta_function' );

Давайте більш детально розглянемо цей код на практичному прикладі (показ рекламного блоку 300х600 Google AdSense за допомогою віджета). Нижче представлено робочий код подібного віджету з коментарями.

<?php
/*
Plugin Name: Рекламний віджет
Description: Віджет для показу рекламного блоку 300x600 Google AdSense в бічній колонці сайту
Version: 1.0
Author: SebWeo
Author URI: https://sebweo.com
*/

/* Клас віджета. Цей клас обробляє все те, що повинно бути оброблено для віджета: налаштування, форму, відображення в Front-end і оновлення налаштувань */
class Reklamniy_Widget extends WP_Widget {

  function __construct() {
    parent::__construct(

     /* унікальний ID віджета */
     'sebweo_reklamniy_widget',

     /* заголовок віджета - відображається в налаштуваннях в меню Віджети */
     __('Reklamniy Blok', 'sebweo-loc-domen' ),

     /* опції віджета, тут ми передаємо клас CSS, і опис для даного віджету */
     array (
       'classname' => 'reklamniy-widget',
       'description' => __( 'This widget displays the ads in the site sidebar', 'sebweo-loc-domen' )
     )

   );
  }


  /* функція для відображення віджета у фронтенді сайту */
  function widget($args, $instance) {
   extract($args);
   /* заголовок */
   $title = apply_filters ('widget_title', $instance ['title']);

   /* унікальний код рекламодавця, в форматі ca-pub-xxxxxxxxxxxxxxxx */
   $data_ad_client = $instance['data_ad_client'];

   /* обраний слот для рекламного коду */
   $data_ad_slot = $instance['data_ad_slot'];

   echo $before_widget;

   if ( $title ){
     echo '<aside class="widget reklamniy-widget">'."\n";
     echo '<h4 class="widget-title">'.$title.'</h4>';
   } else {
     echo '<aside class="widget reklamniy-widget">';
   }
   /* нижче виводимо код рекламного оголошення */
   ?>

   <div class="google-ad-300x600">
     <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
     <!-- Ads300x600 -->
     <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px"
       data-ad-client="<?php echo $data_ad_client; ?>"
       data-ad-slot="<?php echo $data_ad_slot; ?>">
     </ins>
     <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
   </div>

   <?php
   echo $after_widget;
  }


   /* функція відображає форму для збереження налаштувань віджета в меню Віджети */
   function form($instance) {
    /* налаштування за замовчуванням */
    $defaults = array(
      'title' => __( 'Zagolovok', 'sebweo-loc-domen' ),
      'data_ad_client' => 'ca-pub-xxxxxxxxxxxxxxxx',
      'data_ad_slot' => '1234567890'
    );
    $instance = wp_parse_args((array) $instance, $defaults);

    /* нижче йде html-розмітка форми */
    ?>
    <p>
      <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e( 'Title:' , 'sebweo-loc-domen' ); ?></label>
      <input class="widefat" type="text" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $instance['title']; ?>" />
    </p>
    <p>
      <label for="<?php echo $this->get_field_id('data_ad_client'); ?>"><?php _e('Google ad-client number:', 'sebweo-loc-domen'); ?></label>
      <input type="text" id="<?php echo $this->get_field_id( 'data_ad_client' ); ?>" name="<?php echo $this->get_field_name( 'data_ad_client' ); ?>" value="<?php echo esc_attr( $instance['data_ad_client'] ); ?>" />
    </p>
    <p>
      <label for="<?php echo $this->get_field_id('data_ad_slot'); ?>"><?php _e('Google ad-slot number:', 'sebweo-loc-domen'); ?></label>
      <input type="text" id="<?php echo $this->get_field_id( 'data_ad_slot' ); ?>" name="<?php echo $this->get_field_name( 'data_ad_slot' ); ?>" value="<?php echo esc_attr( $instance['data_ad_slot'] ); ?>" />
    </p>
    <?php
   }


    /* функція для збереження змін в налаштуваннях віджету */
    function update($new_instance, $old_instance) {
      $instance = $old_instance;
      $instance['title'] = strip_tags( $new_instance['title'] );
      $instance['data_ad_client'] = strip_tags($new_instance['data_ad_client']);
      $instance['data_ad_slot'] = strip_tags($new_instance['data_ad_slot']);
      return $instance;
    }

}

/* функція реєстрації нового примірника віджета */
function registraciya_widgeta_function() {
  register_widget('Reklamniy_Widget');
}
/* за допомогою хука widgets_init викликаємо функцію реєстрації віджета */
add_action( 'widgets_init', 'registraciya_widgeta_function' );

?>

Просто скопіюйте вище вказаний код і вставте його в текстовий файл ReklamniyWidget.php і потім завантажте його в папку плагінів сайту за адресою /wp-content/plugins/. Потім активуйте плагін в Консолі і почніть експериментувати з віджетом.

В налаштуваннях віджета зараз є 3 опції: Заголовок віджета, Унікальний номер рекламного клієнта Google AdSense, Унікальний номер слота для розміщення рекламного блоку. Дві останні опції ви можете дізнатися при створенні рекламного оголошення в сервісі Google AdSense.

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