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

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

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

Система виджетов WordPress

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

Раздел Виджеты

В левой части окна располагаются доступные к отображению виджеты, а в правой – панели виджетов. Добавить виджет на панель довольно просто. Для этого его следует просто перетащить в нужное место.

Раздел Виджеты

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

“Движок” WordPress поставляется с целым набором различных виджетов. Но часто их функциональности бывает недостаточно для решения тех или иных задач. Поэтому и возникает необходимость создать свой, который будет отвечать всем требованиям.

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

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

Если Вы не знаете, как редактировать functions.php, то в этом случае Вам поможет плагин ProFunctions.

Разработка виджета

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

Главная страница сайта

Для создания виджетов в WordPress применяется объектная модель программирования языка PHP. В “движке” имеются все необходимые инструменты для этого. Так, для виджетов существует специальный класс WP_Widget, использование которого и позволит успешно создать необходимый виджет для сайта WordPress. Он включает около 20 различных методов. Однако нам потребуются лишь четыре из них:

  • __construct() – регистрация базовой информации о виджете;
  • widget() – вывод виджета в области виджетов на сайте;
  • form() – параметры виджета, отображаемые в области администрирования WordPress;
  • update() – обновление настроек виджета в админ-панели.

В дополнение к этим четырем методам используется функция add_action(), необходимая для привязки пользовательской функции виджетов к специальному хуку widgets_init.

Рассмотрим поэтапно создание нашего виджета.

Во-первых, необходимо создать свой класс, который будет наследовать вышеуказанные методы основного класса WP_Widget.

class wpschool_example_widget extends WP_Widget {

}

В этом коде наш класс имеет название wpschool_example_widget. Директивой extends мы даем понять системе, что он будет наследовать все методы основного класса WP_Widget.

На следующем этапе добавим первый метод – __construct(). Он используется для назначения идентификатора, заголовка, имени класса и описания для виджета.

public function __construct() {
    $widget_options = array(
        'classname' => 'wpschool_widget',
        'description' => 'Это наш первый виджет',
    );
    parent::__construct( 'wpschool_widget', 'WPSchool Widget', $widget_options );
}

Чтобы понять эту функцию, следует начать с строки, начинающейся с parent::__ construct(). Эта строка создает новый виджет с идентификатором wpschool_widget, именем WPSchool Widget и двумя параметрами виджетов: имя класса (wpschool_widget) и краткое описание (Это наш первый виджет).

Весь этот код входит в wpschool_example_widget и используется для регистрации виджета в WordPress, а затем отображает заголовок и описание виджета в области администратора.

Раздел Виджеты

Следующий метод, который мы добавим, будет widget(). Он позволит вывести виджет в области виджетов на сайте.

public function widget( $args, $instance ) {
    $title = apply_filters( 'widget_title', $instance[ 'title' ] );
    $blog_title = get_bloginfo( 'name' );
    $tagline = get_bloginfo( 'description' );

    echo $args['before_widget'] . $args['before_title'] . $title . $args['after_title']; ?>
    <p><strong>Site Name:</strong> <?php echo $blog_title ?></p>
    <p><strong>Tagline:</strong> <?php echo $tagline ?></p>
    <?php echo $args['after_widget'];
}

Метод widget() содержит код, который генерирует фактический контент, отображаемый виджетом на сайте. В нашем примере мы предоставим пользователям возможность отображать, кроме названия и описания сайта, еще и заголовок самого виджета. Поэтому для этого нужно будет захватить этот заголовок, а затем использовать get_bloginfo(), чтобы отобразить название и описание блога.

Также следует понять еще кое-какие моменты.

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

$instance[] – это переменная, в которую загружаются значения, связанные с текущим экземпляром виджета. Если Вы добавили виджет на боковую панель дважды, каждый экземпляр $instance будет содержать значения, специфичные для каждого экземпляра виджета.

Фильтр widget_title возвращает заголовок текущего экземпляра виджета.

get_bloginfo() – функция, которая может использоваться для возврата всех видов метаданных WordPress-сайт, включая его название и описание.

После определения нескольких переменных, используя информацию из приведенного выше списка, код в примере продолжает формировать фактический вывод контента, который состоит из информации из переменной $args, заголовка, названия и описания сайта.

Обратите внимание, что практически каждый виджет должен включать аргументы before_widget, after_widget, before_title и after_title. Они необходимы для обеспечения того, чтобы каждый виджет был вложен в специфичные для темы теги HTML.

На следующем этапе добавим метод form(), позволяющий сохранять параметры виджета, отображаемые в админ-панели WordPress.

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

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

Виджет на странице сайта

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

Раздел Виджеты

Следующий на очереди – метод update(), отвечающий за обновление настроек виджета в админ-панели.

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

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

Метод update() должен соответствующим образом проверять новые параметры, а затем назначать их переменной $instance и возвращать эту обновленную переменную.

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

function wpschool_register_widget() {
    register_widget( 'wpschool_example_widget' );
}
add_action( 'widgets_init', 'wpschool_register_widget' );

Тут, во-первых, создается функция для регистрации виджета, используя имя объекта виджета для его идентификации. Затем идет привязка функции регистрации к WordPress, используя хук widgets_init.

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

После добавления всего кода в файл functions.php в админ-разделе Внешний вид -> Виджеты должен появится виджет с названием WPSchool Widget, который теперь доступен для добавления на панель виджетов Вашей темы.

Полный текст нашего виджета:

/* Виджет WPSchool Widget */
class wpschool_example_widget extends WP_Widget {

    // Установка идентификатора, заголовка, имени класса и описания для виджета.
    public function __construct() {
        $widget_options = array(
            'classname' => 'wpschool_widget',
            'description' => 'Это наш первый виджет',
        );
        parent::__construct( 'wpschool_widget', 'WPSchool Widget', $widget_options );
    }

    // Вывод виджета в области виджетов на сайте.
    public function widget( $args, $instance ) {
        $title = apply_filters( 'widget_title', $instance[ 'title' ] );
        $blog_title = get_bloginfo( 'name' );
        $tagline = get_bloginfo( 'description' );

        echo $args['before_widget'] . $args['before_title'] . $title . $args['after_title']; ?>
        <p><strong>Site Name:</strong> <?php echo $blog_title ?></p>
        <p><strong>Tagline:</strong> <?php echo $tagline ?></p>
        <?php echo $args['after_widget'];
    }

    // Параметры виджета, отображаемые в области администрирования WordPress.
    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : ''; ?>
        <p>
        <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title:</label>
        <input type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" />
        </p><?php
    }

    // Обновление настроек виджета в админ-панели.
    public function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
        $instance[ 'title' ] = strip_tags( $new_instance[ 'title' ] );
        return $instance;
    }

}

// Регистрация и активация виджета.
function wpschool_register_widget() {
    register_widget( 'wpschool_example_widget' );
}
add_action( 'widgets_init', 'wpschool_register_widget' );

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

Курс WordPress-разработчик
Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров
Привет! Меня зовут Михаил Петров. Я копирайтер и занимаюсь этим с 2013 года. Скрупулезность и ответственность - моя фишка! Не могу делать как попало и добиваюсь, чтоб заказчик сказал минимум “неплохо”. За все время своей работы пришлось написать и отредактировать немало разной “текстовухи”, включая SEO-тексты, отзывы и прочую чушь. На сегодняшний день специализируюсь на написании информационных статей и руководств технического направления. Вижу смысл и светлое будущее в текстах для людей, а не для машин.
Обсуждение: 1
  1. Светлана

    Здравствуйте , можете помочь в вопросе ?) У меня после настроек редактора тем , исчез виджет стандартный он называется меню навигации , в списке его нет то что было закреплено этим виджетом меню навигации исчезло соответственно.. Вот такое дело . Жду ответа )

Задать вопрос