Як додати нову область віджетів до вашої теми WordPress та як кодувати віджети

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

Давайте додамо область віджету нижче вмісту.

Створення області віджетів у файлі функцій вашої теми

Перший крок – настроїти область віджетів за допомогою функції register_widget().

Якщо ви використовуєте сторонню тему WordPress, для цього вам потрібно створити дочірню тему. Причина в тому, що якщо ви оновите тему в майбутньому, усі ваші зміни загубляться.

Якщо ви працюєте з власною темою, можете просто відредагувати тему.

Почніть з відкриття файлу functions.php вашої теми. Внизу файлу додайте цей код.

function kinsta_register_widgets() {
 
 register_sidebar( array(
  'name' => __( 'After Content Widget Area', 'kinsta' ),
  'id' => 'after-content-widget-area',
  'description' => __( 'Widget area after the content', 'kinsta' ),
  'before_widget' => '

<div id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</div>


',
  'before_title' => '

<h3 class="widget-title">',
  'after_title' => '</h3>


',

 ) );

}

add_action( 'widgets_init', 'kinsta_register_widgets' );

Тепер збережіть файл functions.php. Якщо ви перейдете до екрана віджетів або налаштування, ви знайдете нову область віджетів, доступну для додавання віджетів.

Але якщо ви додасте туди віджети, вони не відображатимуться на сторінці. Це тому, що вам потрібно додати код у файл шаблону теми.

Додавання віджету до файлу шаблону теми

Насамперед, потрібно з'ясувати, який файл шаблону теми вам потрібно використовувати.

• Якщо ви додаєте додаткову бічну панель, вам потрібно додати цей код у файл sidebar.php .
• Якщо ви додаєте область віджету до або після вмісту, потрібно додати його до будь-якого файлу шаблону теми, який виводить вміст.
• Якщо ви додаєте область віджету в заголовок, вам потрібно додати код файлу header.php.
• Якщо нова область віджетів призначена лише для однієї сторінки вашого сайту або для одного типу контенту, вам потрібно використовувати ієрархію шаблонів WordPress, щоб точно визначити, який файл шаблону потрібно використовувати / створити, а потім відредагувати. Так, наприклад, якщо ви хочете додати області віджетів на свою домашню сторінку, тоді потрібно створити файл передня сторінка.php і додати туди свою область віджетів.

Після того, як ви визначили, який файл шаблону потрібно редагувати і де саме вам потрібен код області віджетів, додайте наступний код. У випадку області віджету після вмісту додаємо її до файлу post.php и page.php у нашій темі:

if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>

 aside class="after-content widget-area full-width" role="complementary">
  <?php dynamic_sidebar( 'after-content-widget-area' ); ?>
 </aside>



<?php }
 

Збережіть ваш файл(и) шаблону.

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

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

Тепер, якщо ви подивитеся на свій сайт, то виявите, що всі віджети, додані вами в області віджетів, відображатимуться в потрібному місці. Якщо вони не потрібні, поверніться та відредагуйте файли шаблонів, переконавшись, що код знаходиться там, де вам потрібно. Можливо, доведеться відредагувати CSS, щоб все виглядало так, як ви хочете.

Як кодувати віджети за допомогою API віджетів

Тепер ви знаєте, як вибирати віджети для свого сайту, як додавати їх на свій сайт і як реєструвати нові бічні панелі або області віджетів. Наступний крок – навчитися створювати віджет WordPress.

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

У цьому прикладі покажемо, як кодувати справді простий віджет заклику до дії.

Огляд API віджетів

• Класи для створення нових віджетів.
• Функції реєстрації віджетів та їх розміщення на вашому сайті.
• Функції для скасування реєстрації віджетів, наприклад, із батьківської теми.

Тут використовуватимемо клас для створення віджету. Першим кроком є ​​створення плагіна для зберігання віджету.

Створіть плагін для вашого віджету WordPress

Щоб створити власний віджет, потрібно кодувати плагін. Не додавайте код для нового віджету до вашої теми, тому що віджети пов'язані з функціональністю, а не з відображенням. Якщо ви зміните свою тему в майбутньому, ви все одно зможете отримати доступ до цього виджету.

Почніть із створення порожнього плагіна. Створіть папку з плагінами у вашому каталозі wp-content/plugins та додайте до неї порожній файл. Дайте йому відповідне ім'я. Відкрийте цей файл та додайте цей код.

<?php
/**
 * Plugin Name: Kinsta Call to Action Widget
 * Plugin URI: https://rachelmccollin.com
 * Description: A simple call to action widget.
 * Version: 1.0
 * Author: Rachel McCollin
 * Author URI: https://rachelmccollin.co.uk
 */

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

Але якщо ви активуєте його, нічого не станеться, оскільки потрібно додати код у вашу плагін.

Створіть клас для віджету

Код віджету йде всередині класу. Так що далі додайте цей код:

class kinsta_Cta_Widget extends WP_Widget {

} 

Створіть функцію конструктора

Перше, що потрібно зробити всередині класу – це визначити функцію конструктора для створення віджету. Додайте цей код до фігурних дужок класу:

//widget constructor function

function __construct() {

 $widget_options = array (
  'classname' => 'kinsta_cta_widget',
  'description' => 'Add a call to action box with your own text and link.'
 );

 parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );

}

Це старт для будівництва віджету.

Дивіться також:

Що таке віджети WordPress та як їх використовувати для налаштування вашого сайту.

Створити форму для виведення віджету

Далі нам знадобиться форма, яка використовуватиметься екраном віджетів та налаштувачем для створення віджету. Додати цей код все ще всередині дужок.

//function to output the widget form

function form( $instance ) {

 $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
 $link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';
 $text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';
?>



 <label for="<?php echo $this->get_field_id( 'title'); ?>">Title:</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 esc_attr( $title ); ?>" />




 <label for="<?php echo $this->get_field_id( 'text'); ?>">Text in the call to action box:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" value="<?php echo esc_attr( $text ); ?>" />




 <label for="<?php echo $this->get_field_id( 'link'); ?>">Your link:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" />


<?php }

Це дає користувачам форму, яку вони можуть використовувати для додавання тексту та посилання на вікно заклику до дії.

Створити функцію для збереження віджету

Тепер потрібно зберегти все, що вводиться у цю форму. Додати код:

//function to define the data saved by the widget

function update( $new_instance, $old_instance ) {
 $instance = $old_instance;
 $instance['title'] = strip_tags( $new_instance['title'] );
 $instance['text'] = strip_tags( $new_instance['text'] );
 $instance['link'] = strip_tags( $new_instance['link'] );
 return $instance;          

} 

Це збереже введені користувачами дані налаштування віджету.

Створіть функцію для виведення віджету

Тепер потрібно додати код, який відображатиме віджет на сайті. Знову додайте це до фігурних дужок:

//function to display the widget in the site

function widget( $args, $instance ) {
 //define variables
 $title = apply_filters( 'widget_title', $instance['title'] );
 $text = $instance['text'];
 $link = $instance['link'];

 //output code
 echo $args['before_widget'];
 ?>

 

<div class="cta">
  <?php if ( ! empty( $title ) ) {
   echo $before_title . $title . $after_title;
  };
  echo '<a href="' . $link . '">' . $text . '</a>';
  ?>
 </div>



 <?php
 echo $args['after_widget'];

}

Тепер збережіть файл плагіна. Перейдіть на екран віджетів, і ви побачите віджет Заклик до дії.

Якщо ви додасте його в область віджетів і додасте текст і посилання на нього, віджет з'явиться на сайті.

Можливо зараз це виглядає не дуже добре. Просто потрібно для стилізації додати трохи CSS.

Додавання CSS у віджет

Щоб додати CSS у вашу плагін, потрібно створити таблицю стилів і поставити її в чергу у своєму плагіні. Додайте цей код до файлу плагіна перед класом.

function kinsta_widget_enqueue_styles() {

 wp_register_style( 'widget_cta_css', plugins_url( 'css/style.css', __FILE__ ) );
 wp_enqueue_style( 'widget_cta_css' );

}
add_action( 'wp_enqueue_scripts', 'kinsta_widget_enqueue_styles' ); 

Тепер вам потрібно додати файл style.css у папку плагіна і додати до нього будь-який стиль.

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

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

Якщо ви хочете побачити код для розглянутого цього плагіна, включаючи стилі, знайдіть його на Github.
Віджети WordPress можуть пожвавити ваш сайт, отримати більше реєстрацій або перетворювати відвідувачів на клієнтів. Ви можете вставити віджети WordPress в будь-яку існуючу область віджетів або додати додаткові області віджетів, щоб додавати віджети, куди вам хочеться.
WordPress поставляється з кількома попередньо встановленими плагінами, інші – можете встановити за допомогою плагінів. Але якщо ви почуваєтеся комфортно, то можете кодувати власні віджети за допомогою API віджетів.

Джерело: kinsta.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/