Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 29.03.2024)
440790
осіб
347
літаків
325
гелікоптерів
6922
танків
13264
ББМ
10991
артилерія
735
ППО
1023
РСЗВ
14645
машин
26
кораблі і катери
Розуміння і використання віджетів у WordPress
Опубліковано Оновлено: 23.07.2017

Розуміння і використання віджетів у 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.

 

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

 

 

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься. Обов’язкові поля позначені *