Віджети WordPress: рефакторинг, частина 12
Що стосується рефакторингу WordPress Widget Boilerplate – особливо з огляду на те, як далеко ми просунулися з моменту початку проекту вісім років тому – ми виконали багато роботи.
Ми привели його до набагато сучаснішого стандарту та значно полегшили роботу з ним, щоб створення майбутніх віджетів стало легшим. І це пов’язано не лише зі стандартом шаблону, але й з об’єктно-орієнтованим стандартом, щоб якість обслуговування та коду була вищою.
У минулому дописі ми завершили більшу частину роботи в області адміністрування та готові розпочати роботу над кодом для інтерфейсу.
Ми сказали:
Далі ми розглянемо відтворення вмісту на інтерфейсі. Ми наближаємось до завершення рефакторингу Boilerplate, але залишилося ще трохи зробити, перш ніж ми будемо готові об’єднати його з основною гілкою кодової бази.
Тож у цій публікації ми збираємося продовжити це. Тепер, якщо ви стежили за цим до цього моменту, ви повинні мати все, що вам потрібно з гілки розробки.
Якщо ні, обов’язково витягніть його, оскільки це те, де ми збираємося підібрати в решті публікації.
Шаблон віджета WordPress: рефакторинг, частина 12
Тепер, коли справа доходить до інтерфейсу, легко уявити інтерфейс як усе, що користувач бачить перед собою, незалежно від того, чи знаходиться це в адміністративній зоні чи ні.
Однак у цій серії було ясно, що ми розподіляємо те, що бачить користувач, між адміністративною областю та загальнодоступною областю сайту.
Отже, ми працюватимемо над частиною коду, яка відображає інформацію для користувача у загальнодоступній частині сайту. Ми збираємося почати з того, що просто прочитаємо інформацію та відобразимо її.
Потім у наступному дописі ми розглянемо роботу з умовною логікою щодо деяких параметрів, щоб побачити, чи потрібно нам щось робити.
З огляду на це, перейдемо до коду.
На даних, які ми будемо відображати
Пам’ятайте, що на даний момент віджет має три речі, які впливають на його відображення:
- назва віджета,
- вміст віджета,
- перемикач того, чи слід відображати назву
Третій варіант полягає насамперед у тому, щоб показати, як використовувати інший тип елемента. Тому що, технічно, якби ми не хотіли показувати назву віджета, ми б просто нічого не додавали до віджета.
Але я думаю, що це допомагає показати використання різних типів елементів та їхніх значень у практичний (або напівпрактичний) спосіб.
У будь-якому випадку, з огляду на це ми знаємо, що для кожного конкретного екземпляра віджета дані зберігаються разом із заголовком, вмістом і ім’ям відображуваного заголовка та ідентифікаторами, наданими 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
}
}
Після цього нам потрібно переконатися, що ми також пишемо це для інших класів. По-перше, ми обов’язково включимо його в наш клас віджетів :
<?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, щоб побачити, як вона відображається на інтерфейсі з урахуванням наданої нами розмітки.
Наразі вихід віджета має виглядати приблизно так:
Але це все, про що йдеться в цій публікації.
До остаточного рефактору
Останнє, що ми збираємося розглянути після цього, це посилення умовної логіки разом зі словом про кешування даних (оскільки ми вже робимо трохи цього в попередніх публікаціях).
Наразі, однак, не соромтеся погратися з тим, що ми маємо тут, разом із кодом, який ми не включили (наприклад, те, що може відображатися до або після віджета.
Їх навмисно виключено з цього прикладу, але вони не завжди можуть залишатися поза увагою, залежно від роботи, яку ви виконуєте.