Создание динамического виджета для WordPress за 10 минут

2023-02-02 0 ∞

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

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

Куда вставить код?
Основы разработки виджета
Основы: виджет «Привет, мир!»
Определяем пустой плагин
Определение виджета в рамках плагина
Отображения счета игры в реальном времени
Архивирование плагина
Итог

Куда вставить код?

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

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

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

Для создания виджета в WordPress нужно расширить класс WP_Widget несколькими функциями:

функцией конструктора;
функцией widget – для отображения содержимого виджета;
функцией form – для отображения формы;
функцией update – для обновления настроек виджета.

Основы: виджет «Привет, мир!»

Сначала необходимо создать пустой плагин. Переходим в каталог /wp-content/plugins/ и создаем новую директорию с названием создаваемого плагина. В ней сохраняем файл index.php со следующим содержанием.

Определяем пустой плагин

<?php
/*
Plugin Name: Live Score Custom
Plugin URI: https://www.sitepoint.com/
Description: Get and display sports feeds
Version: 1.0
Author: Shaumik
Author URI: https://www.sitepoint.com/
License: GPL2
*/
?

Это пустой PHP файл с комментариями, как сказано в разделе WordPress Codex по созданию нового плагина. Размещенная в них информация используются WordPress при отображении данных о плагине в панели администрирования CMS.

После создания пустого файла название плагина выводится в списке расширений в админке.

Список плагинов

Определение виджета в рамках плагина

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

class My_Custom_Widget extends WP_Widget {

    public function __construct() {
    }

    public function widget( $args, $instance ) {
        // Определяем виджет
    }
}
// Регистрируем виджет
function my_register_custom_widget() {
    register_widget( 'My_Custom_Widget' );
}
add_action( 'widgets_init', 'my_register_custom_widget' );

Теперь наполним функции __construct() и widget():
public function __construct() {
    // определяем конструктор

    $options = array(
        'classname' => 'custom_livescore_widget',
        'description' => 'A live score widget',
    );

    parent::__construct(
        'live_score_widget', 'Live Score Widget', $options
    );
}

Конструктор можно наследовать из родительского класса. На вкладке «Параметры» мы также сможем указать CSS класс, который будет применяться к виджету при его отображении на странице:

public function widget( $args, $instance ) {
    
    echo $args['before_widget'];

    echo $args['before_title'] . apply_filters( 'widget_title', 'Live Criket Matches' ) . $args['after_title'];
    echo 'Hello, World!';

        echo $args['after_widget'];
}

В классе виджета мы определяем, что необходимо отображать в виджете. Сначала добавляем название виджета “Live Cricket Matches”, а затем «Привет, Мир!».

Сохраните код. Затем перейдите в раздел административной панели Внешний вид > Виджет и добавьте виджет на страницу

Добавление виджета

После этого обновляем страницу и проверяем наличие виджета.

Определение виджета в рамках плагина - 2

Виджет «Привет, Мир!» на домашней странице

Отображения счета игры в реальном времени

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

В качестве примера мы используем CricAPI. Бесплатная подписка на него позволяет делать 100 запросов в день. После регистрации вы получите API- ключ, который необходим для вывода данных на сайте. Для этого нужно использовать опцию «New match API».

Чтобы получить список матчей, посылаем GET-запрос в Match API с параметрами API-ключа. Когда у вас есть API-ключ, то можно проверить корректную работу API, открыв в браузере приведенный ниже URL-адрес:

http://cricapi.com/api/matches?apikey=api_key

В качестве ответа мы получим строку JSON с перечнем матчей и метаданными. Изменив функцию widget(), можно реализовать отправку запроса и извлечение данных в PHP:

public function widget( $args, $instance ) {

// до и после того, как аргументы виджета определяются темой
echo $args['before_widget'];

echo $args['before_title'] . apply_filters( 'widget_title', 'Live Criket Matches' ) . $args['after_title'];

// выводим данные
$api_key = 'ONkuR4grRDFyUzOEYoSzeUQolbx2'
$api_url  = "http://cricapi.com/api/matches?apikey=" . $api_key;

// Инициализирует сеанс cURL
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

// Возвращает данные запроса  
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
// Set the url
curl_setopt($ch, CURLOPT_URL, $api_url);
// Execute
$result = curl_exec($ch);
// Closing
curl_close($ch);

// Сохраняем данные json в переменную
$cricketMatches = json_decode($result);

foreach($cricketMatches->matches as $item) {
    if ($item->matchStarted == true) {
        echo $item->{'team-1'}, ' vs ', $item->{'team-2'}, '<br />';
    }
}

echo $args['after_widget'];

}

В этом коде:

Мы отправляем запрос через cURL;

сохраняем ответ JSON в переменной $cricketMatches;
получаем список матчей и отображаем те, которые уже начались.

Давайте взглянем на домашнюю страницу и проверим, отображаются ли нужные данные.

Отображения счета игры в реальном времени

Виджет, показывающий список матчей в крикет на домашней странице

Данные могут быть дополнительно изменены для отображения определенных опций. Например, можно получать данные о счете матча в крикет посылая запрос в cricket score API используя API-ключ и ID матча.

Архивирование плагина

Мы создали виджет, который выводит список прямых трансляций матчей в крикет! Можно упаковать плагин, создав zip-файл в директории live-score-custom-plugin и загрузить архив в Плагины > Добавить плагин > Загрузить плагин.

Итог

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