Как создать свой виджет WordPress с нуля

Доброго здравия, уважаемые посетители моего маленького блога!

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

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

Как создать свой виджет WordPress с нуля

Виджеты WordPress — это блоки статического или динамического содержимого HTML, которые можно добавлять в определенные области интерфейсных страниц (области виджетов или боковые панели). WordPress предоставляет большое количество встроенных виджетов, таких как Архивы, Категории, Облако тегов, Поиск, Последние сообщения, Календарь и другие. Более того, я собираюсь объяснить в этом посте, как разработчики плагинов могут легко создавать виджеты WordPress с нуля, добавлять пользовательские функции и конкретный контент в любую тему, поддерживающую эту удивительную функцию.

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится - тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.

Экран виджетов

Экран виджетов в Twenty Seventeen

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

Как создать виджет WordPress

Как создать виджет WordPress

Хорошей новостью является то, что вы можете создать виджет WordPress, даже если вы не профессиональный разработчик. Вам просто необходимы базовые знания ООП в PHP и общее понимание разработки плагинов для WordPress. Этот пост проведет вас через разработку виджетов WordPress, объяснив, как создать виджет, который позволяет администраторам сайта выбирать список сообщений для отображения на боковой панели.

Мы будем следовать этим шагам:

  • Сборка и установка плагина, который предоставляет простой виджет
  • Настройка виджета
  • Создание формы администратора
  • Обновление настроек виджета
  • Создание и печать вывода виджета

Основная структура виджетов WordPress

С точки зрения разработчика, виджет является экземпляром класса WP_Widget. Итак, чтобы построить собственный виджет, нам нужно расширить этот класс из плагина. Наша первая задача — создать новый файл .php в папке /wp-content/plugins/my-widget/ со следующим заголовком:

 <?php /* Plugin Name: My Widget Plugin URI: http://wordpress.org/extend/plugins/# Description: This is an example plugin Author: Юрич Version: 1.0 Author URI: https://zacompom.ru/ */ 

Это простой заголовок плагина, но этого достаточно для наших целей (дополнительную информацию о требованиях к заголовку вы найдете в Кодексе). Сохраните скрипт как my-widget.php, перейдите на экран плагинов и активируйте плагин. Теперь нам нужно расширить класс «WP_Widget» и некоторые его функции в точный момент выполнения WordPress. Давайте добавим следующий код в наш плагин:

    // регистрируем My_Widget
    add_action( 'widgets_init', function(){
        register_widget( 'My_Widget' );
    });

Функция «add_action» перехватывает пользовательский обратный вызов для ловушки действия «widgets_init», которая срабатывает после регистрации всех виджетов по умолчанию.

Примечание: ловушка действия обеспечивает способ запуска функции в определенный момент выполнения WordPress и его расширений (смотрите Кодекс WordPress для получения дополнительной информации)

Функция «register_widget» регистрирует указанный виджет, который является расширением класса «WP_Widget»:

 class My_Widget extends WP_Widget { // class constructor public function __construct() {} // output the widget content on the front-end public function widget( $args, $instance ) {} // output the option form field in admin Widgets screen public function form( $instance ) {} // save options public function update( $new_instance, $old_instance ) {} } 

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

  • __construct — является конструктором класса и позволяет устанавливать пользовательские параметры виджета.
  • widget() — отображает содержимое виджета на внешнем интерфейсе.
  • form() — выводит элементы формы администратора виджета.
  • update() — обновляет текущий объект виджета.

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

Настройка виджета: конструктор классов

Конструктор класса регистрирует widget ID, title и дополнительные параметры, такие как classname, description, base_id и высота. В нашем примере виджета мы назначаем идентификатор, имя и две опции виджета:

    public function __construct() {
    $widget_ops = array(
        'classname' => 'my_widget',
        'description' => 'Плагин для читателей моего блога',
    );
    parent::__construct( 'my_widget', 'My Widget', $widget_ops );
}
  • my_widget — это базовый идентификатор для виджета.
  • «My Widget» — это заголовок виджета
  • $widget_ops — это массив опций

Смотрите Code Reference для полного списка доступных опций.

Создание формы администратора

Затем мы должны создать форму администратора, позволяющую пользователям устанавливать пользовательские параметры для виджета. Для выполнения этой задачи мы определим метод form() следующим образом:

 public function form( $instance ) { $title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'Title', 'text_domain' ); ?> <p> <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"> <?php esc_attr_e( 'Title:', 'text_domain' ); ?> </label> <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>"> </p> <?php } 

Функция form() сохраняет в качестве аргумента массив текущих параметров виджета. Элемент title в $instance предоставляет опцию title, а get_field_id и get_field_name устанавливают значения идентификатора и имени в текстовое поле.

Создание формы администратора

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

 public function form( $instance ) { $posts = get_posts( array( 'posts_per_page' => 20, 'offset' => 0 ) ); $selected_posts = !empty( $instance['selected_posts'] ) ? $instance['selected_posts'] : array(); ?> <div style="max-height: 120px; overflow: auto;"> <ul> <?php foreach ( $posts as $post ) { ?> <li><input type="checkbox" name="<?php echo esc_attr( $this->get_field_name( 'selected_posts' ) ); ?>[]" value="<?php echo $post->ID; ?>" <?php checked( ( in_array( $post->ID, $selected_posts ) ) ? $post->ID : '', $post->ID ); ?> /> <?php echo get_the_title( $post->ID ); ?></li> <?php } ?> </ul> </div> <?php } 

Функция get_posts() предоставляет массив сообщений на основе указанных параметров. В нашем примере мы просто получаем последние двадцать сообщений в хронологическом порядке, но мы можем создавать более сложные запросы, задавая любую комбинацию доступных переменных запроса (полный список вариантов запросов смотрите в Кодексе).

Затем троичный оператор проверяет, существует ли допустимое значение $instance [‘selected_posts’]. Если нет, значение $selected_posts устанавливается в пустой массив. Цикл foreach перебирает элементы $posts и печатает флажок для каждого из них. Проверяется функция сравнивает два аргумента и печатает проверили атрибут если они идентичны.

Изображение ниже показывает текущую форму администратора виджета.

Обновление настроек виджета

Обновление настроек виджета

Метод update() обновляет экземпляр виджета. Мы определяем функцию следующим образом:

 public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; $selected_posts = ( ! empty ( $new_instance['selected_posts'] ) ) ? (array) $new_instance['selected_posts'] : array(); $instance['selected_posts'] = array_map( 'sanitize_text_field', $selected_posts ); return $instance; } 

Функция содержит два аргумента:

  • $new_instance — это массив настроек, представленных пользователем
  • $old_instance — это массив настроек, хранящихся в базе данных

Вот что происходит:

  • $instance [‘title’] хранит новое значение заголовка виджета или пустую строку, если она недоступна
  • $selected_posts хранит идентификаторы выбранных пользователем сообщений или пустой массив
  • $instance [‘selected_posts’] хранит очищенную версию $selected_posts
  • функция возвращает $instance

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

Вывод виджета

Метод widget() выводит содержимое виджета на сайт. Функция получает выбранные сообщения и запускает цикл foreach, который создает элемент списка для каждого сообщения. Функция виджета определяется следующим образом:

 public function widget( $args, $instance ) { echo $args['before_widget']; if ( ! empty( $instance['title'] ) ) { echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title']; } if( ! empty( $instance['selected_posts'] ) && is_array( $instance['selected_posts'] ) ){ $selected_posts = get_posts( array( 'post__in' => $instance['selected_posts'] ) ); ?> <ul> <?php foreach ( $selected_posts as $post ) { ?> <li><a href="<?php echo get_permalink( $post->ID ); ?>"> <?php echo $post->post_title; ?> </a></li> <?php } ?> </ul> <?php }else{ echo esc_html__( 'No posts selected!', 'text_domain' ); } echo $args['after_widget']; } 

Функция widget() содержит два аргумента:

  • $args — это массив аргументов, включая «before_title», «after_title», «before_widget» и «after_widget»
  • $instance — это массив настроек виджета

Если найден допустимый заголовок, он очищается с помощью фильтра widget_title. Затем, если хотя бы одна запись была выбрана, get_posts возвращает массив объектов post. Наконец, цикл foreach создает элемент списка для каждой выбранной записи. Полный код этого плагина доступен на Gist (ссылка выше)

Простой виджет

Простой виджет, отображающий список сообщений, выбранных администратором сайта

Завершение

Любой, кто обладает базовыми знаниями в области разработки PHP и WordPress, может быстро научиться создавать собственные виджеты WordPress. Даже если вы еще не являетесь разработчиком WordPress, создание виджета может дать вам первый подход к разработке плагинов. А вы готовы создать собственный виджет WordPress?

И на этой счастливой ноте я буду заканчивать эту статью. Встретимся через три дня.


Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.
One Comment к статье "Как создать свой виджет WordPress с нуля"
  1. Максим: 29.03.2021 в 21:59

    Спасибо! Отличный пример. Благодаря ему сделал виджет, куда можно вставлять произвольный html с разметкой гугла вопросов-ответов с выбором галочкой категорий в которых отображать.

Заказать сайт