Виджеты WordPress: рефакторинг, часть 9
Хотя последний пост в этой серии статей о рефакторинге был не очень длинным, я думаю, что он был немного запутанным. То есть потребовалось изрядное количество работы, чтобы получить код в том месте, где нам будет легче с ним работать.
Но это все: вся проделанная нами работа должна облегчить продвижение остального кода, который нам нужно написать.
И чтобы убедиться, что мы используем преимущества работы и фундамента, который мы заложили до сих пор, мы собираемся завершить серию набором более коротких, более целенаправленных статей, которые должны занять меньше времени на чтение, внедрение, и понять, что мы делаем с кодом.
Шаблон виджета WordPress: рефакторинг, часть 9
Напомним из последнего поста:
Далее мы продолжим наращивать функциональность административной области виджета. После этого мы обратим внимание на общедоступную сторону виджета, а также на функциональность сериализации.
И это подводит нас именно к тому, к чему мы движемся в этом конкретном посте. А именно, мы собираемся написать административный интерфейс, который позволит нам:
- определить заголовок для виджета,
- определить текстовое содержимое для виджета,
- и переключите, хотим ли мы показать заголовок.
Он не предназначен быть инновационным и не предназначен для того, чтобы быть типом виджета, который кто-то еще может захотеть продать. Вместо этого он предназначен для того, чтобы показать, как мы можем использовать то, что у нас есть, для создания чего-то похожего на то, что мы уже видели в WordPress, и как мы применяем надежные методы программирования.
Пользовательский интерфейс: первый проход
После нашей последней работы у нас есть виджет, который появляется в административной области WordPress, и его даже можно переместить на боковую панель или в другую область виджетов; однако на самом деле он ничего не делает.
А пока давайте добавим в пользовательский интерфейс три элемента:
- добавить текстовый ввод для заголовка виджета,
- включить элемент textarea для отображения того, что может быть абзацем текста,
- и, наконец, добавьте флажок для переключения информации о заголовке.
Для этого нам нужно отредактировать файл в каталоге Views. А именно, мы собираемся обновить файл Admin.php. Мы начнем с элементов точно по мере необходимости без посторонней разметки.
<input type="text" name="widget-title" value="" />
<textarea name="widget-content"></textarea>
<label>
<input
type="checkbox"
value="1"
name="widget-title-enabled"
/>
Display Title?
</label>Пока что на внешнем интерфейсе не так много интересного, но это приближает нас к тому, чего мы хотим.
Класс для администраторов
Далее, мы хотим убедиться, что мы остаемся последовательными в поддержании высокого уровня сплоченности с нашими классами. Это означает, что нам не нужен один класс для администрирования, отображения и всей другой работы, требуемой WordPress API.
С этой целью мы создадим второй класс под названием WidgetAdmin в каталоге и пространстве имен WordPress .
В этот файл мы включим следующий код :
<?php
/*
* This file is part of WordPress Widget Boilerplate
* (c) Tom McFarlin <tom@tommcfarlin.com>
*
* This source file is subject to the GPL license that is bundled
* with this source code in the file LICENSE.
*/
namespace WordPressWidgetBoilerplateWordPress;
/**
* Manages the administrative functionality of the widget.
*/
class WidgetAdmin extends Widget
{
/**
* {@inheritdoc}
*/
public function __construct($widgetSlug)
{
parent::__construct($widgetSlug);
}
/**
* Displays the administrative view of the form and includes the options
* for the instance of the widget as arguments passed into the function.
*
* @param array $instance the options for the instance of this widget.
*/
public function form($instance)
{
include plugin_dir_path(__FILE__).'Views/Admin.php';
}
}
Затем в исходном коде для создания экземпляра нашего виджета мы изменим эту строку :
<?php
/**
* Registers the core Widget class using the WordPress APIs.
*/
public function load()
{
register_widget(new Widget('widget-name'));
}Чтобы выглядеть так :
<?php
/**
* Registers the core Widget class using the WordPress APIs.
*/
public function load()
{
register_widget(new WidgetAdmin('widget-name'));
}В следующих нескольких статьях это будет продолжать развиваться, но, как вы видите, мы позаботимся о том, чтобы у нас был единый базовый класс функциональности для общения с WordPress и класс специально для рендеринга административной формы.
Пользовательский интерфейс: второй проход
Наконец, давайте очистим форму, чтобы у нее было немного больше надежного UX, который хорошо сочетается с областью администрирования WordPress в целом.
<input type="text" name="widget-title" value="" />
<textarea name="widget-content"></textarea>
<label>
<input
type="checkbox"
value="1"
name="widget-title-enabled"
/>
Display Title?
</label>И обновите его, чтобы он выглядел так :
<div class="widget-content">
<p>
<input
type="text"
name="widget-title"
value=""
placeholder="Widget Title"
class="widefat"
/>
</p>
<p>
<textarea
name="widget-content"
placeholder="Widget Content"
style="width:100%;"></textarea>
</p>
<p>
<input
type="checkbox"
value="1"
name="widget-title-enabled"
class="checkbox"
/>
<label for="widget-title-enabled">Display Title?</label>
</p>
</div><!-- .widget-content -->Предполагая, что все прошло хорошо, теперь вы должны увидеть что-то вроде этого:
И на этом мы собираемся остановиться с административными функциями для этого поста. Помните, что вы также можете отслеживать все это в ветке разработки на GitHub.
Очистка и сериализация
В следующем посте мы рассмотрим, что необходимо для очистки и сериализации (или очистки и сохранения) содержимого нашего виджета.
Мы также позаботимся о том, чтобы информация отображалась в административной области после ее сохранения и извлечения.
Наконец, наследование и сплоченность классов будут продолжать развиваться, но пока сосредоточьтесь на том, что описано в этом посте, а затем мы продолжим в следующей статье.