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

24 января 2018

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

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

Выполнение функциональных возможностей вкладок Введение одного элемента пользовательского интерфейса, с которым пользователь может взаимодействовать

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

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

С изложенным перед нами, давайте начнем.

Шаблоны вкладок, пересмотренные

Как уже упоминалось, в последнем посте мы ввели текстовую область на вкладку «Проект». Если вы следуете учебным пособиям и / или используете код в доступном репозитории, то вы должны увидеть что-то вроде этого:

Идея закладки «Проект» проста: это место, в котором пользователи будут умеет записывать заметки, собирать идеи и в основном иметь блокнот, чтобы помочь им собрать свои идеи до написания сообщения.

Ресурсы

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

Вот как это будет работать:

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

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

Найдите admin views partials resources.php и обновите код, чтобы он выглядел следующим образом:

<?php
/**
 * Provides the 'Resources' view for the corresponding tab in the Post Meta Box.
 *
 * @link       http://code.tutsplus.com/tutorials/creating-maintainable-wordpress-meta-boxes-the-front-end--cms-22383
 * @since      0.3.0
 *
 * @package    Authors_Commentary
 * @subpackage Authors_Commentary/admin/partials
 */
?>
<div class="inside hidden">
    <div id="authors-commentary-resources"></div><!-- #authors-commentary-resources -->
    <p><input type="submit" id="authors-commentary-add-resource" value="Add Resource" />
</div>

Затем давайте создадим файл в админ-активах js и назовем его resource.js. Выровняйте файл так, чтобы он выглядел следующим образом:

(function( $ ) {
    'use strict';
    $(function() {
    });
})( jQuery );

Затем нам нужно настроить обработчик событий таким образом, что когда пользователь нажимает кнопку «Добавить ресурс», он выполняет следующие действия:

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

Вот полный код для комментариев, как это сделать с дополнительной информацией ниже:

/**
 * Creates a new input element to be appended to the DOM that's used to represent a single
 * resource (be it an address, tweet, image URL, etc.) to be referenced in the post.
 *
 * @since    0.4.0
 * @param    object    $    A reference to the jQuery object
 * @return   object         An input element to be appended to the DOM.
 */
function createInputElement( $ ) {
    var $inputElement, iInputCount;
    /* First, count the number of input fields that already exist. This is how we're going to
     * implement the name and ID attributes of the element.
     */
    iInputCount = $( '#authors-commentary-resources' ).children().length;
    iInputCount++;
    // Next, create the actual input element and then return it to the caller
    $inputElement =
        $( '<input />' )
            .attr( 'type', 'text' )
            .attr( 'name', 'authors-commentary-resource-' + iInputCount )
            .attr( 'id', 'authors-commentary-resource-' + iInputCount )
            .attr( 'value', '' );
    return $inputElement;
}
(function( $ ) {
    'use strict';
    $(function() {
        var $inputElement;
        $( '#authors-commentary-add-resource' ).on( 'click', function( evt ) {
            evt.preventDefault();
            /* Create a new input element that will be used to capture the users input
             * and append it to the container just above this button.
             */
            $( '#authors-commentary-resources' ).append ( createInputElement( $ ) );
        });
    });
})( jQuery );

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

Также есть обработчик DOM-ready, который настраивает функцию для запуска, когда пользователь нажимает кнопку «Добавить ресурс». Когда кнопка нажата, вызывается вышеупомянутая функция, а затем элемент ввода добавляется к родительскому контейнеру.

Чтобы убедиться, что это выглядит лучше всего, нам нужно написать несколько стилей. Итак, как и мы с исходным кодом JavaScript, найдите admin admin css admin.css, а затем добавьте следующий код в конец файла:

#authors-commentary-resources input[type="text"] {
    width:         100%;
    margin-bottom: 10px;
}

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

Наконец, нам нужно поставить в очередь JavaScript, который мы написали в WordPress, чтобы он правильно реагировал на элементы, которые мы отобразили на нашем нашем частичном. Чтобы сделать это, найдите функцию enqueue_admin_scripts в файле admin-authors-commentary.php и обновите функцию так, чтобы она выглядела следующим образом:

<?php
/**
 * Includes the JavaScript necessary to control the toggling of the tabs in the
 * meta box that's represented by this class.
 *
 * @since    0.2.0
 */
public function enqueue_admin_scripts() {
    if ( 'post' === get_current_screen()->id ) {
        wp_enqueue_script(
            $this->name . '-tabs',
            plugin_dir_url( __FILE__ ) . 'authors-commentary/admin/assets/js/tabs.js',
            array( 'jquery' ),
            $this->versio
        );
        wp_enqueue_script(
            $this->name . '-resources',
            plugin_dir_url( __FILE__ ) . 'authors-commentary/admin/assets/js/resources.js',
            array( 'jquery' ),
            $this->versio
        );
    }
}

На этом этапе вы сможете загрузить редактор сообщений в своем браузере, перейдите на вкладку «Ресурсы» и затем динамически добавьте несколько полей ввода на свою страницу.

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

Опубликовано

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

Он должен содержать область, в которую мы могли бы оставить свои собственные комментарии и заметки, похожие на вкладку «Черновики»? Возможно. NЕсли оно должно содержать место для сохранения ссылок на комментарии и другие ресурсы, которые полезны для последующего наблюдения после публикации? NМожно ли это просто включить список всех комментариев на сообщение вместе со ссылкой на указанный комментарии и флажок для того, был ли комментарий получен ответ или нет.

Все три абсолютно приемлемые вещи для внесения на вкладку «Публикация»; однако, ради того, чтобы не изобретать колесо и продолжать внедрять новые функции, а также другие способы работы с API WordPress, мы перейдем к финальной опции.

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

Мы не будем включать в себя pingback для этого, так как автор обычно не отвечает на pingbacks.

С учетом этого загрузите admin views partials publish.php и добавьте следующий код:

<?php
/**
 * Provides the 'Published' view for the corresponding tab in the Post Meta Box.
 *
 * @link       http://code.tutsplus.com/tutorials/creating-maintainable-wordpress-meta-boxes-the-front-end--cms-22383
 * @since      0.3.0
 *
 * @package    Authors_Commentary
 * @subpackage Authors_Commentary/admin/partials
 */
?>
<div class="inside hidden">
    <?php $comments = $this->load_post_comments(); ?>
    <ul id="author-commentary-comments">
        <?php foreach ( $comments as $comment ) { ?>
            <li>
                <label for="authors-commentary-comment-<?php echo $comment->comment_ID ?>">
                    <input type="checkbox" id="authors-commentary-comment-<?php echo $comment->comment_ID ?>" name="authors-commentary-comment-<?php echo $comment->comment_ID ?>" />
                    This comment has received a reply.
                </label>
                <p>
                    <em><?php echo $comment->comment_author; ?></em>:
                    <?php echo $comment->comment_content; ?>
                </p>
                <hr />
            </li>
        <?php } ?>
    </ul>
</div>

Обратите внимание, что мы вызываем вызов функции load_post_comments. Поскольку мы еще не определили его, давайте перейдем к admin class-authors-commentary-meta-box.php и добавим следующий код:

<?php
/**
 * Loads all of the comments for the given post along with checkboxes used to
 * indicate whether or not they've received a reply or not.
 *
 * @since    0.4.0
 * @access   private
 */
private function load_post_comments() {
    $args = array(
        'post_id' => get_the_ID(),
        'status'  => 'approve'
    );
    $comments = get_comments( $args );
    return $comments;
}

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

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

Наконец, нам нужно добавить еще одну вещь в нашу таблицу стилей:

#author-commentary-comments label {
    font-weight: bold;
}

И мы закончили.

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

Переход к серверной стороне

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

В то же время не забудьте проверить код на GitHub (доступно в правой части этого сообщения) и не стесняйтесь оставлять все вопросы и комментарии в нижеприведенном сообщении.