Создание клиентского приложения или проекта на базе WordPress CMS

Опубликовано: 2021-08-17

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

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

Вам понадобится помощь вайрфреймов для создания клиентского приложения на базе WordPress.

Обзор проекта

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

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

Ниже показано, как должен выглядеть отдельный шаблон сообщения.

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

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

Вот как должен выглядеть шаблон пользователей.

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

Требования

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

1. Node.js для работы с некоторыми командами.

2. GulpJS для оптимизации и Git для клонирования

3. Установка WordPress с плагином WP REST API

В командной строке Github вы должны написать следующее, чтобы клонировать репозиторий пакетов HTML:


Клон $ git https://github.com/bilalvirgo10/quiescent-rest-api-html.git

$ cd путь/к/клонированному/репозиторию

Следующая строка установит модули Node.js.

$ нпм установить

Установка займет некоторое время, а затем выполните исходный код с помощью команды $gulp. Это создаст папку с именем «dist», в которой хранятся все скомпилированные исходные файлы.

Время создать сопутствующий плагин —

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

Функции — это избранное изображение для сообщения, имя автора для сообщения вместе с изображением автора из учетной записи Gravatar и, наконец, список категорий для каждого сообщения.

Перейдите в папку wp-content/plugins и назовите ее так же, как ваш плагин. Например, мы идем с quiescent-спутником.

Зайдите в папку и создайте файл php с тем же именем, что и папка. Откройте его и вставьте следующий код, который является формальным началом создания плагина.

/**
 * Название плагина: Quiescent Companion
 * Описание: Плагин для работы с темой Quiescent WP REST API.
 * Автор: Билал Шахид
 * URI автора: http://imbilal.com
 */

Создание пользовательского поля для избранного изображения

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

/**
 * Изменение ответа для объекта Post
 */
функция quiescent_modify_post_response() {
    // добавляем поле для избранного изображения
    register_rest_field('сообщение', 'quiescent_featured_image', массив(
        'get_callback' = 'quiescent_get_featured_image',
        'update_callback' = ноль,
        'схема' = ноль
    ));
}
add_action('rest_api_init', 'quiescent_modify_post_response');

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

/**
 * Функция для получения ссылки на избранное изображение
 */
функция 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');
    вернуть $attachment_info[0];
}

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

Следующий код предназначен для создания нестандартного размера избранного изображения. Размер был сохранен на уровне 712 x 348 пикселей.

**
 * Добавление размера изображения для избранного изображения
 */
функция quiescent_add_image_size() {
    add_image_size('quiescent_post_thumbnail', 712, 348, правда);
}
add_action('init', 'quiescent_add_image_size');

Сохраните файл, потому что первое пользовательское поле добавлено, осталось еще два.

Связанный пост: Изображение обложки и избранное изображение в редакторе блоков WordPress

Создание настраиваемых полей для пользователей и категорий

Ниже приведен код для добавления поля для отображения имени автора.


// добавляем поле для имени автора
register_rest_field('сообщение', 'quiescent_author_name', массив(
    'get_callback' = 'quiescent_get_author_name',
    'update_callback' = ноль,
    'схема' = ноль
));

/**
 * Функция для получения имени автора
 */
функция quiescent_get_author_name($post, $field_name, $request) {
    return get_the_author_meta('display_name', $post['author'] );
}

Следующий код предназначен для добавления имен категорий.

// добавляем поле для категорий
register_rest_field('сообщение', 'quiescent_categories', массив(
    'get_callback' = 'quiescent_get_categories',
    'update_callback' = ноль,
    'схема' = ноль
));

/**
 * Функция для получения категорий
 */
функция quiescent_get_categories($post, $field_name, $request) {
    вернуть get_the_category($post['id']);
}

Сохраните поле, и теперь у нас есть quiescent_featured_image, quiescent_author_name, quiescent_categories в качестве трех разных настраиваемых полей для функций, которых нет в готовой форме.

Получение изображения Gravatar Pn 207 x 207 Pixel Format

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


/**
 * Изменение ответа для объекта User
 */
функция quiescent_modify_user_response() {
     
}
add_action('rest_api_init', 'quiescent_modify_user_response');

/**
 * Изменение ответа для объекта User
 */
функция quiescent_modify_user_response() {
    // добавляем поле для аватара 207 X 207
    register_rest_field('пользователь', 'quiescent_avatar_url', массив(
        'get_callback' = 'quiescent_get_user_avatar',
        'update_callback' = ноль,
        'схема' = ноль
    ));
}

/**
 * Получение аватара для пользователя
 */
функция quiescent_get_user_avatar($user, $field_name, $request) {
    $аргументы = массив(
        "размер" = 207
    );
     
    вернуть get_avatar_url($user['id'], $args);
}

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