Швидке створення прототипів за допомогою WordPress: від концепції до плагіна
У минулій статті я говорив про використання WordPress як інструменту для швидкої розробки програм .
Але чим довше я працюю з WordPress і чим більше коду я бачу, тим більший потенціал я усвідомлюю як платформа для швидкого створення прототипів і подальшого використання цих прототипів у повністю розроблених програмах.
Ці плагіни можуть бути веб-додатками, плагінами, темами, веб-сайтами тощо. Для цілей цієї публікації це не має значення. Натомість важливо те, що, наприклад:
- у вас є ідея для плагіна,
- ви хочете побачити, як це може працювати в WordPress,
- ти швидко щось збираєш,
- ви починаєте вдосконалювати його.
Для багатьох, хто бере участь у більш серйозній розробці WordPress, я подумав, що, можливо, варто поглянути на те, як це виглядає. А саме, я візьму ідею для плагіна, створю його прототип, а потім удосконалю його в добре організований, об’єктно-орієнтований плагін.
Тож у наступній серії статей я розповім про цей процес.
Швидке створення прототипів за допомогою WordPress: концепція
Хоча це не завжди так, початкові концепції, скажімо, плагіна випливають із потреби в чомусь, що ви можете забажати для себе чи для когось іншого.
Якщо ви схожі на мене, це допоможе накидати деякі початкові ідеї щодо того, як це може працювати, і зробити будь-які необхідні нотатки, які допоможуть у розвитку.
Мої гострі дизайнерські навички для прототипу.
Звичайно, для інших вони можуть вибрати прямо в IDE і почати працювати над кодом. І оскільки на даному етапі це лише швидкий прототип, у цьому немає нічого поганого.
Як ви можете бачити з ескізу вище, я збираюся написати невеликий плагін, який відображатиме мої три останні публікації в метавікні.
Ідея плагіна така:
- Коли я пишу публікацію, маючи легке посилання на мої три останні публікації, я зможу легко посилатися на них, коли хочу поділитися своїм вмістом у соціальних мережах.
Можливо, призначення плагіна здається безглуздим; можливо, не. Пам’ятайте, що будь-що, що ви вирішите створити, має бути корисним як вам, так і вашій аудиторії. Якщо хтось інший цього не зрозуміє, це добре.
Початок процесу
Тепер, коли у нас є базова ідея, ми знаємо, що нам знадобиться кілька речей:
- Файл плагіна для відображення на екрані плагіна WordPress,
- метабокс для відображення публікацій,
- Запит для отримання дописів,
- Спосіб відображення повідомлення, якщо немає публікацій для відображення.
Завдяки використанню кількох базових хуків і API WordPress ми можемо щось зібрати, гм, швидко. Ось як:
Заголовок плагіна
Пам’ятайте, що заголовок плагіна відповідає за відображення вмісту плагіна – це назва, опис, версія та автор – на екрані плагіна. Переконайтеся, що він стислий, описовий і по суті.
<?php
/**
* Three Recent Posts
*
* @package TRP
* @author Tom McFarlin
* @copyright 2017 Tom McFarlin
* @license MIT
*
* @wordpress-plugin
* Plugin Name: Three Recent Posts
* Plugin URI: https://tommcfarlin.com/rapid-prototyping/
* Description: Displays the three mot recent posts in your post editor screen.
* Version: 0.1.0
* Author: Tom McFarlin
* Author URI: https://tommcfarlin.com
* Text Domain: three-recent-posts
* License: MIT
* License URI: http://www.gnu.org/licenses/gpl-3.0.txt
*/Після того, як це буде написано, плагін з’явиться в області адміністрування WordPress, але насправді він нічого не робитиме. Тож давайте надамо плагіну певну функціональність.
Meta Box
По-перше, нам потрібно зареєструвати метабокс. Для цього ми можемо використати хук add_meta_boxes. Його легко визначити та підключити до нашого метабокса. Зверніть увагу на коментарі до кожного аргументу методу.
<?php
add_action( 'add_meta_boxes', 'three_recent_posts_meta_box' );
/**
* Registers the Meta Box with WordPress. Defines the ID, title, display function,
* and the post type on which it will live.
*/
function three_recent_posts_meta_box() {
add_meta_box(
'three-recent-posts', // Meta Box ID.
'Three Recent Posts', // Meta Box Title.
'three_recent_posts_display', // Function for rendering the meta box.
'post', // Post type on which this meta box will live.
'side' // Where the meta box will be displayed.
);
}Майже зауважте, що у нас є функція, яка відповідає за відображення інформації. Ми повинні це визначити, інакше WordPress спробує запустити функцію, якої не існує, і це призведе до помилки.
Давайте зараз визначимо цю функцію :
<?php
/**
* If there are posts to display, renders them in the metabox. Otherwise, displays
* a note that there are no posts to display.
*/
function three_recent_posts_display() {
$query = _three_recent_posts_get();
if ($query->have_posts()) {
_three_recent_posts_show_posts( $query );
} else {
_three_recent_posts_no_posts();
}
}
Тепер, якщо ви помітили, ця функція покладається на три різні функції, щоб допомогти їй виконувати свою роботу. Тому нам також потрібно визначити ці функції. В ідеалі кожна з цих функцій повинна мати функціональне призначення, однак, враховуючи, що ми швидко створюємо прототип цього проекту, у нас може бути трохи більше роботи на функцію, ніж зазвичай.
Запит на повідомлення
По-перше, нам потрібно зробити запит на публікації. Для цього ми скористаємося WP_Query.
<?php
/**
* Defines a query for retrieving the three most recent posts and orders them by
* descing date (with the most recent being first).
*
* @return WP_Query $query The query for retrieving the three most recent posts.
*/
function _three_recent_posts_get() {
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'desc',
);
$query = new WP_Query( $args );
return $query;
}
Зверніть увагу, що ми повертаємо екземпляр об’єкта запиту. Незабаром ми зробимо більше.
Відображення результату
Якщо є дописи для відображення, ми використаємо функцію для перегляду дописів, знайдених екземпляром WP_Query, і візуалізуємо постійне посилання та заголовок у впорядкованому списку.
<?php
/**
* Creates the content for the meta box if there are posts to display. Creates a notice
* that up to three posts will be displayed, then links to each of the three most recent
* post.
*
* @param WP_Query $query The query that contains results to render in the display.
*/
function _three_recent_posts_show_posts( $query) {
// There may not always be three posts, so display a message explaining.
$html = '<p>';
$html .= '<span class="description">';
$html .= 'Displays up to the three most recent posts.';
$html .= '</span>';
$html .= '</p>';
// Create an ordered lists of the most recent posts.
$html .= '<ol>';
while ($query->have_posts()) {
$query->the_post();
$html .= '<li>';
$html .= '<a href="'. get_the_permalink(). '">';
$html .= get_the_title();
$html .= '</a>';
$html .= '</li>';
}
$html .= '</ol>';
echo $html;
}
Зауважте, що в цьому списку буде до трьох, але не обов’язково всього три.
Немає результатів
Якщо результатів немає, то нам потрібно показати користувачеві повідомлення про те, що запит не знайшов повідомлень. Код може виглядати приблизно так :
<?php
/**
* Displays a message in the meta box if there are no recent posts.
*/
function _three_recent_posts_no_posts() {
$html .= '<span class="description">';
$html .= 'There are no recent posts.';
$html .= '</span>';
echo $html;
}
Звичайно, ви можете налаштувати повідомлення для цього все на свій розсуд.
Швидке створення прототипів, готово.
На цьому етапі є повнофункціональний плагін. Однак це не без проблем:
- Ми змішуємо HTML із нашим PHP, що призводить до більш тісного зв’язку, ніж це необхідно,
- HTML жодним чином не продезінфікований і не захищений,
- Для цих функцій абсолютно відсутня об’єктна орієнтація, що, хоча деякі можуть стверджувати, що це непотрібно, робить їх дуже немодульними.
Але суть цієї серії полягає в тому, щоб взяти швидкий прототип і перемістити його в плагін більш професійного рівня. Отже, ми зробили першу частину, і тепер настав час переходити до другої фази.
Тим часом ви можете стежити за розробкою цього плагіна на GitHub. Я позначатиму кожен випуск, який відповідає публікації в блозі. Тож цю конкретну публікацію можна знайти в тезі 0.1.0 .
Головна гілка також включатиме останню версію всього об’єднаного коду, а гілка розробки включатиме код, над яким я працюю, але він не є повним (і не стабільним).
І я почну це робити в наступній публікації.
Повідомлення серії
- Швидке створення прототипів за допомогою WordPress: від концепції до плагіна
- Швидке створення прототипів за допомогою WordPress: аналіз концепції
- Швидке створення прототипів: прототип до коду, частина 1
- Швидке створення прототипів: прототип до коду, частина 2
- Швидке створення прототипів: представлення автозавантаження