Виджеты в WordPress - это один из вариантов оформления сайта. В основном виджеты позволяют управлять контентом в боковой колонке или футере сайта. Но их расположение на самом деле очень зависит от того места, где в теме заявлено место для размещения виджетов, а внешний вид - от стилей темы.

Для создания виджетов WordPress вы можете использовать  API виджетов. Здесь мы будем рассматривать создание виджета в WordPress в классическом стиле, т.е. в том виде, который существовал до WordPress версии 5.8. Поэтому, для начала вам нужно будет отключить блочный редактор виджетов, добавив в functions.php такую строку:

Немного о виджетах WordPress

Обычно виджеты WordPress добавляют контент и функции в боковые панели, которые называют сайдбарами. Они пришли еще с момента, когда сайты на WordPress делились на основную область и область сайдбара, т.е. боковой колонки. Поэтому часть функций, которые мы будем использовать, содержать в себе это название - sidebar.

Сейчас уже области виджетов вашей темы могут быть где угодно - в середине страницы, внизу или вверху, в области хедера или футера - главное верно добавить код и использовать определенные id виджетов.

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

Большинство виджетов WordPress предлагают в качестве настройки форму с разными типами полей для заполнения, возможностью вставить изображение или выбрать категорию постов, например.

Мы будем создавать наш виджет в такой последовательности:

  1. Регистрация виджета в файле functions.php
  2. Регистрация области виджета в файле темы
  3. Создание файла виджета. Подключение его к functions.php
  4. Использование класса виджета
  5. Плагин для управления виджетами
  6. Заключение

В этой статье мы создадим виджет для вывода CTA на главной странице сайта, который предполагает использование нескольких текстовых полей. Мы рассмотрим различные функции, составляющие работоспособность виджета, чтобы понять, как в принципе работают виджеты WordPress.

Этот виджет будет довольно простым. Он будет содержать текст, кнопку и ссылку, привязанную к клику по кнопке. Также мы добавим возможность выбора светлого и темного дизайна.

Регистрация виджета в файле functions.php

В главном функциональном файле темы мы должны сообщить WordPress, что у нас будет некая область для виджетов с именем, id, тегом и заголовком, которые позволят в дальнейшем стилизовать эту область на странице сайта.

Для регистрации  виджета в файле functions.php используют функцию register_sidebar(), которую можно прикрепить к хуку widgets_init:

Наша тема предполагает использование некоторых классов 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():

Тот виджет с кодом, который мы добавили и сохранили в предыдущем шаге, даст нам следующий внешний вид на главной странице сайта:

Внешний вид виджета с на главной странице

Создание файла виджета. Подключение его к functions.php

Можно, конечно, разместить весь код, приведенный ниже в functions.php, но если виджетов будет несколько или код будет сложным, это здорово "замусорит" наш основной функциональный файл. Поэтому мы создадим папку widgets, а в ней разместим файл widgets.php. И пусть пока в нем у нас будет описание одного виджета, но в будущем вы можете добавить туда и другие виджеты.

В файле functions.php нам нужно подключить этот файл:

Теперь тот код, который вы найдете ниже мы пишем в widgets/widgets.php.

Использование класса виджета

Самый простой способ создать виджет WordPress — это наследовать WP_Widgetкласс. Таким образом, вы можете использовать встроенные функции для обновления виджета, отображения виджета и создания интерфейса администратора для виджета.

Чтобы полностью понять, как работают виджеты, мы создадим и рассмотрим пустой виджет. Затем мы определим каждую функцию, составляющую виджет, и посмотрим, как они работают вместе для создания рабочего виджета.

Определение нашего виджета в виде класса

Пока что мы создадим пустую оболочку с базовыми функциями, чтобы разобраться, как они работают.

Обратите внимание на последние 3 строки. Для того чтобы виджет появился в админ-панели среди других виджетов, его обязательно нужно зарегистрировать для хука  widgets_init.

Функции в деталях

Рассмотрим каждую функцию более подробно:

  1. __construct() - функция для регистрации виджета в WordPress.
  2. widget() - эта функция отвечает за внешнее отображение виджета. Он выводит содержимое виджета
  3. update() - функция, которая обрабатывает параметры виджета при сохранении. Используйте эту функцию для обновления виджета (опция). Эта функция принимает два параметра:
    1. $new_instance – значения, только что отправленные на сохранение. Эти значения будут поступать из формы, определенной в методе form().
    2. $old_instance – ранее сохраненные значения из базы данных

    Обязательно очистите (sanitize) в функции update() все отправленные пользователем значения. Из них нужно убрать лишние символы, теги, где они не разрешены, и атрибуты, перед отправкой в ​​базу данных. Для этого можно использовать функцию esc_attr(),  strip_tags() или wp_kses_post().

  4. form() - эта функция используется для определения внутренней формы виджета, которую вы видите на панели виджетов на информационной панели. Эта форма позволяет пользователю настраивать заголовок и другие поля виджета. Эта функция принимает один параметр:
    • $instance – ранее сохраненные значения из базы данных

Теперь опишем конструктор.

Конструктор виджета

Конструктор позволяет нам инициализировать наш виджет, перезаписав родительский класс (стандартный WP_Widgetкласс).

В приведенном выше коде мы вызываем функцию конструкции родительского класса WP_Widget и передаем ей следующие аргументы:

  • Базовый идентификатор (Base ID - 'frontpage_cta_widget') — уникальный идентификатор виджета. Должен быть в нижнем регистре. Если оставить пустым, будет использоваться часть имени класса виджета.
  • Имя (Name - __( 'Frontpage CTA Widget', 'mytheme' )) — это имя виджета, отображаемого на странице конфигурации виджетов (в админке, или панели управления WordPress).
  • Необязательный  массив (array) , содержащий имя класса и описание. Описание отображается на странице конфигурации (в панели управления WordPress).

На данный момент мы можем уже увидеть наш виджет в админ-панели, но он пока неработоспособен. Для начала добавим форму.

Создание внутренней формы виджета

Внутренняя форма будет состоять из нескольких полей — заголовка, основного текста, поля для текста, выводимого на кнопке и ссылки привязанной к этой кнопке. Плюс выпадающий список, который позволит нам сделать стилизацию нашего блока в разных цветах.

На скриншоте формы видно, как она будет выглядеть в админ-панели в меню Внешний вид → Виджеты :

Чтобы сгенерировать приведенную выше форму, мы начнем с пока что чистого HTML, а затем заменим некоторые значения атрибутов некоторыми переменными и выражениями PHP. Ниже приведен HTML-код для создания всех полей формы в функции form():

Вот теперь мы можем добавить виджет в заготовленную для него область. Увидим следующее:

Форма виджета

Чтобы перейти от этого к нашему окончательному коду функции form(), нам нужно будет сделать некоторые атрибуты выше динамическими, а именно имя, идентификатор и атрибут for метки (который должен соответствовать идентификатору HTML, для которого служит эта метка). Мы также заменим значение текстового поля, кнопки и ссылки для кнопки, а также содержимое поля textarea динамическими значениями из базы данных, если они уже были сохранены.

Вот код, который у нас получится:

Приведенный выше код обращается к двум переменным и присваивает ранее сохраненные значения из базы данных — $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(). Вот наш код:

Вышеупомянутая функция принимает два параметра – $new_instanceи$old_instance

  • $new_instance — это массив, содержащий новые настройки (данного экземпляра виджета), которые только что были введены пользователем через внутреннюю форму, которую мы определяем в функции form().
  • $old_settings — массив, содержащий старые настройки. Это значения, которые в данный момент хранятся в базе данных.

Функция update() возвращает массив настроек для сохранения или false для отмены сохранения.

В приведенном выше коде мы присваиваем данные из $old_instance переменной $instance и заменяем ее ключи новыми значениями из $new_instance. Возвращая обновленный массив, мы фактически обновляем настройки виджета.

Функция strip_tags()удаляет теги HTML и PHP из переданной ей строки. Мы включаем эту функцию, чтобы избежать ситуации, когда пользователи вашей темы не могут закрыть теги, введенные через внутреннюю форму, что приводит к поломке вашего сайта (неправильной визуализации).

Определение внешнего интерфейса. Формат вывода на странице сайта

Функция widget()отвечает за внешнее отображение виджета. Он принимает два параметра – $argsи $instance.

  1. $args— это массив, передаваемый в функцию register_sidebar() при определении боковой панели/области виджетов, в которой размещается виджет. Массив содержит определения открывающих и закрывающих тегов самого виджета и заголовка виджета.
  2. $instance— массив, содержащий настройки для конкретного экземпляра виджета. Эти настройки будут получены из базы данных.

Мы используем теги, упомянутые выше, в окончательном коде виджета ниже:

В приведенном выше коде мы наконец-то описываем интерфейс нашего виджета. Наш виджет выводит заголовок и текст, который мы можем обернуть в теги. Для заголовка виджета у нас были описаны теги внутри функции register_my_widgets() в functions.php.

Кнопку и ссылку мы будем выводить только в том случае, если у нас заполнены оба поля.

В коде мы используем функцию extract(),  которая  принимает ассоциативный массив и возвращает его ключи в виде переменных. Это позволяет нам выводить $before_widget вместо $args['before_widget'], тем самым немного упрощая наш код. Она похожа на деструктуризацию в JavaScript, хоть и с несколько иным синтаксисом.

Как раз для этой переменной мы заменяем класс light, который установлен для section по умолчанию, на dark, если он выбран в виджете в качестве варианта дизайна.

Окончательный результат на реальном веб-сайте будет выглядеть примерно так в зависимости от выбора варианта дизайна:
Отображение виджета с заполненными полями

Для изменения стилей в файл style.css нужно добавить немного кода:

Класс .cta-section мы описали при регистрации виджета в functions.php.

Окончательный код

Дочитали до этого места? Молодец! У вас бонус:  здесь вы найдете весь код, который нужно поместить в файл widgets.php в папке widgets, чтобы не копировать его по частям.

Вот окончательный код:

Плагин для управления виджетами

Плагин Widget Options предназначен для управления виджетами боковой панели вашего сайта и всеми блоками Gutenberg на страницах и в сообщениях с помощью дополнительных настроек. На данный момент у этого плагина уже более 2 700 000 загрузок. Он поддерживает управление не только классическими, но и блоками Gutenbergа.

Параметры виджета расширяют настройки блоков Widget & Gutenberg с помощью полнофункциональных опций, так что вы можете полностью управлять их видимостью, внешним видом и поведением. Показывать или скрывать контент в зависимости от ролей пользователей, устройств, дат, URL... и многого другого.

Установив и активировав плагин, вы найдете в виджетах дополнительные вкладки, на которых можно увидеть отображение виджета на определенных страницах, девайсах и поддержку полей ACF. Некоторые опции доступны только в про-версии.

Widget Options Plugin

Заключение

В этой статье мы пошагово создали виджет в классическом стиле и рассмотрели все функции, которые позволяют нам отображать настройки виджета в админ-панели WordPress и содержимое этих настроек на выбранной странице сайта.

Надеюсь, на основе статьи вы сможете создать свой собственный виджет.

Если вы заинтересовались данной темой, возможно, вам пригодятся разные  функции, которые относятся к API виджетов.

Вы также можете посмотреть курс на английском о виджетах от Tut+.

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *