Статьи

Создание внешнего интерфейса на WordPress: введение и настройка

Февраль 17, 2019

Во вводной серии статей о API REST WP мы научились использовать базовые функциональные возможности, предоставляемые API, и гибкость, которую он предлагает при создании приложений на основе WordPress. Мы рассмотрели ресурсы, маршруты и методы, которые он поддерживает для выполнения операций CRUD.

В этой серии статей о создании внешнего интерфейса на основе WordPress с помощью API-интерфейса WP REST и AngularJS мы применим знания, полученные во вводной серии. Мы узнаем, как мы можем использовать эти знания для отделения традиционной модели администратора тем, поддерживаемой WordPress, до сих пор. Мы спланируем и создадим одностраничное приложение (которое я назвал Quiescent ) с бэкэндом WordPress, которое будет содержать посты, пользователей и страницы со списком категорий. Мы настроим маршрутизацию AngularJS и создадим пользовательскую директиву и контроллеры для ресурсов, упомянутых выше.

В первой части серии мы будем:

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

Итак, давайте начнем с оценки требований для построения внешнего интерфейса.

Планирование вещей

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

Как упоминалось ранее, нам нужны страницы со списками и отдельные страницы для следующих трех ресурсов:

  1. Сообщений
  2. категории
  3. пользователей

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

Ниже приведен каркас страницы со списком сообщений:

Шаблон сообщения

И ниже приведен каркас для шаблона одного сообщения:

Шаблон одного сообщения

Как мы видим на приведенных выше каркасах, требования довольно просты, как и в любом стандартном шаблоне блога. Но когда мы сравниваем вышеприведенные каркасы со стандартным ответом, который API-интерфейс WP REST предоставляет для сообщений, мы приходим к выводу, что в стандартном объекте ответа отсутствуют следующие элементы:

  • ссылка на рекомендуемое изображение
  • имя автора
  • названия категорий и ссылки

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

Теперь давайте проанализируем требования к ресурсам Categories и Users , рассмотрев следующие два каркаса.

Ниже приведен каркас для шаблона категории:

Шаблон категории

А вот каркас для пользовательского шаблона:

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

Одним из фундаментальных и наиболее рекомендуемых принципов разработки программного обеспечения является принцип СУХОЙ (не повторяй себя). Анализируя приведенные выше макеты, мы видим, что листинг публикации повторяется почти на всех шаблонах листинга в той или иной форме. Поэтому мы продолжим работу и создадим общую директиву AngularJS для списка публикаций, которая будет использоваться во всех вышеперечисленных шаблонах, и эта директива будет включать в себя такие функции, как постраничное разбиение на страницы и извлечение подмножества записей для заданных параметров.

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

Требования к учебнику

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

  • установка WordPress с включенным плагином WP REST API и некоторыми демонстрационными данными
  • Git для клонирования репозитория HTML (однако не обязательно, поскольку вы также можете загрузить репозиторий непосредственно с сайта GitHub через графический интерфейс)
  • Node.js для работы с командами npm и gulp
  • GulpJS для запуска задач минификации и оптимизации в пакете HTML

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

Загрузка и установка пакета HTML

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

Прежде всего, вам нужно клонировать репозиторий пакетов HTML из GitHub:

1
$ git clone https://github.com/bilalvirgo10/quiescent-rest-api-html.git

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

1
$ cd path/to/cloned/repository

Не имеет значения, используете ли вы OS X, Windows или Linux, потому что приведенная выше команда cd будет работать практически во всех операционных системах.

Теперь вам нужно установить модули Node.js, используя:

1
$ npm install

Выполнение вышеуказанной команды займет некоторое время, в зависимости от скорости вашего интернет-соединения.

Установив необходимые модули, вы можете, наконец, скомпилировать исходный код, используя команду gulp :

1
$ gulp

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

Команда npm install мы запускали выше, также устанавливает модуль Node.js под названием http-server который обеспечивает быстрый и простой способ настройки базового HTTP-сервера внутри любого каталога. Вы можете проверить скомпилированный источник, перейдя в каталог dist и выполнив следующую команду:

1
$ http-server

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

1
2
3
4
5
6
7
$ http-server
Starting up http-server, serving ./
Available on:
    https:192.168.0.104:8080
    http:192.168.56.1:8080
    http:127.0.0.1:8080
Hit CTRL-C to stop the server

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

Создание подключаемого модуля Quiescent Companion

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

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

  1. Рекомендуемое изображение для поста. Нам также нужно зарегистрировать новый размер изображения в WordPress для учета размера изображения в нашем HTML.
  2. Имя автора поста. Это можно получить с помощью идентификатора автора, который доступен в стандартном объекте ответа.
  3. Список категорий, связанных с постом. Это может быть достигнуто с помощью почтового идентификатора.
  4. Новый размер изображения для gravatar для учета размера изображения профиля автора в нашем HTML.

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

Давайте начнем с создания нового каталога для нашего плагина в папке / wp-content / plugins и присвоения ему названия quiescent-companion . Внутри этого каталога создайте новый файл PHP с именем quiescent-companion.php и вставьте следующий код для определения плагина:

1
2
3
4
5
6
7
<?php
/**
 * Plugin Name: Quiescent Companion
 * Description: Plugin to work with the Quiescent WP REST API theme
 * Author: Bilal Shahid
 * Author URI: http://imbilal.com
 */

Если вы читали вместе со мной со времени моей вводной серии статей об API-интерфейсе WP REST , то вы уже научились изменять ответ сервера для конкретного ресурса с помощью метода register_rest_field() . Если вы еще не взглянули на это, я рекомендую вам сделать это, прочитав статью об изменении ответов сервера.

Метод register_rest_field() принимает три аргумента для имени изменяемого ресурса, имени поля и массива аргументов для поля. Этот массив аргументов содержит обратный вызов поиска, обратный вызов обновления и схему поля.

Вот код для добавления настраиваемого поля для избранного изображения поста:

01
02
03
04
05
06
07
08
09
10
11
12
13
<?php
/**
 * Modifying the response for the Post object
 */
function quiescent_modify_post_response() {
    // adding a field for the featured image
    register_rest_field( ‘post’, ‘quiescent_featured_image’, array(
        ‘get_callback’ => ‘quiescent_get_featured_image’,
        ‘update_callback’ => null,
        ‘schema’ => null
    ) );
}
add_action( ‘rest_api_init’, ‘quiescent_modify_post_response’ );

Метод register_rest_field() вызывается с действием rest_api_init .

Рекомендуется всегда ставить префикс имени настраиваемого поля, чтобы оно не конфликтовало с другими полями в будущем. Поэтому мы назвали наше настраиваемое поле quiescent_featured_image . Метод, который отвечает за получение этого избранного изображения, называется quiescent_get_featured_image , и мы определяем его следующим образом:

1
2
3
4
5
6
7
8
9
<?php
/**
 * Function to retrieve featured image link
 */
function quiescent_get_featured_image( $post, $field_name, $request ) {
    $attachment_id = $post[‘featured_media’];
    $attachment_info = wp_get_attachment_image_src( $attachment_id, ‘quiescent_post_thumbnail’ );
    return $attachment_info[0];
}

Этот метод получает три аргумента для массива записей, имени поля и объекта запроса. Массив записей содержит необходимую информацию о текущем сообщении, включая его идентификатор, заголовок, содержание и т. Д. Используя эту информацию, мы можем получить любую произвольную информацию, связанную с сообщением. Следовательно, мы используем идентификатор медиа сообщения, чтобы получить ссылку на изображение wp_get_attachment_image_src() сообщения, используя метод wp_get_attachment_image_src() .

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

1
2
3
4
5
6
7
8
<?php
/**
 * Adding image size for the featured image
 */
function quiescent_add_image_size() {
    add_image_size( ‘quiescent_post_thumbnail’, 712, 348, true );
}
add_action( ‘init’, ‘quiescent_add_image_size’ );

Приведенный выше код использует метод add_image_size() для регистрации нового размера изображения 712 пикселей на 348 пикселей, и мы используем quiescent_post_thumbnail в качестве имени нового размера изображения.

Сохраните код и убедитесь, что плагин Quiescent Companion активирован в вашем администраторе WP. Отправьте тестовый запрос на маршрут /wp/v2/posts и сервер вернет ссылку на выбранное изображение в поле quiescent_featured_image в объекте ответа:

1
2
3
4
5
…
«tags»: [],
«quiescent_featured_image»: «http://localhost/wordpress/wp-content/uploads/2016/02/hot-chocolate-1058197_1920-712×348.jpg»,
«_links»: {
…

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

Чтобы добавить отображаемое имя автора сообщения, мы модифицируем функцию quiescent_modify_post_response() чтобы включить еще один вызов метода register_rest_field() как показано ниже:

1
2
3
4
5
6
7
<?php
// adding a field for author name
register_rest_field( ‘post’, ‘quiescent_author_name’, array(
    ‘get_callback’ => ‘quiescent_get_author_name’,
    ‘update_callback’ => null,
    ‘schema’ => null
) );

Мы вызываем это настраиваемое поле quiescent_author_name и функция обратного вызова для получения значения этого поля выглядит следующим образом:

1
2
3
4
5
6
7
<?php
/**
 * Function to retrieve author name
 */
function quiescent_get_author_name( $post, $field_name, $request ) {
    return get_the_author_meta( ‘display_name’, $post[‘author’] );
}

Здесь мы используем метод get_the_author_meta() для получения отображаемого имени автора сообщения.

Для последнего поля для имен категорий вызов метода register_rest_field() выглядит следующим образом:

1
2
3
4
5
6
7
<?php
// adding a field for categories
register_rest_field( ‘post’, ‘quiescent_categories’, array(
    ‘get_callback’ => ‘quiescent_get_categories’,
    ‘update_callback’ => null,
    ‘schema’ => null
) );

Вышеуказанный вызов должен идти внутри функции quiescent_modify_post_response() . Метод обратного вызова поиска quiescent_get_categories() :

1
2
3
4
5
6
7
<?php
/**
 * Function to retrieve categories
 */
function quiescent_get_categories( $post, $field_name, $request ) {
    return get_the_category( $post[‘id’] );
}

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

Теперь, когда мы написали весь приведенный выше код, теперь к стандартному объекту ответа для ресурса Posts добавлены три новых поля. Эти три новые поля:

  1. quiescent_featured_image
  2. quiescent_author_name
  3. quiescent_categories

По умолчанию стандартный ответ для ресурса Users содержит URL-адреса аватара для размеров 24 px, 48 px и 96 px. Последнее, что нам нужно сделать сейчас, это добавить URL-адрес для дополнительного размера граватара 207 пикселей для ресурса Users . Поэтому создайте новую функцию с именем quiescent_modify_user_response() и подключите ее к действию rest_api_init :

1
2
3
4
5
6
7
8
<?php
/**
 * Modifying the response for the User object
 */
function quiescent_modify_user_response() {
     
}
add_action( ‘rest_api_init’, ‘quiescent_modify_user_response’ );

Внутри этой функции мы добавляем вызов метода register_rest_field() для добавления поля с именем quiescent_avatar_url для объекта user :

01
02
03
04
05
06
07
08
09
10
11
12
<?php
/**
 * Modifying the response for the User object
 */
function quiescent_modify_user_response() {
    // adding a field for 207 X 207 avatar
    register_rest_field( ‘user’, ‘quiescent_avatar_url’, array(
        ‘get_callback’ => ‘quiescent_get_user_avatar’,
        ‘update_callback’ => null,
        ‘schema’ => null
    ) );
}

Метод обратного вызова quiescent_get_user_avatar() выглядит следующим образом:

01
02
03
04
05
06
07
08
09
10
11
<?php
/**
 * Retrieving the avatar for the user
 */
function quiescent_get_user_avatar( $user, $field_name, $request ) {
    $args = array(
        ‘size’ => 207
    );
     
    return get_avatar_url( $user[‘id’], $args );
}

Этот метод использует метод get_avatar_url() чтобы вернуть URL для граватара размером 207 px на 207 px.

Отправьте запрос GET на маршрут /wp/v2/users и сервер вернет дополнительное поле с именем quiescent_avatar_url вместе со стандартным объектом ответа:

1
2
3
…
«quiescent_avatar_url»: «http://0.gravatar.com/avatar/?s=207&d=mm&r=g»,
…

Это все о создании дополнительного модуля. Завершенный исходный код можно получить из репозитория Envato Tuts + GitHub .

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

Что дальше?

В этом руководстве мы заложили основу для создания внешнего интерфейса на основе WordPress с использованием WP REST API и AngularJS. Мы проанализировали требования проекта с помощью каркасов и создали дополнительный плагин для поддержки внешнего интерфейса.

В следующей части серии мы начнем работать с пакетом HTML, который мы загрузили ранее в этом руководстве. Мы загрузим приложение AngularJS, настроим маршрутизацию и создадим RESTful-сервисы для ресурсов Posts , Users и Categories , так что следите за обновлениями …

44
Share: