Быстрое прототипирование с помощью WordPress: от концепции до плагина

Последнее обновление Ноя 4, 2022

Содержание

Быстрое прототипирование с помощью 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, но на самом деле он ничего не сделает. Итак, давайте добавим плагину некоторую реальную функциональность.

Метабокс

Во-первых, нам нужно зарегистрировать метабокс. Для этого мы можем использовать хук 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 .

Основная ветвь также будет включать в себя последнюю версию всего объединенного кода, а ветвь разработки будет включать код, над которым я работаю, но он не завершен (и не стабилен).

И я начну делать это в следующем посте.

Сообщения серии

Источник записи: tommcfarlin.com