Создание собственного виджета для CMS WordPress

Если вы хоть немного знакомы с Wordpress, то знаете, что кроме верстки, различные блоки или модули можно добавлять с помощью "Виджетов". Конечно существует набор стандартных виджетов, но их функций может не хватать. Сегодня мы разберем как с нуля создать собственный виджет. Для примера в статье будет создан виджет, который выводит бегущую строку актуальных курсов криптовалют.

бежит строка, бежит

Весь код мы будем писать в файле functions.php, который вы можете найти в папке с действующей темой.

Для того, чтобы виджет отображался в админ панели - необходимо его зарегистрировать. Это делается очень просто:

register_widget('marqueeCurrency');

Эта функция пишется отдельно от класса. Параметром мы передаем название класса нашего виджета. В данном случае это marqueeCurrency.

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

class marqueeCurrency extends WP_Widget {

   function __construct() {
     parent::__construct('marqueeСurrency','Курс криптовалют', array('description' => 'Отображает актуальные курсы криптовалют бегущей строкой'));
   }
   
   function widget( $args, $instance ){
   
   } 
   
   function update( $new_instance, $old_instance ) {
   
   }
   
   function form( $instance ) {
   
   }

}

Как можно заметить, класс наследуется от WP_Widget, это обязательное условие для виджета. Теперь разберем все методы, описаные в классе:

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

WP_Widget::__construct( string $id_base, string $name, array $widget_options = array(), array $control_options = array() )

$id_base - id виджета.
$name - имя виджета.
$widget_options - настройки виджета, например его описание.
$control_options - название функции, которая будет отвечать за вывод настроек виджет в админ-панели. Этот аргумент мы опустим, поскольку за вывод настроек у нас будет отвечать метод form()

widget() - метод, выводящий виджет на сайте, имеет следующие аргументы:

$args - массив, состоящий из ключей 'beforetitle', 'aftertitle', 'before_widget', 'after_widget', которые отвечают за оформление заголовка виджета (по умолчанию h3 ), и за обертку самого виджета (по умолчанию div ).
$instance - массив, в котором хранятся настройки вашего виджета.

update() - отвечает за обновление настроек, имеет два аргумента:

$new_instance - новые настройки.
$old_instance - старые настройки.

form() - выводит в админ-панели форму для редактирования настроек виджета.

Итак, мы разобрались с обязательным минимумом для создания виджета, теперь напишем в каждом из методов необходимый код, начнем с form().

  function form( $instance ) {
    $defaults = array (
     'currenciesLimit' => 10
    );
    $instance = wp_parse_args((array)$instance, $defaults);
    ?> 
     <p>
      <label for="<?php echo $this->get_field_id( 'currenciesLimit' ); ?>"> Выводить <input id="<?php echo $this->get_field_id( 'currenciesLimit' ); ?>" name="<?php echo $this->get_field_name( 'currenciesLimit' ); ?>" value="<?php echo $instance['currenciesLimit']; ?>" style="width:50px;" type="number"/> популярных криптовалют</label>
     </p>
    <?
  }

В данном виджете у нас будет всего одна настройка - количество выводимых криптовалют. Чтобы не выводить пустоту, с помощью массива $defaults будут созданы некоторые значения по умолчанию. Методы $this->get_field_id и $this->get_field_name нужны, чтобы не возникало путаницы при сохранении настроек. Таким образом теперь мы можем редактировать, сколько выводить криптовалют в бегущей строке.

Теперь перейдем непосредственно к сохранению настроек, для этого напишем в update() следующий код:

  function update( $new_instance, $old_instance ) {
    $instance = $old_instance;

    $instance['currenciesLimit'] = strip_tags( $new_instance['currenciesLimit'] );
    
    return $instance;
  }

Как видите сохранение настроек не слишком сложная задача.

Последним необходимым и важным методом является widget():

function widget( $args, $instance ){
      
    $currencies = file_get_contents('https://api.coinmarketcap.com/v1/ticker/?convert=RUB&limit='.$instance['currenciesLimit']);
    $currencies = json_decode($currencies,true);
    
    ?>
     <marquee scrollamount="3" behavior="scroll" loop="infinite" direction="left">
    <?
    foreach ($currencies as $key => $currency) {
    ?>
     <span><strong><? echo $currency['name'].' ('.$currency['symbol'].')'; ?></strong> : <? echo number_format($currency['price_rub'], 2, '.', ' ').' руб.';?> &nbsp;&nbsp;</span>
    <?
    }
    ?>
     </marquee>
    <?
  }

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

Сначала мы с помощью функции file_get_contents() получаем JSON строку с необходимым содержимым, после чего преобразовываем её в массив с помощью json_decode(). Здесь нам и пригодится наш параметр currenciesLimit, который мы создали в настройках. При запросе курсов мы передадим параметр "limit" со значением, которое хранится в $instance['currenciesLimit']. Тег marquee создаст бегущую строку, нам остается лишь добавить внутрь него данные. Для этого мы будем перебирать массив, добавляя в html содержимое нужную информацию.

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

Скачать готовый код виджета
Заглавное фото с сайта pvsm.ru

Данный материал подготовлен автором @mo3golom в рамках цикла статей о WordPress.