Создайте динамический виджет в WordPress за десять минут

Список плагинов в WP Admin после создания пустого плагина

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

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

 class My_Custom_Widget extends WP_Widget {

    public function __construct() {
    }

    public function widget( $args, $instance ) {
        // Define the widget
    }
}
// Register the widget
function my_register_custom_widget() {
    register_widget( 'My_Custom_Widget' );
}
add_action( 'widgets_init', 'my_register_custom_widget' );

Теперь, когда наш скелетный код готов, давайте заполним функции конструктора и widget

 public function __construct() {
    // Define the constructor

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

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

Конструктор может быть расширен от родительского конструктора. В опциях мы также можем предоставить class Далее давайте определим параметры отображения виджета:

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

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

    // Keep this line
    echo $args['after_widget'];
}

В классе widget Сначала мы добавляем заголовок виджета «Live Cricket Matches», а затем просто «Hello, World!»

Как только код будет сохранен, давайте вернемся к « Внешний вид»> «Виджеты» в WP Admin и добавим созданный виджет в часть страницы.

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

После добавления виджета вы можете обновить свою домашнюю страницу и проверить, появился ли виджет.

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

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

Добавление опции Live Score

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

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

GET-запрос должен быть отправлен в API соответствия с параметром apikey Получив ключ API, вы можете убедиться, что API работает правильно, перейдя по следующему URL-адресу в браузере:

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

Ответ представляет собой строку JSON со списком совпадений и некоторыми метаданными. Мы можем эмулировать запрос и извлечь данные в PHP, изменив нашу функцию widget

 public function widget( $args, $instance ) {

// before and after widget arguments are defined by themes
echo $args['before_widget'];

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

// This is where you run the code and display the output
$api_key = 'ONkuR4grRDFyUzOEYoSzeUQolbx2'
$api_url  = "http://cricapi.com/api/matches?apikey=" . $api_key;

//  Initiate curl
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

// Will return the response, if false it print the response
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);

// Will dump a json - you can save in variable and use the 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'];

}

Вот шаги, которые мы следуем в коде:

• мы отправляем запрос на URL через cURL, отключая опцию secure (обратите внимание, что URL-адрес cricAPI — http
• мы сохраняем ответ JSON после декодирования в переменной $cricketMatches
• мы получаем список совпадений и отображаем те, которые уже начались.

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

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

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

Упаковка и обмен плагином

Вот и ты. Вы успешно создали виджет со списком матчей по крикету! Вы можете упаковать плагин, создав zip-файл из каталога live-score-custom-pluginPlugins> Add New> Upload Plugin .

Последние мысли

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