Как сделать WordPress более увлекательным с помощью WordPress API, ACF и Express.js

kak sdelat wordpress bolee uvlekatelnym s pomoshhyu wordpress api acf?v=1656598220

от Тайлера Джексона

cg1ZLkou1TS9st2QX6eEyrq67sX8DuTk5DvG

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

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

Монолитные и распределенные программы

WordPress является монолитной структурой, которая означает, что различные части фреймворка (база данных, хранилище файлов, структура презентации и файлы активов, файлы бизнес-логики) упакованы вместе. Это большинство того, почему WordPress так легко запустить и запустить. Установите MAMP, скопируйте последние файлы WordPress, создайте базу данных и измените файл wp-config.php файл. Можешь уходить.

Мы собираемся идти вопреки монолитной конвенции и разбиваем этот сайт WordPress на две разные части: интерфейс и бэк-энд, презентация и администрирование.

Мы собираемся использовать WordPress для администрирования данных программы и использовать плагин, чтобы помочь с созданием и управлением атрибутами (полями) для нашего специального типа публикации. С точки зрения презентации мы полностью откажемся от темы и будем использовать конечные точки API из программы Express.js.

Пример

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

WordPress API

Начиная с версии 4.7 WordPress автоматически открывает ваши опубликованные публикации (и другие данные) через свой REST API, представленный в формате JSON. Если вы разработали сайт с помощью WordPress 4.7+, просто добавьте /wp-json к корневому URL-адресу и удивляйтесь стене возвращаемого текста.

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

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

Независимо от того, какой путь вы выберете, чтобы запустить экземпляр WordPress, вы должны иметь доступ к нему через или другой URL-адрес. Когда мы получим URL, давайте проведем краткий тест, чтобы убедиться, что данные возвращаются. Я предпочитаю такой инструмент, как Postman, но мы сделаем его простым и посетим следующий URL-адрес в нашем браузере (конечно, изменив URL-адрес соответственно).

/mysite/wp-json

Это должно вернуть список всех доступных конечных точек для REST API вашей установки WordPress.

Но на самом деле, почтальон…

Почтальон
Postman — это единственная полная среда разработки API для разработчиков API, использующая более 5 миллионов разработчиков.www.getpostman.com

Специальные типы публикаций

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

Существует несколько способов создания специальных типов публикаций. Здесь мы намерены создать единый файл WordPress Plugin для регистрации типа публикации Products.

<?php/*Plugin Name: Product Custom Post Type*/
function create_product_cpt() {  $labels = array(   'name' => __( 'Products', 'Post Type General Name', 'products' ),   'singular_name' => __( 'Product', 'Post Type Singular Name', 'products' ),   'menu_name' => __( 'Products', 'products' ),   'name_admin_bar' => __( 'Product', 'products' ),   'archives' => __( 'Product Archives', 'products' ),   'attributes' => __( 'Product Attributes', 'products' ),   'parent_item_colon' => __( 'Parent Product:', 'products' ),   'all_items' => __( 'All Products', 'products' ),   'add_new_item' => __( 'Add New Product', 'products' ),   'add_new' => __( 'Add New', 'products' ),   'new_item' => __( 'New Product', 'products' ),   'edit_item' => __( 'Edit Product', 'products' ),   'update_item' => __( 'Update Product', 'products' ),   'view_item' => __( 'View Product', 'products' ),   'view_items' => __( 'View Products', 'products' ),   'search_items' => __( 'Search Product', 'products' ),   'not_found' => __( 'Not found', 'products' ),   'not_found_in_trash' => __( 'Not found in Trash', 'products' ),   'featured_image' => __( 'Featured Image', 'products' ),   'set_featured_image' => __( 'Set featured image', 'products' ),   'remove_featured_image' => __( 'Remove featured image', 'products' ),   'use_featured_image' => __( 'Use as featured image', 'products' ),   'insert_into_item' => __( 'Insert into Product', 'products' ),   'uploaded_to_this_item' => __( 'Uploaded to this Product', 'products' ),   'items_list' => __( 'Products list', 'products' ),   'items_list_navigation' => __( 'Products list navigation', 'products' ),   'filter_items_list' => __( 'Filter Products list', 'products' ),  );
  $args = array(   'label' => __( 'Product', 'products' ),   'description' => __( '', 'products' ),   'labels' => $labels,   'menu_icon' => 'dashicons-products',   'supports' => array('title', 'editor', 'excerpt', 'thumbnail'),   'taxonomies' => array('products'),   'public' => true,   'show_ui' => true,   'show_in_menu' => true,   'menu_position' => 5,   'show_in_admin_bar' => true,   'show_in_nav_menus' => true,   'can_export' => true,   'has_archive' => true,   'hierarchical' => false,   'exclude_from_search' => false,   'show_in_rest' => true,   'rest_base' => 'products',   'publicly_queryable' => true,   'capability_type' => 'post',  );
  register_post_type( "product", $args );}%>

Хотя это достаточно долго, это достаточно стандартный код для создания специального типа публикации в WordPress. Две вещи, которые следует отметить в нашем $args массив:

  • 'show_in_rest' => true делает пользовательский тип публикации доступным через REST API
  • 'rest_base' => 'products’ устанавливает имя, которое мы используем для доступа к Продуктам через конечные точки REST API

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

/mysite/wp-json/wp/v2/products

И вот что мы получаем…

yMtobvc5rkQ1BwXsx8o6Eo8ECauKlEwcpxSq

Сладкий!

Расширенные специальные поля

Я стараюсь максимально ограничить использование плагинов, но сделаю исключение для расширенных пользовательских полей (ACF). ACF берет на себя всю работу по созданию и управлению пользовательскими полями для типов публикаций. Перейдите на страницу плагинов, найдите расширенные специальные поля, затем нажмите «Установить» и «Активировать». Готово.

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

Давайте создадим группу полей под названием «Цель продукта» и добавим поля «Обычная цена», «Цена со скидкой» и «Количество запасов» и разместим их в области боковой панели.

201h-1ofbdcglb1xjBintiMYYDK50fyzGnCr

хорошо.

Теперь наступает сложная часть. Поля, которые мы только что создали через ACF, не отображаются по умолчанию через REST API. Нам придется использовать рычаги add_filter и rest_prepare_{$post_type} чтобы добавить значение специального поля к ответу JSON. Здесь я просто добавил этот фрагмент кода в нижнюю часть нашего файла плагина специального типа публикации для краткости.

function my_rest_prepare_post($data, $post, $request) {  $_data = $data->data;    $fields = get_fields($post->ID);
  foreach ($fields as $key => $value){    $_data[$key] = get_field($key, $post->ID);  }
  $data->data = $_data;    return $data;}
add_filter("rest_prepare_product", 'my_rest_prepare_post', 10, 3);

Спасибо Коди Сенду за лакомый кусочек выше.

Express.js

Наша программа Express.js предоставит нам основу для использования WordPress API и представления продуктов на веб-сайте нашего магазина. Поскольку мы просто используем API, мы можем использовать любой фреймворк по своему выбору. Vue.js. Угловая. Позвоночник. Отреагировать. Рельсы. Джанго. Посредник. Джекил. Мир интерфейса – это ваша устрица.

Я предполагаю, что у вас уже установлен Node.js. Если вы этого не сделаете, это очень просто. Давайте запустим новое приложение Express.js.

npm install -g express-generator nodemonexpress --css=sass --view=jade --git mystorecd mystorenpm install --save request request-promise && npm install

Здесь мы используем пакет Express Generator для создания скелета нашей программы Express. Мы также будем использовать SASS для таблиц стилей и Jade Template Engine. Выбирайте то, что удобно. Nodemon автоматически перезапустит наше приложение, когда файл изменится, а библиотека запросов поможет нам делать HTTP-запросы в WordPress API. Давайте обслуживать наше приложение Express:

nodemon

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

A-sad4nUl9l7jldtfT6MjpyKsmbwN-L8232a

Ладно, теперь давайте привлечем наши продукты.

var express = require('express');var router = express.Router();const rp = require('request-promise');
/* GET index page. */router.get('/', function(req, res, next) {  rp({uri: ' json: true})  .then((response) => {    console.log(response);    res.render('index', {products: response});  })  .catch((err) => {    console.log(err);  });});
module.exports = router;

В нашем index.js route, давайте включим библиотеку Request-Promise, а затем сделаем вызов в products конечная точка в пределах нашего корневого маршрута (/).

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

extends layout
block content h1 MyStore ul  each product in products   li    product.title.rendered    product.price

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

JJJqnOrnpeXTXEAEpDTbuh7nJ7wTcEAHRUjx

? Вот ваш приз. Я оставлю вас по вашему усмотрению, чтобы продолжить путь Express и выяснить, как заработать страницы со списком продуктов и индексом.

За пределами

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

Отсюда вы можете ввести Stripe или другой платежный процессор и иметь полностью функциональный сайт магазина. Надеюсь, это вдохновило некоторых из вас использовать WordPress разными способами и продолжать использовать одно из самых распространенных решений CMS. Счастливого кодирования!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *