Создание виджетов WordPress

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

Это, так называемые, виджеты.

Примеры виджетов на этом сайте

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

Однако независимо от происхождения того или иного виджета реализация одинакова.

Создание собственного виджета

С точки зрения программирования любой виджет, это класс наследник базового класса WP_Widget.

Класс виджета должен реализовать перегрузку четырёх методов класса WP_Widget.

_construct() — конструктор. Вызывает конструктор родительского класса и инициализирует виджет;
form($instance) — выводит форму для настройки виджета в админпанели. Принимает в качестве аргумента массив параметров данного конкретного виджета;
update($newInstance, $oldInstanc) — обновление настроек виджета, которые были указаны в форме в админпанели. Принимает два аргумента. Массивы новых и устаревших параметров виджета;
widget($args, $instance) — отображение виджета непосредственно на самом сайте. Принимает два аргумента. Массив служебных параметров и параметров данного конкретного виджета соответственно.

Строго говоря, обязательными являются только методы _construct и widget. Если данный виджет не предусматривает возможность настройки с помощью админпанели (редко, но бывает), реализация перегрузок для form и update утрачивает смысл.

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

Вначале объявим сам класс виджета.

class DateWidget extends WP_Widget
{
}

class DateWidget extends WP_Widget

{

}

Реализуем его конструктор.

public function __construct()
{
   parent::__construct(“date_widget”, “Простой виджет с датой”,
   array(“description” => “Простой виджет с датой для темы WordPress”));
}

public function __construct()

{

parent::__construct(“date_widget”, “Простой виджет с датой”,

array(“description” => “Простой виджет с датой для темы WordPress”));

}

В конструкторе вызываем конструктор родительского класса, который принимает три аргумента:

Уникальный идентификатор виджета, название виджета для админпанели и массив дополнительных параметров. Из них обязателен только один параметр – description, содержащий краткое описание виджета отображаемое в админпанели.

Далее создадим форму настройки.

Единственной настройкой этого виджета будет заголовок надписи с датой, отображаемый на сайте.

public function form($instance)
{
   $title=””;
   if (!empty($instance))
    {
         $title = $instance[“title”];
    }
   echo “<label>Заголовок</label><br>”;
   echo “<input id="\””.$this-">get_field_id(‘title’).”\” name=\””.$this->get_field_name(‘title’).”\” value=\”$title\”/>”;
}

public function form($instance)

{

$title=””;

if (!empty($instance))

{

$title = $instance[“title”];

}

echo “<label>Заголовок</label><br>”;

echo “<input id="\””.$this-">get_field_id(‘title’).”\” name=\””.$this->get_field_name(‘title’).”\” value=\”$title\”/>”;

}

Заголовок вводится с помощью обычного тега input. Чтобы связать этот тег с соответствующим параметром виджета, необходимо задать значения атрибутов id и name с помощью методов класса WP_Widget get_field_id и get_field_name, соответственно. Оба метода принимают в качестве аргумента имя параметра виджета, с которым осуществляется связь.

Реализуем обновление настроек виджета.

Метод update должен возвращать массив values, который содержит обновлённые настройки виджет.

public function update($newInstance, $oldInstance)
{
   $values = array();
   $values[“title”] = htmlentities($newInstance[“title”]);
   return $values;
}

public function update($newInstance, $oldInstance)

{

$values = array();

$values[“title”] = htmlentities($newInstance[“title”]);

return $values;

}

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

Для сохранения настроек не требуется каких-либо дополнительных действий. WordPress сохранит их самостоятельно.

Теперь необходимо отобразить виджет на сайте при помощи метода widget.

public function widget($args, $instance)
{
   $title=$instance[“title”];
   echo “”;
   echo “

public function widget($args, $instance)

{

$title=$instance[“title”];

echo “”;

echo “

$title

”;
   echo “<br>”.Date(‘d’).” “.Date(“M”).” “.Date(“Y”).””;
   echo “”;
}

”;

echo “<br>”.Date(‘d’).” “.Date(“M”).” “.Date(“Y”).””;

echo “”;

}

На этом процесс создания виджета как таковой завершён. Остаётся только зарегистрировать его в WordPress.

Для этого нужно воспользоваться хуком widgets_init и функцией register_widget. Данная функция принимает в качестве параметра имя класса виджета.

add_action(“widgets_init”, function ()
{
   register_widget(“DateWidget”);
});

add_action(“widgets_init”, function ()

{

register_widget(“DateWidget”);

});

На приведённых ниже скриншотах показан внешний вид готового виджета. На сайте:

В админ панели:

Особенности создания виджетов для плагинов и тем (шаблонов) сайтов

Как уже отмечалось выше, непосредственно сам процесс создания виджетов для плагинов и тем одинаков.

Единственное отличие в размещении соответствующего программного кода.

В случае темы сайта описание виджета и его регистрация могут быть реализованы только в файле functions.php. Реализация в отдельном PHP файле требует обязательного подключения к functions.php при помощи инструкций include (include_once) или require (require_once).

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

$title

Добавить комментарий Отменить ответ