Crearea unei aplicații sau unui proiect front-end alimentat cu CMS WordPress
Publicat: 2021-08-17
Construirea unei aplicații front-end alimentată de WordPress necesită cunoașterea API-ului WP REST și AngularJS. Puteți construi orice aplicație cu WordPress ca backend. Vă puteți elibera de tema convențională și modelul de administrare care este popular în WordPress.
În acest articol despre construirea unui front-end alimentat de WordPress, vom crea o interfață care să conțină postări, categorii și pagini de listă de utilizatori.
Veți avea nevoie de ajutorul wireframe-urilor pentru a construi o aplicație front-end alimentată de WordPress.
Prezentare generală a proiectului
Este timpul să înțelegeți cerința și să planificați întregul proiect. Primul lucru de care avem nevoie este să listăm pagini și pagini single pentru postări, utilizatori și categorii.
Prin urmare, am avea nevoie de șabloane pentru acele pagini. Pagina de listare va afișa un anumit număr de postări cu paginare. Iată cum ar trebui să arate aproximativ o pagină de listare.
Iată cum ar trebui să arate un singur șablon de postare.
Cele mai multe dintre funcțiile pe care le avem în wireframe sunt disponibile cu API-ul WP REST, dar există câteva caracteristici suplimentare pe care trebuie să le adăugăm pe cont propriu, cum ar fi linkul pentru imaginile prezentate, numele categoriilor și numele autorilor.
Să facem un pas mai departe și să analizăm cum ar trebui să arate categoriile și cadrele de postare. Așa ar trebui să arate șablonul de categorii.
Așa ar trebui să arate șablonul utilizatorilor.
Pentru a avea unele dintre aceste funcții, aveți nevoie de un plugin însoțitor. De asemenea, veți observa că unele dintre caracteristici sunt comune în toate aceste șabloane și, prin urmare, ar trebui să creăm o directivă comună AngularJS, astfel încât caracteristicile comune să poată fi partajate și să nu existe repetiții.
Cerintele
Înainte de a putea începe cu proiectul, aveți nevoie de niște aplicații instalate.
1. Node.js pentru lucrul cu anumite comenzi.
2. GulpJS pentru optimizare și Git pentru clonare
3. Instalare WordPress cu pluginul WP REST API
În linia de comandă Github, trebuie să scrieți următoarele pentru a clona depozitul de pachete HTML -
$ git clona https://github.com/bilalvirgo10/quiescent-rest-api-html.git $ cale cd/către/clonat/repozitiv Următoarea linie va instala modulele Node.js. $ npm instalare
Instalarea va dura ceva timp și apoi va executa sursa folosind comanda $ gulp. Aceasta va crea un folder numit „dist” în care sunt păstrate toate fișierele sursă compilate.
E timpul să construiești pluginul însoțitor –
După cum am afirmat mai devreme, avem nevoie de crearea unui plugin însoțitor pentru construirea unei aplicații front-end alimentate de WordPress . Următoarele sunt lucrurile pe care le vom realiza prin construirea unui plugin însoțitor.
Caracteristicile sunt imaginea prezentată pentru o postare, numele autorului pentru o postare împreună cu imaginea autorului din contul Gravatar și, în final, lista de categorii pentru fiecare postare.
Accesați folderul wp-content/plugins și denumiți-l la fel ca pluginul dvs. De exemplu, mergem cu Quiescent-companion.
Intrați în folder și creați un fișier php cu același nume ca și folderul. Deschideți-l și inserați următorul cod, care este doar un început formal pentru crearea unui plugin.
/** * Nume plugin: Quiescent Companion * Descriere: plugin pentru a lucra cu tema Quiescent WP REST API * Autor: Bilal Shahid * URI autor: http://imbilal.com */
Construirea câmpului personalizat pentru imaginea prezentată
Lipiți următorul cod care este menit să creeze o imagine recomandată pentru o postare. Practic, va crea un câmp personalizat și puteți adăuga o imagine prezentată la fel cum o faceți.
/**
* Modificarea răspunsului pentru obiectul Post
*/
funcția quiescent_modify_post_response() {
// adăugarea unui câmp pentru imaginea prezentată
register_rest_field( 'post', 'imagine_reactivă', matrice(
'get_callback' ='quiescent_get_featured_image',
'update_callback' = nul,
„schemă” = nul
) );
}
add_action( 'rest_api_init', 'quiescent_modify_post_response');
Următorul cod este pentru a da un nume câmpului personalizat pentru imaginea prezentată și pentru a prelua imaginea.
/**
* Funcție pentru a prelua link-ul imaginii prezentate
*/
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');
returnează $attachment_info[0];
}
Folosind ultima metodă creată, puteți prelua o mulțime de informații despre o postare, cum ar fi ID-ul, titlul, conținutul și altele asemenea.
Următorul cod este pentru a crea o dimensiune personalizată pentru imaginea prezentată. Dimensiunea a fost menținută la 712 x 348 pixeli.
**
* Adăugarea dimensiunii imaginii pentru imaginea prezentată
*/
funcția quiescent_add_image_size() {
add_image_size( 'quiescent_post_thumbnail', 712, 348, true );
}
add_action('init', 'quiescent_add_image_size');
Salvați fișierul deoarece este adăugat primul câmp personalizat, mai sunt încă două.
Postare conexă: Imagine de copertă vs imaginea prezentată în Editorul de blocuri WordPress
Crearea câmpurilor personalizate pentru utilizatori și categorii
Următorul este codul pentru adăugarea câmpului pentru a afișa numele autorului.
// adăugarea unui câmp pentru numele autorului
register_rest_field( 'post', 'nume_autor_quiescent', array(
'get_callback' = 'quiescent_get_author_name',
'update_callback' = nul,
„schemă” = nul
) );
/**
* Funcție pentru a prelua numele autorului
*/
function quiescent_get_author_name( $post, $field_name, $request ) {
return get_the_author_meta( 'nume_afisat', $post['autor'] );
}
Următorul cod este pentru adăugarea numelor categoriilor.
// adăugarea unui câmp pentru categorii
register_rest_field( 'post', 'categorii_quiescent', array(
'get_callback' = 'quiescent_get_categories',
'update_callback' =null,
„schemă” = nul
) );
/**
* Funcție pentru a prelua categorii
*/
funcția quiescent_get_categories( $post, $field_name, $request ) {
return get_the_category( $post['id'] );
}
Salvați câmpul și acum avem quiescent_featured_image, quiescent_author_name, quiescent_categories ca cele trei câmpuri personalizate diferite pentru caracteristicile care nu sunt prezente în formă gata făcută.
Preluarea imaginii Gravatar Pn 207 x 207 Pixel Format
Ultimul lucru care lipsește este fotografia autorului de la Gravatar. Următorul cod este conceput doar pentru asta.
/**
* Modificarea răspunsului pentru obiectul User
*/
funcția quiescent_modify_user_response() {
}
add_action( 'rest_api_init', 'quiescent_modify_user_response');
/**
* Modificarea răspunsului pentru obiectul User
*/
funcția quiescent_modify_user_response() {
// adăugarea unui câmp pentru avatarul 207 X 207
register_rest_field( 'utilizator', 'url_avatar_quiescent', array(
'get_callback' ='quiescent_get_user_avatar',
'update_callback' = nul,
„schemă” = nul
) );
}
/**
* Preluarea avatarului pentru utilizator
*/
function quiescent_get_user_avatar( $user, $field_name, $request ) {
$args = matrice(
„dimensiune” = 207
);
return get_avatar_url( $user['id'], $args );
}
Acum, tot ce trebuie să faceți este să creați șabloane, rute și servicii pentru resurse și să finalizați cu ușurință construirea unui front-end alimentat de WordPress .