Статьи

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

Апрель 17, 2019

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

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

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

Планирование Авторский комментарий

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

При написании поста предположим, что мы хотим получить три конкретных фрагмента информации:

  1. Примечания, используемые при подготовке поста
  2. Активы и ресурсы, используемые на протяжении всего поста
  3. Твиты и ссылки на комментарии и отзывы после публикации

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

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

Вкладки Meta Box

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

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

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

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

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

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

Класс Meta Box

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

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?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/admin
 */
 
/**
 * 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/admin
 * @author Tom McFarlin <[email protected]>
 */
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() {
    }
 
}

Комментарии и содержание класса должны сделать его относительно простым для понимания. Это делает три вещи, но чтобы быть ясно:

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

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

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

1
2
3
4
5
/**
 * 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.php которое будет ссылаться на экземпляр мета-блока:

1
2
3
4
5
6
7
8
/**
 * 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;

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
/**
 * 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.

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

1
2
3
4
5
6
7
<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, добавьте следующий код, чтобы импортировать этот конкретный фрагмент разметки:

01
02
03
04
05
06
07
08
09
10
<?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, ничего не делая с нашей стороны.
  • У каждого якоря есть класс nav-tab первый из которых имеет класс nav-tab-active . Это снова дает нам немного стиля, который мы наследуем от WordPress.
  • Каждый якорь также имеет атрибут href в javascript:; потому что якоря на самом деле никуда нас не приведут. Вместо этого в будущем уроке мы будем использовать JavaScript для управления вкладками и содержимым, которое отображается внутри каждой из них.

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

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

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

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

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

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

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

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

1
add_action( ‘admin_enqueue_scripts’, array( $this, ‘enqueue_admin_styles’ ) );

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
/**
 * Enqueues all files specifically for the dashboard.
 *
 * @since 0.2.0
 */
public function enqueue_admin_styles() {
 
    wp_enqueue_style(
        $this->name .
        plugins_url( ‘authors-commentary/admin/assets/css/admin.css’ ),
        false,
        $this->version
    );
 
}

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

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

Подготовка к движению вперед

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

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

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

39
Share: