Виджеты в WordPress - это один из вариантов оформления сайта. В основном виджеты позволяют управлять контентом в боковой колонке или футере сайта. Но их расположение на самом деле очень зависит от того места, где в теме заявлено место для размещения виджетов, а внешний вид - от стилей темы.
Для создания виджетов WordPress вы можете использовать API виджетов. Здесь мы будем рассматривать создание виджета в WordPress в классическом стиле, т.е. в том виде, который существовал до WordPress версии 5.8. Поэтому, для начала вам нужно будет отключить блочный редактор виджетов, добавив в functions.php такую строку:
| 1 | add_filter('use_widgets_block_editor', '__return_false' ); |
Немного о виджетах WordPress
Обычно виджеты WordPress добавляют контент и функции в боковые панели, которые называют сайдбарами. Они пришли еще с момента, когда сайты на WordPress делились на основную область и область сайдбара, т.е. боковой колонки. Поэтому часть функций, которые мы будем использовать, содержать в себе это название - sidebar.
Сейчас уже области виджетов вашей темы могут быть где угодно - в середине страницы, внизу или вверху, в области хедера или футера - главное верно добавить код и использовать определенные id виджетов.
Виджеты в свое время были созданы для того, чтобы предоставить администратору сайта простой и легкий в использовании способ управления дизайном и структурой темы WordPress, не требуя от него знания программирования.
Большинство виджетов WordPress предлагают в качестве настройки форму с разными типами полей для заполнения, возможностью вставить изображение или выбрать категорию постов, например.
Мы будем создавать наш виджет в такой последовательности:
- Регистрация виджета в файле functions.php
- Регистрация области виджета в файле темы
- Создание файла виджета. Подключение его к functions.php
- Использование класса виджета
- Плагин для управления виджетами
- Заключение
В этой статье мы создадим виджет для вывода CTA на главной странице сайта, который предполагает использование нескольких текстовых полей. Мы рассмотрим различные функции, составляющие работоспособность виджета, чтобы понять, как в принципе работают виджеты WordPress.
Этот виджет будет довольно простым. Он будет содержать текст, кнопку и ссылку, привязанную к клику по кнопке. Также мы добавим возможность выбора светлого и темного дизайна.
Регистрация виджета в файле functions.php
В главном функциональном файле темы мы должны сообщить WordPress, что у нас будет некая область для виджетов с именем, id, тегом и заголовком, которые позволят в дальнейшем стилизовать эту область на странице сайта.
Для регистрации виджета в файле functions.php используют функцию register_sidebar(), которую можно прикрепить к хуку widgets_init:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | add_action( 'widgets_init', 'register_my_widgets' ); function register_my_widgets(){ register_sidebar( array( 'name' => __('Frontpage CTA Area', 'mytheme'), 'id' => "frontpage-cta", 'description' => __('CTA Area in the middle of Frontpage', 'mytheme'), 'class' => '', 'before_widget' => '<section id="%1$s" class="py-5 cta-section light %2$s">\n<div class="container py-3">', 'after_widget' => "</div></section>\n", 'before_title' => '<h2 class="cta-title">', 'after_title' => "</h2>\n", 'before_sidebar' => '', 'after_sidebar' => '', ) ); } |
Наша тема предполагает использование некоторых классов Bootstrap, но вы можете указывать свои собственные. Кроме того, всю разметку мы разместим в самом виджете в атрибутах 'before_widget' и 'after_widget', т.к. с помощью виджета мы будем менять тему и внешний вид нашего CTA в стилях.
Уже после сохранения изменений в functions.php можно перейти в меню Внешний вид → Виджеты и убедиться в существовании указанной области. Добавим сразу в нее какой-нибудь уже существующий виджет - и сможем вскоре увидеть результат на одной из страниц сайта.
Важным моментом тут является указание id виджета, т.к. именно по нему в дальнейшем будет определяться, что мы выводим на странице, где эта область будет указана.
Регистрация области виджета в файле темы
Поскольку виджет предназначен для вывода CTA (Call to Action, или призыва к действию), то и размещать его мы будем на главной странице, за которую в структуре файлов темы WordPress отвечает файл front-page.php. Где именно вы будете это делать, очень сильно зависит от структуры самой страниц. Обычно в классических темах ее контент берется не столько из текста страницы, установленной в настройках WordPress, как главная, сколько из настроек или разнообразных виджетов.
В страницах, сформированных на основе конструкторов, таких, как Elementor, например, смысл в таком виджете теряется, т.к. все это можно сделать в визуальном редакторе. То же касается и современного редактора Гутенберг.
Для регистрации области виджета в файле front-page.php нашей темы мы будем использовать функции is_active_sidebar() и dynamic_sidebar():
| 1 2 3 4 5 6 | <?php if ( is_active_sidebar( 'frontpage-cta' ) ) : ?> <?php dynamic_sidebar( 'frontpage-cta' ); ?> <?php endif ?> |
Тот виджет с кодом, который мы добавили и сохранили в предыдущем шаге, даст нам следующий внешний вид на главной странице сайта:
Создание файла виджета. Подключение его к functions.php
Можно, конечно, разместить весь код, приведенный ниже в functions.php, но если виджетов будет несколько или код будет сложным, это здорово "замусорит" наш основной функциональный файл. Поэтому мы создадим папку widgets, а в ней разместим файл widgets.php. И пусть пока в нем у нас будет описание одного виджета, но в будущем вы можете добавить туда и другие виджеты.
В файле functions.php нам нужно подключить этот файл:
| 1 | require get_template_directory() . '/widgets/widgets.php'; |
Теперь тот код, который вы найдете ниже мы пишем в widgets/widgets.php.
Использование класса виджета
Самый простой способ создать виджет WordPress — это наследовать WP_Widgetкласс. Таким образом, вы можете использовать встроенные функции для обновления виджета, отображения виджета и создания интерфейса администратора для виджета.
Чтобы полностью понять, как работают виджеты, мы создадим и рассмотрим пустой виджет. Затем мы определим каждую функцию, составляющую виджет, и посмотрим, как они работают вместе для создания рабочего виджета.
Определение нашего виджета в виде класса
Пока что мы создадим пустую оболочку с базовыми функциями, чтобы разобраться, как они работают.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <?php class Frontpage_CTA_Widget extends WP_Widget { // конструктор виджета public function __construct(){ } public function widget( $args, $instance ) { // выводит содержимое виджета } public function form( $instance ) { // создает внутреннюю форму } // Обновление виджета, заменяющее старые данные новыми public function update( $new_instance, $old_instance ) { // обрабатывает параметры виджета при сохранении } } add_action( 'widgets_init', function(){ register_widget( 'Frontpage_CTA_Widget' ); }); |
widgets_init.Функции в деталях
Рассмотрим каждую функцию более подробно:
- __construct() - функция для регистрации виджета в WordPress.
- widget() - эта функция отвечает за внешнее отображение виджета. Он выводит содержимое виджета
- update() - функция, которая обрабатывает параметры виджета при сохранении. Используйте эту функцию для обновления виджета (опция). Эта функция принимает два параметра:
$new_instance– значения, только что отправленные на сохранение. Эти значения будут поступать из формы, определенной в методе form().$old_instance– ранее сохраненные значения из базы данных
Обязательно очистите (sanitize) в функции update() все отправленные пользователем значения. Из них нужно убрать лишние символы, теги, где они не разрешены, и атрибуты, перед отправкой в
базу данных. Для этого можно использовать функцию esc_attr(),strip_tags()илиwp_kses_post(). - form() - эта функция используется для определения внутренней формы виджета, которую вы видите на панели виджетов на информационной панели. Эта форма позволяет пользователю настраивать заголовок и другие поля виджета. Эта функция принимает один параметр:
$instance– ранее сохраненные значения из базы данных
Теперь опишем конструктор.
Конструктор виджета
Конструктор позволяет нам инициализировать наш виджет, перезаписав родительский класс (стандартный WP_Widgetкласс).
| 1 2 3 4 5 6 7 8 9 10 | public function __construct(){ parent::__construct( 'frontpage_cta_widget', __( 'Frontpage CTA Widget', 'mytheme' ), array( 'classname' => 'cta', 'description' => __( 'CTA Widget to make your site better.', 'mytheme' ) ) ); } |
В приведенном выше коде мы вызываем функцию конструкции родительского класса WP_Widget и передаем ей следующие аргументы:
- Базовый идентификатор (Base ID -
'frontpage_cta_widget') — уникальный идентификатор виджета. Должен быть в нижнем регистре. Если оставить пустым, будет использоваться часть имени класса виджета. - Имя (Name -
__( 'Frontpage CTA Widget', 'mytheme' )) — это имя виджета, отображаемого на странице конфигурации виджетов (в админке, или панели управления WordPress). - Необязательный массив (array) , содержащий имя класса и описание. Описание отображается на странице конфигурации (в панели управления WordPress).
На данный момент мы можем уже увидеть наш виджет в админ-панели, но он пока неработоспособен. Для начала добавим форму.
Создание внутренней формы виджета
Внутренняя форма будет состоять из нескольких полей — заголовка, основного текста, поля для текста, выводимого на кнопке и ссылки привязанной к этой кнопке. Плюс выпадающий список, который позволит нам сделать стилизацию нашего блока в разных цветах.
На скриншоте формы видно, как она будет выглядеть в админ-панели в меню Внешний вид → Виджеты :
Чтобы сгенерировать приведенную выше форму, мы начнем с пока что чистого HTML, а затем заменим некоторые значения атрибутов некоторыми переменными и выражениями PHP. Ниже приведен HTML-код для создания всех полей формы в функции form():
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | public function form( $instance ) { // создает внутреннюю форму ?> <p> <label for="title"><?php _e("Title", "mytheme") ?></label> <input class="widefat" id="title" name="title" type="text" value="" placeholder="<?php _e("CTA title here", "mytheme") ?>"> </p> <p> <label for="cta_text"><?php _e("CTA text", "mytheme") ?></label> <textarea class="widefat" rows="5" cols="20" id="cta_text" name="cta_text" placeholder="<?php _e("CTA main text here", "mytheme") ?>"></textarea> </p> <p> <label for="button_text"><?php _e("Button text", "mytheme") ?></label> <input class="widefat" id="button_text" name="button_text" type="text" value="" placeholder="Read More"> </p> <p> <label for="button_link"><?php _e("Button Link", "mytheme") ?> (<?php _e("You need to add button link", "mytheme")?>)</label> <input class="widefat" id="button_link" name="button_link" type="url" value="" placeholder="https://mysite.com/somepage"> </p> <p> <label for="cta_design"><?php _e("CTA Design", "mytheme") ?></label> <select class="widefat" id="cta_design" name="cta_design"> <option value="light"><?php _e("Light", "mytheme") ?></option> <option value="dark"><?php _e("Dark", "mytheme") ?></option> </select> </p> <?php } |
Вот теперь мы можем добавить виджет в заготовленную для него область. Увидим следующее:
Чтобы перейти от этого к нашему окончательному коду функции form(), нам нужно будет сделать некоторые атрибуты выше динамическими, а именно имя, идентификатор и атрибут for метки (который должен соответствовать идентификатору HTML, для которого служит эта метка). Мы также заменим значение текстового поля, кнопки и ссылки для кнопки, а также содержимое поля textarea динамическими значениями из базы данных, если они уже были сохранены.
Вот код, который у нас получится:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | public function form( $instance ) { // создаем внутреннюю форму //получаем сохраненные данные из БД $title = ! empty( $instance['title'] ) ? esc_attr( $instance['title']) : ''; $cta_text = ! empty( $instance['cta_text'] ) ? esc_attr( $instance['cta_text'] ) : ''; $button_text = ! empty( $instance['button_text'] ) ? esc_attr( $instance['button_text'] ): ''; $button_link = ! empty( $instance['button_link'] ) ? esc_attr( $instance['button_link'] ): ''; $cta_design = esc_attr( $instance['cta_design'] ); $options = ['light' => __('Light', 'mytheme'), 'dark' => __('Dark', 'mytheme'), ]; ?> <p> <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e("Title", "mytheme") ?></label> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" placeholder="<?php _e("CTA title here", "mytheme") ?>"> </p> <p> <label for="<?php echo $this->get_field_id('cta_text'); ?>"><?php _e("CTA text", "mytheme") ?></label> <textarea class="widefat" rows="5" cols="20" id="<?php echo $this->get_field_id('cta_text'); ?>" name="<?php echo $this->get_field_name('cta_text'); ?>" placeholder="<?php _e("CTA main text here", "mytheme") ?>"><?php echo $cta_text; ?></textarea> </p> <p> <label for="<?php echo $this->get_field_id('button_text'); ?>"><?php _e("Button text", "mytheme") ?> (<?php _e("You need to add button link", "mytheme")?>)</label> <input class="widefat" id="<?php echo $this->get_field_id('button_text'); ?>" name="<?php echo $this->get_field_name('button_text'); ?>" type="text" value="<?php echo $button_text ?>" placeholder="Read More"> </p> <p> <label for="<?php echo $this->get_field_id('button_link'); ?>"><?php _e("Button Link", "mytheme") ?></label> <input class="widefat" id="<?php echo $this->get_field_id('button_link'); ?>" name="<?php echo $this->get_field_name('button_link'); ?>" type="url" value="<?php echo $button_link ?>" placeholder="https://mysite.com/somepage"> </p> <p> <label for="<?php echo $this->get_field_id('cta_design'); ?>"><?php _e("CTA Design", "mytheme") ?></label> <select class="widefat" id="<?php echo $this->get_field_id('cta_design'); ?>" name="<?php echo $this->get_field_name('cta_design'); ?>"> <?php foreach ( $options as $value => $text ): ?> <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $instance['cta_design'], $value ); ?>> <?php echo esc_html( $text ); ?> </option> <?php endforeach; ?> </select> </p> <?php } |
Приведенный выше код обращается к двум переменным и присваивает ранее сохраненные значения из базы данных — $title, $cta_text и другие. Затем мы используем esc_attr() для кодирования возвращаемых значений и во избежание нарушения кода. Затем мы отображаем атрибут $title в атрибуте value текстового поля для заголовка, $cta_textкак содержимое поля textarea и т.д. Самым интересным здесь является отображение выбранного в select варианта, т.к. для этого нужно задействовать массив $options и функцию selected( $instance['cta_design'], $value ).
В приведенном выше коде вы заметите два метода, которые, вероятно, являются для вас новыми: get_field_id() и get_field_name().
- get_field_id() — принимает имя поля в качестве аргумента и создает атрибуты
idдля использования в полях функцииform(). Это гарантирует, что возвращаемый идентификатор поля уникален. - get_field_name() — принимает имя поля в качестве аргумента и создает атрибут
nameдля использования в полях функцииform(). Это гарантирует уникальность возвращаемого имени поля.
Атрибут тегов меток forзакодирован так, чтобы отображать значение идентификатора элементов, к которому они относятся.
Класс widefatиспользуется для того, чтобы поля вашего виджета выглядели так же, как и другие поля на панели управления WordPress.
Обновление виджета
Чтобы обновить наш виджет, мы напишем соответствующий код в методе update(). Вот наш код:
| 1 2 3 4 5 6 7 8 9 10 | public function update( $new_instance, $old_instance ) { // обрабатывает параметры виджета при сохранении $instance = $old_instance; $instance['title'] = strip_tags( $new_instance['title'] ); $instance['cta_text'] = wp_kses_post( $new_instance['cta_text'] ); $instance['button_text'] = strip_tags( $new_instance['button_text'] ); $instance['button_link'] = strip_tags( $new_instance['button_link'] ); $instance['cta_design'] = strip_tags( $new_instance['cta_design'] ); return $instance; } |
Вышеупомянутая функция принимает два параметра – $new_instanceи$old_instance
- $new_instance — это массив, содержащий новые настройки (данного экземпляра виджета), которые только что были введены пользователем через внутреннюю форму, которую мы определяем в функции form().
- $old_settings — массив, содержащий старые настройки. Это значения, которые в данный момент хранятся в базе данных.
Функция update() возвращает массив настроек для сохранения или false для отмены сохранения.
В приведенном выше коде мы присваиваем данные из $old_instance переменной $instance и заменяем ее ключи новыми значениями из $new_instance. Возвращая обновленный массив, мы фактически обновляем настройки виджета.
Функция strip_tags()удаляет теги HTML и PHP из переданной ей строки. Мы включаем эту функцию, чтобы избежать ситуации, когда пользователи вашей темы не могут закрыть теги, введенные через внутреннюю форму, что приводит к поломке вашего сайта (неправильной визуализации).
Определение внешнего интерфейса. Формат вывода на странице сайта
Функция widget()отвечает за внешнее отображение виджета. Он принимает два параметра – $argsи $instance.
$args— это массив, передаваемый в функциюregister_sidebar()при определении боковой панели/области виджетов, в которой размещается виджет. Массив содержит определения открывающих и закрывающих тегов самого виджета и заголовка виджета.$instance— массив, содержащий настройки для конкретного экземпляра виджета. Эти настройки будут получены из базы данных.
Мы используем теги, упомянутые выше, в окончательном коде виджета ниже:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | public function widget( $args, $instance ) { // выводит содержимое виджета $cta_design = esc_attr( $instance['cta_design'] ); extract( $args ); $before_widget = preg_replace('/light/', $cta_design, $before_widget); $title = apply_filters( 'widget_title', $instance['title'] ); $cta_text = $instance['cta_text']; $button_text = $instance['button_text'] ; $button_link = $instance['button_link'] ; echo $before_widget; if ( $title ) { echo $before_title . $title . $after_title; } if ( $cta_text ) echo $cta_text; if ( $button_link && $button_text) echo '<a class="btn btn-primary mt-3" href="'.$button_link.'">'.$button_text.'</a>'; echo $after_widget; } |
В приведенном выше коде мы наконец-то описываем интерфейс нашего виджета. Наш виджет выводит заголовок и текст, который мы можем обернуть в теги. Для заголовка виджета у нас были описаны теги внутри функции register_my_widgets() в functions.php.
Кнопку и ссылку мы будем выводить только в том случае, если у нас заполнены оба поля.
В коде мы используем функцию extract(), которая принимает ассоциативный массив и возвращает его ключи в виде переменных. Это позволяет нам выводить $before_widget вместо $args['before_widget'], тем самым немного упрощая наш код. Она похожа на деструктуризацию в JavaScript, хоть и с несколько иным синтаксисом.
Как раз для этой переменной мы заменяем класс light, который установлен для section по умолчанию, на dark, если он выбран в виджете в качестве варианта дизайна.
Окончательный результат на реальном веб-сайте будет выглядеть примерно так в зависимости от выбора варианта дизайна:
Для изменения стилей в файл style.css нужно добавить немного кода:
| 1 2 3 4 5 6 7 8 | /*-- CTA Widget --*/ .cta-section.dark { background-color: #211E3B; color: #fff; } .cta-section.dark h2{ color: #fff; } |
Класс .cta-section мы описали при регистрации виджета в functions.php.
Окончательный код
Дочитали до этого места? Молодец! У вас бонус: здесь вы найдете весь код, который нужно поместить в файл widgets.php в папке widgets, чтобы не копировать его по частям.
Вот окончательный код:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | <?php class Frontpage_CTA_Widget extends WP_Widget { // конструктор виджета public function __construct(){ parent::__construct( 'frontpage_cta_widget', __( 'Frontpage CTA Widget', 'mytheme' ), array( 'classname' => 'cta', 'description' => __( 'CTA Widget to make your site better.', 'mytheme' ) ) ); } public function widget( $args, $instance ) { // выводит содержимое виджета $cta_design = esc_attr( $instance['cta_design'] ); extract( $args ); $before_widget = preg_replace('/light/', $cta_design, $before_widget); $title = apply_filters( 'widget_title', $instance['title'] ); $cta_text = $instance['cta_text']; $button_text = $instance['button_text'] ; $button_link = $instance['button_link'] ; echo $before_widget; if ( $title ) { echo $before_title . $title . $after_title; } if ( $cta_text ) echo $cta_text; if ( $button_link && $button_text) echo '<a class="theme-btn mt-3" href="'.$button_link.'">'.$button_text.'</a>'; echo $after_widget; } public function form( $instance ) { // создаем внутреннюю форму //получаем сохраненные данные из БД $title = ! empty( $instance['title'] ) ? esc_attr( $instance['title']) : ''; $cta_text = ! empty( $instance['cta_text'] ) ? esc_attr( $instance['cta_text'] ) : ''; $button_text = ! empty( $instance['button_text'] ) ? esc_attr( $instance['button_text'] ): ''; $button_link = ! empty( $instance['button_link'] ) ? esc_attr( $instance['button_link'] ): ''; $cta_design = esc_attr( $instance['cta_design'] ); $options = ['light' => __('Light', 'mytheme'), 'dark' => __('Dark', 'mytheme'), ]; ?> <p> <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e("Title", "mytheme") ?></label> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" placeholder="<?php _e("CTA title here", "mytheme") ?>"> </p> <p> <label for="<?php echo $this->get_field_id('cta_text'); ?>"><?php _e("CTA text", "mytheme") ?></label> <textarea class="widefat" rows="5" cols="20" id="<?php echo $this->get_field_id('cta_text'); ?>" name="<?php echo $this->get_field_name('cta_text'); ?>" placeholder="<?php _e("CTA main text here", "mytheme") ?>"><?php echo $cta_text; ?></textarea> </p> <p> <label for="<?php echo $this->get_field_id('button_text'); ?>"><?php _e("Button text", "mytheme") ?> (<?php _e("You need to add button link", "mytheme")?>)</label> <input class="widefat" id="<?php echo $this->get_field_id('button_text'); ?>" name="<?php echo $this->get_field_name('button_text'); ?>" type="text" value="<?php echo $button_text ?>" placeholder="Read More"> </p> <p> <label for="<?php echo $this->get_field_id('button_link'); ?>"><?php _e("Button Link", "mytheme") ?></label> <input class="widefat" id="<?php echo $this->get_field_id('button_link'); ?>" name="<?php echo $this->get_field_name('button_link'); ?>" type="url" value="<?php echo $button_link ?>" placeholder="https://mysite.com/somepage"> </p> <p> <label for="<?php echo $this->get_field_id('cta_design'); ?>"><?php _e("CTA Design", "mytheme") ?></label> <select class="widefat" id="<?php echo $this->get_field_id('cta_design'); ?>" name="<?php echo $this->get_field_name('cta_design'); ?>"> <?php foreach ( $options as $value => $text ): ?> <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $instance['cta_design'], $value ); ?>> <?php echo esc_html( $text ); ?> </option> <?php endforeach; ?> </select> </p> <?php } public function update( $new_instance, $old_instance ) { // обрабатывает параметры виджета при сохранении $instance = $old_instance; $instance['title'] = strip_tags( $new_instance['title'] ); $instance['cta_text'] = wp_kses_post( $new_instance['cta_text'] ); $instance['button_text'] = strip_tags( $new_instance['button_text'] ); $instance['button_link'] = strip_tags( $new_instance['button_link'] ); $instance['cta_design'] = strip_tags( $new_instance['cta_design'] ); return $instance; } } add_action( 'widgets_init', function(){ register_widget( 'Frontpage_CTA_Widget' ); }); |
Плагин для управления виджетами
Плагин Widget Options предназначен для управления виджетами боковой панели вашего сайта и всеми блоками Gutenberg на страницах и в сообщениях с помощью дополнительных настроек. На данный момент у этого плагина уже более 2 700 000 загрузок. Он поддерживает управление не только классическими, но и блоками Gutenbergа.
Параметры виджета расширяют настройки блоков Widget & Gutenberg с помощью полнофункциональных опций, так что вы можете полностью управлять их видимостью, внешним видом и поведением. Показывать или скрывать контент в зависимости от ролей пользователей, устройств, дат, URL... и многого другого.
Установив и активировав плагин, вы найдете в виджетах дополнительные вкладки, на которых можно увидеть отображение виджета на определенных страницах, девайсах и поддержку полей ACF. Некоторые опции доступны только в про-версии.
Заключение
В этой статье мы пошагово создали виджет в классическом стиле и рассмотрели все функции, которые позволяют нам отображать настройки виджета в админ-панели WordPress и содержимое этих настроек на выбранной странице сайта.
Надеюсь, на основе статьи вы сможете создать свой собственный виджет.
Если вы заинтересовались данной темой, возможно, вам пригодятся разные функции, которые относятся к API виджетов.
Вы также можете посмотреть курс на английском о виджетах от Tut+.
