Віджети 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>Поки що на інтерфейсі не буде багато чого дивитися, але це наближає нас до того, де ми хочемо бути.
Клас для адміністраторів
Далі ми хочемо переконатися, що ми залишаємося послідовними у підтримці високого рівня згуртованості наших класів. Це означає, що нам не потрібен один клас, щоб виконувати все, що стосується адміністрування, відображення та всієї іншої роботи, необхідної для API WordPress.
Для цього ми створимо другий клас під назвою 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.
Дезінфекція та серіалізація
У наступній публікації ми розглянемо, що необхідно для дезінфекції та серіалізації (або очищення та збереження) вмісту нашого віджета.
Ми також переконаємось, що відображаємо інформацію в адміністративній області після того, як інформацію буде збережено та отримано.
Нарешті, успадкування та класова згуртованість продовжуватимуть розвиватися, але поки що зосередьтеся на тому, що описано в цій публікації, а потім ми продовжимо в наступній статті.