de Tyler Jackson

Cum să faceți WordPress mai interesant cu API-ul WordPress, ACF și Express.js

Cum sa faceti Wordpress mai interesant cu API ul Wordpress ACF

Lucrez cu WordPress de când a proliferat ca sistem de gestionare a conținutului. Abia mă entuziasmez când clienții sau colegii de muncă îl mai menționează. Am „găsit lumina” în cadre mai robuste și am învățat mult mai multe despre diferitele părți ale aplicațiilor web personalizate.

Așadar, într-un efort de a-mi întineri pasiunea pentru WordPress, am început să caut diferite modalități de implementare a cadrului. Una dintre aceste modalități este separarea front-end-ului de back-end-ul și evitarea unora dintre punctele de durere ale utilizării etichetelor de șabloane WordPress și a sistemului de tematizare. Hai să aruncăm o privire.

Aplicații monolitice vs. aplicații distribuite

WordPress este un cadru monolitic, ceea ce înseamnă că diferitele părți ale cadrului (baza de date, stocarea fișierelor, structura de prezentare și fișierele de active, fișierele logice de afaceri) sunt ambalate împreună. Aceasta este o mare parte a motivului pentru care WordPress este atât de ușor de pus în funcțiune. Instalați MAMP, copiați peste cele mai recente fișiere WordPress, creați o bază de date și modificați fișierul wp-config.php fişier. Bun de plecare.

Vom merge împotriva convenției monolitice și vom împărți acest site WordPress în două părți diferite: front-end și back-end, prezentare și administrare.

Vom folosi WordPress pentru administrarea datelor aplicației noastre și vom folosi un plugin pentru a ajuta la crearea și gestionarea atributelor (câmpurilor) pentru tipul nostru personalizat de postare. Pentru partea de prezentare a lucrurilor, vom renunța în totalitate la o temă și vom consuma puncte finale API dintr-o aplicație Express.js.

Exemplu

În acest exemplu, vom construi o listă simplă de produse. Ideea este că aveți deja un site web dezvoltat de WordPress și doriți să gestionați o listă de produse de vânzare prin aceeași interfață. Dar doriți să creați un site complet diferit pentru magazin.

API-ul WordPress

De la versiunea 4.7, WordPress vă expune automat postările publicate (și alte date) prin intermediul acestuia API REST, prezentat într-un format JSON. Dacă ați dezvoltat un site web folosind WordPress 4.7+, pur și simplu adăugați /wp-json la adresa URL rădăcină și minunați-vă de peretele textului returnat.

Cu acest API integrat automat în instalarea WordPress, o mare parte din munca unei aplicații distribuite este deja realizată pentru noi. Crearea API poate fi un obstacol atunci când începeți cu acest nou mod de a gândi la aplicații. WordPress a creat un API fantastic, de bază, pentru a ne consuma datele în orice mod preferăm.

În acest moment, aș deranja internetul doar scriind un tutorial despre cum să instalez local WordPress. Deci, în schimb, mă duc vă îndreaptă spre o sursă de încredere pe această temă.

Indiferent de calea pe care o luați pentru a pune în funcțiune o instanță WordPress, ar trebui să o puteți accesa prin http://localhost sau o altă adresă URL. După ce avem o adresă URL, să facem un test rapid pentru a ne asigura că avem date care revin. Prefer un instrument precum Postman, dar îl vom simplifica și vom vizita următoarea adresă URL în browserul nostru (modificând URL-ul corespunzător, desigur).

http://localhost/mysite/wp-json

Aceasta ar trebui să returneze o listă cu toate punctele finale disponibile pentru API-ul REST al instalării dvs. WordPress.

Dar, de fapt, Postman …

Poştaş
Postman este singurul mediu de dezvoltare API complet, pentru dezvoltatorii API, folosit de peste 5 milioane de dezvoltatori …www.getpostman.com

Tipuri de postări personalizate

Deoarece WordPress ne limitează la două tipuri de date (Postări și pagini), va trebui să creăm un tip de postare personalizat pentru Produsele noastre. Acest lucru va crea o separare clară de postările de produs și de orice alte postări pe care le avem.

Există mai multe moduri diferite de a crea tipuri de postări personalizate. Aici, vom crea un singur fișier WordPress Plugin pentru a înregistra tipul de postare Produse.

<?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 );}%>

În timp ce este lung, acesta este un cod destul de standard pentru crearea unui tip de post personalizat în WordPress. Două lucruri de remarcat în $args matrice:

  • 'show_in_rest' => true face accesibil tipul de post personalizat prin API-ul REST
  • 'rest_base' => 'products setează numele pe care îl folosim pentru a accesa produse prin intermediul punctelor finale REST API

După ce ați afișat tipul de postare personalizat în administratorul WordPress, să ne asigurăm că putem obține un răspuns prin API (va trebui să creați un produs, astfel încât acesta să nu revină gol).

http://localhost/mysite/wp-json/wp/v2/products

Și iată ce obținem …

Cum sa faceti Wordpress mai interesant cu API ul Wordpress ACF

Dulce!

Câmpuri personalizate avansate

Încerc să-mi limitez cât mai mult utilizarea pluginurilor, dar voi face o excepție pentru Advanced Custom Fields (ACF). ACF elimină toată munca de la crearea și gestionarea câmpurilor personalizate pentru tipurile de postări. Accesați pagina Plugins, căutați câmpuri personalizate avansate, apoi faceți clic pe „Instalare” și „Activare”. Totul este gata.

Ar fi, de asemenea, redundant pentru mine să vă ghidez prin crearea unui grup de câmpuri utilizând câmpuri personalizate avansate, deci Voi lăsa documentația lor să te ghideze prin ea dacă nu știi cum.

Să creăm un grup de câmpuri numit „Meta de produs” și să adăugăm câmpuri pentru „Preț normal”, „Preț de reducere” și „Cantitate de inventar” și să le poziționăm în zona barei laterale.

1611444907 281 Cum sa faceti Wordpress mai interesant cu API ul Wordpress ACF

Bun.

Acum vine partea dificilă. Câmpurile pe care tocmai le-am creat prin ACF nu sunt expuse în mod implicit prin API-ul REST. Va trebui să ne folosim add_filter și rest_prepare_{$post_type} pentru a adăuga valorile câmpului personalizat la răspunsul JSON. Aici, am adăugat pur și simplu acest bit de cod în partea de jos a fișierului nostru plugin de tip post personalizat, din motive de scurtă durată.

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);

Mulțumită Cody Sand pentru bucata de mai sus.

Express.js

Aplicația noastră Express.js ne va oferi un cadru pentru consumarea API-ului WordPress și prezentarea produselor pe site-ul magazinului nostru. Deoarece consumăm pur și simplu un API, am putea folosi orice cadru ales de noi. Vue.js. Unghiular. Coloana vertebrală. Reacţiona. Șine. Django. Intermediar. Jekyll. Lumea front-end este strida ta.

Presupun că aveți deja instalat Node.js. Dacă nu, e simplu simplu. Să începem o nouă aplicație Express.js.

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

Aici, folosim pachetul Express Generator pentru a genera un schelet pentru aplicația noastră Express. De asemenea, vom folosi SASS pentru foi de stil și Jade Template Engine. Alege orice te simți confortabil. Nodemon va reporni aplicația noastră automat pentru noi când se modifică un fișier, iar biblioteca de solicitări ne va ajuta să facem cereri HTTP către API-ul WordPress. Să ne difuzăm aplicația Express:

nodemon

Acum, când tragem în sus http://localhost:3000 ar trebui să vedem aplicația noastră Express care rulează.

1611444907 113 Cum sa faceti Wordpress mai interesant cu API ul Wordpress ACF

Bine, acum să aducem produsele noastre.

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

În a noastră index.js fișier de rută, să includem biblioteca Request-Promise, apoi să apelăm la products punct final în ruta noastră rădăcină (/).

În cazul în care solicitarea are succes, atunci le redăm index vedere. Dacă există o eroare la cerere, o înregistrăm pur și simplu. Acum, vederea …

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

Folosind Jade, vom enumera pur și simplu produsele. Ok, hai să verificăm site-ul magazinului nostru.

1611444908 237 Cum sa faceti Wordpress mai interesant cu API ul Wordpress ACF

? Acolo e premiul tău. Vă voi lăsa pe voi să continuați pe drumul Express și să aflați cum să funcționați listarea produselor și paginile index.

Dincolo

Acesta este un exemplu destul de simplu al modului în care funcționează aplicațiile distribuite folosind WordPress. Am fi putut continua să separăm aplicația în chiar mai multe părți, integrând un CDN pentru stocarea media sau mutând baza de date pe un server separat. De asemenea, nu am acoperit autentificarea pentru API-ul WordPress, ceea ce este absolut necesar în producție.

De aici, puteți implementa Stripe sau un alt procesor de plăți și puteți avea un site de magazin complet funcțional. Sper că acest lucru i-a inspirat pe unii dintre voi să folosească WordPress în moduri diferite și să continue să utilizeze una dintre cele mai omniprezente soluții CMS de acolo. Codificare fericită!