Создание поддерживаемых мета-полей WordPress: макет

24 января 2018

В этой серии мы проследим, как создать поддерживаемые мета-поля WordPress. То есть, мы смотрим на некоторые лучшие практики, которые мы можем использовать в нашей разработке WordPress, чтобы убедиться, что мы написали код, который поддерживается самим нами или нашей командой, поскольку он продолжает развиваться с течением времени.

В первом посте мы рассмотрели начальную структуру каталогов и установили базовый код, необходимый для получения плагина, работающего в WordPress. В этом посте мы продолжим планирование и создание нашего плагина.

Мы также будем говорить о тех решениях, которые мы делаем, когда речь идет о разделении частей нашего кода и о том, как это влияет на ремонтопригодность.

Комментарий автора планирования

В предыдущем посте мы начали работу над плагином, называемым комментарием автора. Идея плагина состоит в том, что он позволит авторам публикаций оставлять различные заметки и активы, связанные с сообщением, которое использовалось либо как вдохновение, так и мысли после того, как сообщение было написано и получено, и другую подобную информацию.

При написании сообщения, предположим, что мы хотим захватить три отдельные части информации:

    Примечания, используемые при подготовке сообщения Ассоциации и ресурсы, используемые во время публикации Tweets и ссылки на комментарии и отзывы после публикация

Чтобы быть ясными, мы хотим иметь способ поддерживать записи, которые занимались созданием сообщения до его написания, ссылки на различные активы - будь то внешние статьи, изображения, видео, образцы кода и т. д. - а затем сохранить список твитов, ссылки на комментарии и различные фрагменты писем, которые мы получили.

На этом этапе у нас достаточно времени, чтобы начать подготовку мета-поля и макета с вкладками для него.

Вкладки метабокса

Прежде чем мы начнем писать любой код, давайте назовите вкладки, которые будут связаны с каждым из состояний нашего сообщения, как указано выше. Это поможет нам концептуально организовать элементы ввода, чтобы они были логически сгруппированы.

. Вы можете назвать все, что захотите, но если вы следуете вместе с этим учебником и предоставленным исходным кодом, то это то, что вы можете ожидать.

    Первая вкладка будет называться Черновик, так как она будет содержать все пункты, предложения и другие заметки, которые приступили к подготовке сообщения. Наша вкладка будет называться Ресурсы, так как она будет содержать информацию о других сообщениях, ссылках, видео и т. д., на которые мы можем ссылаться в нашем сообщении, или что мы можем вставлять в наш пост. Заячная вкладка будет называться опубликована, так как она будет содержать ссылки на комментарии, поля для электронной почты и другую информацию, все из которых являются относящийся к сообщению после того, как он был опубликован.

Прост достаточно, не так ли? Мы поговорим больше о элементах ввода для каждой вкладки, как только мы доберемся до этой точки в коде, но сейчас нам нужно сосредоточиться на создании мета-окна и реализации вкладок.

Создание метабокса

Чтобы создать мета-окно, мы воспользуемся функцией add_meta_box, как описано в WordPress Codex. Для этого мы собираемся внедрить новый класс, обновить загрузочный файл плагина и ввести некоторые представления, которые будут использоваться для рендеринга разметки в браузере.

Meta Box Class

Чтобы убедиться, что наш код хорошо инкапсулирован и что каждый класс представляет одну идею, мы собираемся создать класс Authors_Commentary_Meta_Box. Этот класс будет нести ответственность за регистрацию крючка с действием add_meta_box, настройку мета-поля и отображение его содержимого.

Для тех, кто не использует для написания плагинов объектно-ориентированным способом с помощью WordPress, этот подход позволяет нам сегментировать наши области ответственности, такие как мета-ящик, и иметь один класс, представляющий все, что входит в создание один.

Чтобы сделать это, сначала создайте class-authors-commentary-meta-box.php в каталоге admin. Затем добавьте следующий код:

<?php
/**
 * Represents the Author's Commentary Meta Box.
 *
 * @link       http://code.tutsplus.com/tutorials/creating-maintainable-wordpress-meta-boxes-the-layout--cms-22208
 * @since      0.2.0
 *
 * @package    Author_Commentary
 * @subpackage Author_Commentary/admi
 */
/**
 * Represents the Author's Commentary Meta Box.
 *
 * Registers the meta box with the WordPress API, sets its properties, and renders the content
 * by including the markup from its associated view.
 *
 * @package    Author_Commentary
 * @subpackage Author_Commentary/admi
 * @author     Tom McFarlin <tom@tommcfarlin.com>
 */
class Authors_Commentary_Meta_Box {
    /**
     * Register this class with the WordPress API
     *
     * @since    0.2.0
     */
    public function __construct() {
        add_action( 'add_meta_boxes', array( $this, 'add_meta_box' ) );
    }
    /**
     * The function responsible for creating the actual meta box.
     *
     * @since    0.2.0
     */
    public function add_meta_box() {
        add_meta_box(
            'authors-commentary',
            "Author's Commentary",
            array( $this, 'display_meta_box' ),
            'post',
            'normal',
            'default'
        );
    }
    /**
     * Renders the content of the meta box.
     *
     * @since    0.2.0
     */
    public function display_meta_box() {
    }
}

Комментарии и содержание класса должны сделать его относительно легким для понимания. Он выполняет три функции, но должен быть ясен:

    К конструктор регистрирует функцию add_meta_box с соответствующим действием WordPress. NУдаление функции add_meta_box определяет свойства мета-окна.
    Функция display_meta_box еще ничего не делает - мы Мы будем работать над этим на мгновение.

Прежде чем двигаться дальше, есть несколько изменений, которые нам нужно внести в остальную часть плагина.

Во-первых, нам нужно включить этот новый файл в файл начальной загрузки плагина. В authors-commentary.php добавьте следующую строку кода над текущим оператором require_once:

/**
 * The class that represents the meta box that will dispaly the navigation tabs and each of the
 * fields for the meta box.
 */
require_once plugin_dir_path( __FILE__ ) . 'admin/class-authors-commentary-meta-box.php';

Мы добавляем эту строку над исходным кодом, потому что исходный код зависит от этого конкретного файла для запуска; поэтому он должен быть загружен первым.

Затем нам нужно ввести новое свойство в стороне от admin class-authors-commentary.php, которое будет ссылаться на экземпляр мета-поля:

/**
 * A reference to the meta box.
 *
 * @since    0.2.0
 * @access   private
 * @var      Authors_Commentary_Meta_Box    $meta_box    A reference to the meta box for the plugin.
 */
private $meta_box;

Наконец, нам нужно создать экземпляр кода в конструкторе класса:

/**
 * Initialize the class and set its properties.
 *
 * @since    0.1.0
 * @var      string    $name       The name of this plugin.
 * @var      string    $version    The version of this plugin.
 */
public function __construct( $name, $version ) {
    $this->name = $name;
    $this->version = $version;
    $this->meta_box = new Authors_Commentary_Meta_Box();
}

На этом этапе вы должны активировать плагин, перейти к странице сообщений и увидеть пустой мета-ящик:

Ничего не слишком захватывающе, но у нас есть все, что нам нужно, чтобы начать вводить нашу навигацию с вкладками.

Добавление вкладок

На этом этапе мы готовы ввести вкладку навигационной части мета-поля. В конечном счете, наша цель - ввести разметку и стили для вкладки в этом сообщении, а затем реализовать поведение и элементы в следующем посте в серии.

С учетом сказанного давайте сначала создадим подкаталог views в каталоге admin. Технически мы сделали это в предыдущей статье; однако у нас не было содержимого в каталоге, поэтому он не был проверен в исходном элементе управления (таким образом, каталог не был добавлен, поэтому, если вы следуете вместе с репозиторием, теперь настало время создайте каталог).

Затем создайте файл в каталоге представлений, называемом authors-commentary-navigation.php. Этот файл будет в основном служить разметкой; однако к моменту, когда мы это сделаем с этим плагином, он будет содержать немного PHP.

Добавьте следующий файл в файл. Мы обсудим это более подробно после блока кода:

<div id="authors-commentary-navigation">
    <h2 class="nav-tab-wrapper current">
        <a class="nav-tab nav-tab-active" href="javascript:;">Draft</a>
        <a class="nav-tab" href="javascript:;">Resources</a>
        <a class="nav-tab" href="javascript:;">Published</a>
    </h2>
</div>

После этого вставьте следующий код в Authors_Commentary_Meta_Box, добавьте следующий код, чтобы импортировать этот фрагмент разметки:

<?php
/**
 * Renders the content of the meta box.
 *
 * @since    0.2.0
 */
public function display_meta_box() {
    include_once( 'views/authors-commentary-navigation.php' );
}

Помимо контейнера div, который у нас есть, обратите внимание на следующее:

Вернуло три анкера в элементе h2. Элемент h2 содержит атрибуты класса nav-tab-wrapper и current. Это позволяет нам наследовать стили непосредственно из WordPress, не делая ничего с нашей стороны. NВ каждом ядре есть класс nav-tab, первый из которых имеет активный класс nav-tab. Это снова дает нам немного стиля, из которого мы наследуем WordPress. NКаждый якорь также имеет атрибут href для javascript:; потому что якоря не собираются никуда уходить. Вместо этого в будущем учебнике мы будем использовать JavaScript для управления вкладками и содержимым, отображаемым внутри каждого из них.

На этом этапе вы должны увидеть следующее:

Обратите внимание, что все стили, которые применяются к вкладкам, были предоставлены WordPress. Единственное, что вы можете захотеть настроить - это граница, которая существует между вкладками и горизонтальной линией под ними.

Давайте сделаем это сейчас.

Включая таблицу стилей

В каталоге администратора добавьте еще одну подкаталог, называемый активами, а внутри него - каталог css. Затем создайте пустой файл с именем admin.css.

После этого включите следующие строки в файле CSS:

a.nav-tab {
    margin-bottom: -4px;
}

Затем обязательно включите следующий вызов в конструктор class-authors-commentary.php:

add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_styles' ) );

Наконец, добавьте следующую функцию - она ответственна за включение реальной таблицы стилей:

/**
 * Enqueues all files specifically for the dashboard.
 *
 * @since    0.2.0
 */
public function enqueue_admin_styles() {
    wp_enqueue_style(
        $this->name . '-admin',
        plugins_url( 'authors-commentary/admin/assets/css/admin.css' ),
        false,
        $this->versio
    );
}

На этом этапе он должен выглядеть намного чище:

С этим мы закончили все, что нам нужно сделать для базовой основы вкладок навигации для нашего мета-поля.

Подготовка к переходу вперед

В следующей статье мы собираемся представить содержимое каждой вкладки, и мы будем работать через JavaScript, который необходим для переключения вкладок и каждого их содержимого,

Для тех, кто более опытен в WordPress, эта серия статей может показаться, что она движется медленнее, но в этом-то и дело - мы стремимся быть настолько исчерпывающими, насколько это возможно, когда это произойдет не только для создания нашего пользовательского интерфейса, но и для объяснения обоснования каждого из наших решений.

Тем временем не забывайте проверять исходный код на GitHub, следовать дальше и оставлять любые вопросы или комментарии в приведенном ниже сообщении.