Виджеты WordPress: рефакторинг, часть 12

Что касается рефакторинга WordPress Widget Boilerplate — особенно с учетом того, как далеко мы продвинулись с тех пор, как проект стартовал восемь лет назад, — мы проделали большую работу.

Мы довели его до гораздо более современного стандарта и значительно упростили работу с ним, так что создание будущих виджетов должно быть проще. И это не только от стандарта шаблона, но и от объектно-ориентированного стандарта, так что обслуживание и качество кода выше.

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

Мы сказали:

Далее мы рассмотрим рендеринг контента во внешнем интерфейсе. Мы приближаемся к концу рефакторинга Boilerplate, но осталось сделать еще немного, прежде чем мы будем готовы объединить его с основной веткой кодовой базы.

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

Если нет, обязательно вытащите его, так как именно об этом мы поговорим в оставшейся части поста.

Шаблон виджета WordPress: рефакторинг, часть 12

Теперь, когда дело доходит до внешнего интерфейса, легко думать о внешнем интерфейсе как о чем-либо, что пользователь видит перед собой, независимо от того, находится ли он в административной области или нет.

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

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

Затем в следующем посте мы рассмотрим работу с условной логикой в ​​отношении некоторых параметров, чтобы увидеть, нужно ли нам что-то делать.

С учетом сказанного давайте перейдем к коду.

О данных, которые мы будем отображать

Помните, что на данный момент у виджета есть три вещи, влияющие на его отображение:

1. название виджета,
2. содержимое виджета,
3. переключатель относительно того, должны ли мы отображать заголовок

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

Но я думаю, что это помогает показать практическое (или полупрактическое) использование различных типов элементов и их значений.

В любом случае, с учетом сказанного, мы знаем, что для каждого данного экземпляра виджета данные хранятся с названием title, content и display-title и идентификаторами, предоставленными WordPress.

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

Подготовка функций дисплея

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

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

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

Но сначала давайте просто заглушим класс :

<?php

namespace WordPressWidgetBoilerplateWordPress;

class WidgetDisplay
{
  private $widgetSlug;

  public function __construct(string $widgetSlug)
  {
      $this->widgetSlug = $widgetSlug;
  }

  public function show($args, $instance)
  {
    // More to come
  }
}

После этого нам нужно убедиться, что мы записываем это и в другие классы. Во-первых, мы обязательно включим его в наш класс Widget :

<?php
public function widget($args, $instance)
{
    return $this->widgetDisplay->show($args, $instance);
}

А затем мы добавим его в класс WidgetAdmin (поскольку именно здесь находятся основные функции Widget API — он просто делегирует ответственность соответствующему классу):

<?php

public function __construct($widgetSlug)
{
    parent::__construct($widgetSlug);
    $this->widgetSerializer = new WidgetSerializer($this->getWidgetSlug());
    $this->widgetDisplay = new WidgetDisplay($this->getWidgetSlug());
}

На данный момент мы еще ничего не отображаем. Мы близки, и мы сосредоточимся на этом в ближайшее время.

Отображение данных

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

Мы можем сделать это любым количеством способов, от простого var_dump до реальной работы по отображению контента в более удобном для пользователя виде. И я гораздо больше поклонник последнего.

Итак, давайте сделаем это.

В функцию show вашего класса WidgetDisplay добавьте следующий код :

<?php
public function show($args, $instance)
{
    include_once 'Views/Widget.php';
}

И тогда представление для шаблона может быть таким простым :

<div id="<?php echo $args['id']; ?>">
    <h3 class="widget-title"><?php echo $instance['title']; ?></h3>
    <p><?php echo $instance['content']; ?></p>
    <pre><?php echo $instance['display-title']; ?></pre>
</div><!-- #<?php echo $args['id']; ?>-->

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

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

Я бы порекомендовал поиграть с  опцией Display Title, чтобы увидеть, как она отображается во внешнем интерфейсе с учетом предоставленной нами разметки.

На данный момент вывод виджета должен выглядеть примерно так:

Но это все, что можно рассказать в этом посте.

В финальный рефакторинг

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

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

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