Робота з класами, шаблонами та частинами в WordPress
Коли я сів, щоб почати цю публікацію, я планував написати щось набагато складніше, ніж те, чим я збираюся поділитися. Спочатку я хотів пройти одну з двох речей:
- Повний посібник із налаштування середовища розробки,
- Інтеграція інструментів якості коду в PhpStorm
Перший — це зосередження на ряді інших речей, про які я говорив, об’єднання їх усіх воєдино та отримання остаточного посилання. Але це те, що я хочу зібрати час, щоб переконатися, що все зроблено правильно.
Другий, я вважаю важливим, але я перебуваю на перехідній стадії з деякими своїми власними інструментами. Поки цього не буде зроблено, я б не хотів про це писати.
Незважаючи на це, завжди є про що покрити, чи не так? Тож сьогодні я вибрав щось простіше: розбивку використання класів, шаблонів і частин у плагінах WordPress на простому прикладі.
Класи, шаблони та частини в WordPress
Що стосується цієї конкретної теми, миттєве запитання, яке може спасти на думку, просте: навіщо говорити про це?
Тому що зараз 2018 рік, і ми все ще бачимо величезну суміш PHP, CSS, розмітки та JavaScript в одному файлі. Це не для того, щоб збивати інші технології, які роблять це за замовчуванням (наприклад, React). Я говорю саме про плагіни WordPress і написання підтримуваного коду таким чином, щоб [очевидно] його було легко підтримувати, писати та читати.
Практичний приклад
Припустімо, що ви працюєте над сторінкою підменю для чогось, що з’явиться під настроюваним меню. Ви реєструєте свою сторінку за допомогою WordPress API:
<?php
public function addMenuPage()
{
add_menu_page(
'Acme Menu',
'Acme Menu',
'manage_options',
'acme-custom-menu',
array($this, 'display'),
'dashicons-dashboard',
30
);
add_submenu_page(
'acme-custom-menu',
'Acme Menu',
'Acme Menu',
'Acme Menu',
'acme-custom-menu',
array($this, 'display')
);
}
Але коли ви налаштовуєте функцію зворотного виклику для відображення сторінки, ви не використовуєте функцію для змішування всіх різних мов разом. Натомість ви використовуєте його, щоб включити файл.
<?php
public function display()
{
include_once $this->pluginPath. 'views/acme-settings.php';
}
Зауважте, що у файлі вище я посилаюся на властивість $this->pluginPath. Це встановлено в конструкторі класу, щоб я міг легко отримати доступ до кореневої папки плагіна.
У будь-якому випадку, як може виглядати цей файл?
Шаблон і частковий
У цьому випадку я припускаю, що ваш шаблон – це те, що надаватиме інформацію користувачеві та запитуватиме його введення. Частковий буде відповідати за відображення повідомлення про успіх, помилку або попередження для користувача.
Шаблон
Щоб було просто, я збережу як шаблон, так і часткову частину якомога меншою. У цьому випадку припустимо, що ми збираємося відобразити сторінку, попросити користувача зберегти значення, і якщо значення буде збережено успішно (і, отже, існує в таблиці wp_options ), ми відобразимо повідомлення про успіх.
Це означає:
- шаблон відображатиме назву сторінки, інформацію, введення та кнопку збереження,
- partial відобразить повідомлення про успіх, коли це необхідно.
Подивіться на код шаблону нижче:
<?php
/**
* Renders the settings page for the plugin.
*/
?>
<div class="wrap">
<h1 class="wp-heading-inline"><?php echo get_admin_page_title(); ?></h1>
<?php if ($this->showSuccessMessage()) { ?>
<?php include_once 'partials/settings-saved.php'; ?>
?>
<div id="acme-settings-schedule">
<form id="acme-form" method="post" action="<?php echo esc_html(admin_url('admin-post.php')); ?>"">
<!-- This is where your settings go. -->
<p>
<?php
submit_button(
'Save',
'primary',
'acme-save-settings',
false
);
wp_nonce_field(
'acme-save',
'acme-save-nonce'
);
?>
</p>
</form>
</div>
</div>
Зауважте, що так, у нього є вхід, кнопка збереження та nonce, усі вони важливі (але виходять за рамки цієї публікації) для збереження інформації.
Але також зауважте, що він має допоміжну функцію, яку я використовую для перевірки наявності успішно збереженої інформації. Ця функція знаходиться в тому ж класі, що відповідає за відтворення шаблону.
Частковий
Це виглядає приблизно так:
<?php
public function showSuccessMessage()
{
return (false !== get_option('acme_custom_setting'));
}
І отримана частина дуже проста:
<?php
/**
* Renders the success message if the option has been properly saved.
*/
?>
<div class="notice-success notice is-dismissible">
<p>Your settings have been successfully saved.</p>
<button type="button" class="notice-dismiss">
<span class="screen-reader-text">Dismiss this notice.</span>
</button>
</div>
Звичайно, ваша реалізація функції може відрізнятися. Мета полягає не стільки в тому, щоб показати, як реалізувати функцію, скільки в тому, як використовувати функцію для перевірки інформації для відображення часткової інформації.
Є більше (але не тут)
Можливо, це те, що варто розмістити на початку статті.
Чесно кажучи, я вважаю, що це одна з тих речей, коли комусь може бути корисніше побачити це з самого початку (але тоді бракує контексту коду), а іншим буде корисніше в кінці, оскільки вони зможуть побачити, як це все підходить разом.
Незважаючи на це, я сподіваюся, що це врешті-решт дає ясність щодо того, як усе це поєднується.
Крім того, у місцях є багато місця для налаштувань, наприклад:
- перевірити, чи має користувач дозвіл на збереження,
- перевірка одноразового значення,
- дезінфекція та перевірка даних,
- визначити, що є успіхом, попередженнями та помилками.
Але якщо я хочу охопити все вищесказане, ми дивимося на надзвичайно довгий допис або довгу серію дописів. Це не те, що я проти, але це також те, що зараз не вартує зусиль.
Ніколи не соромтеся надсилати відгуки. Але тим часом я сподіваюся, що все це допоможе вам створити фундамент, на якому можна будувати під час роботи над вашим наступним проектом.