Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

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

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building a WordPress-Powered Front End With the WP REST API and AngularJS.
Building a WordPress-Powered Front End: Bootstrapping, Routing, and Services

Russian (Pусский) translation by Sergey Zhuk (you can also view the original English article)

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

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

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

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

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

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

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

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

  1. Посты
  2. Категории
  3. Пользователи

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

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

Post listing template

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

Single post template

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

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

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

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

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

Category template

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

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

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

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

Требования к учебному пособию

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание плагина-компаньона Quiescent Companion

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

В предыдущем разделе мы проанализировали требования для создания интерфейса с WP REST API и AngularJS. Давайте еще раз посмотрим на то, что нам необходимо для создания интерфейса:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. quiescent_featured_image
  2. quiescent_author_name
  3. Quiescent_categories

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

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

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

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

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

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

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

Что дальше?

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.