Creazione di un'applicazione o progetto front-end con tecnologia CMS WordPress
Pubblicato: 2021-08-17
La creazione di un'applicazione front-end basata su WordPress richiede la conoscenza dell'API REST di WP e AngularJS. Puoi creare qualsiasi applicazione con WordPress come back-end. Puoi liberarti dal tema convenzionale e dal modello di amministrazione che è popolare in WordPress.
In questo articolo sulla creazione di un front-end basato su WordPress, creeremo un'interfaccia contenente post in primo piano, categorie e pagine di elenchi degli utenti.
Avrai bisogno dell'aiuto di wireframe per creare un'applicazione front-end basata su WordPress.
La panoramica del progetto
È tempo di capire il requisito e pianificare l'intero progetto. La prima cosa di cui abbiamo bisogno è elencare pagine e pagine singole per post, utenti e categorie.
Pertanto, avremmo bisogno di modelli per quelle pagine. La pagina dell'elenco mostrerà un certo numero di post con impaginazione. Quanto segue è come dovrebbe apparire approssimativamente una pagina di elenco.
Quello che segue è come dovrebbe apparire un modello di post singolo.
La maggior parte delle funzionalità che abbiamo nel wireframe sono disponibili con l'API REST di WP, ma ci sono alcune funzionalità aggiuntive che dobbiamo aggiungere da sole come il collegamento all'immagine in primo piano, i nomi delle categorie e i nomi degli autori.
Facciamo un ulteriore passo avanti e analizziamo come dovrebbero apparire i wireframe delle categorie e dei post. Ecco come dovrebbe apparire il modello di categorie.
Ecco come dovrebbe apparire il modello degli utenti.
Per avere alcune di queste funzionalità, è necessario un plug-in complementare. Noteresti anche che alcune delle funzionalità sono comuni in tutti questi modelli e, quindi, dovremmo creare una direttiva AngularJS comune in modo che le funzionalità comuni possano essere condivise e non ci siano ripetizioni.
I requisiti
Prima di poter iniziare con il progetto, è necessario che siano installate alcune applicazioni.
1. Node.js per lavorare con determinati comandi.
2. GulpJS per l'ottimizzazione e Git per la clonazione
3. Installazione di WordPress con il plug-in WP REST API
Nella riga di comando di Github, devi scrivere quanto segue per clonare il repository del pacchetto HTML:
$ git clone https://github.com/bilalvirgo10/quiescent-rest-api-html.git $ cd percorso/a/clonato/repository La riga seguente installerà i moduli Node.js. $ npm installazione
L'installazione richiederà del tempo e quindi eseguirà il sorgente usando il comando $ gulp. Questo creerà una cartella denominata 'dist' in cui sono conservati tutti i file sorgente compilati.
È ora di creare il plug-in Companion –
Come affermato in precedenza, è necessario creare un plug-in complementare per la creazione di un'applicazione front-end basata su WordPress . Le seguenti sono le cose che otterremo creando un plugin complementare.
Le caratteristiche sono l'immagine in primo piano per un post, il nome dell'autore per un post insieme all'immagine dell'autore dall'account Gravatar e infine l'elenco delle categorie per ogni post.
Vai alla tua cartella wp-content/plugins e chiamala come il tuo plugin. Ad esempio, stiamo andando con il compagno quiescente.
Vai all'interno della cartella e crea un file php con lo stesso nome della cartella. Aprilo e incolla il codice seguente che è solo un inizio formale per creare un plug-in.
/** * Nome plug-in: Compagno di riposo * Descrizione: Plugin per lavorare con il tema Quiescent WP REST API * Autore: Bilal Shahid * URI dell'autore: http://imbilal.com */
Creazione del campo personalizzato per l'immagine in primo piano
Incolla il codice seguente che ha lo scopo di creare un'immagine in primo piano per un post. Fondamentalmente, creerà un campo personalizzato e potrai aggiungere un'immagine in primo piano proprio come fai tu.
/**
* Modifica della risposta per l'oggetto Post
*/
funzione quiescent_modify_post_response() {
// aggiunta di un campo per l'immagine in primo piano
register_rest_field( 'post', 'quiescent_featured_image', array(
'get_callback' ='quiescent_get_featured_image',
'update_callback' = nullo,
'schema' = nullo
) );
}
add_action('rest_api_init', 'quiescent_modify_post_response');
Il codice seguente serve per dare un nome al campo personalizzato per l'immagine in primo piano e per recuperare l'immagine.
/**
* Funzione per recuperare il collegamento dell'immagine in primo piano
*/
funzione quiescent_get_featured_image($post, $nome_campo, $richiesta) {
$attachment_id = $post['featured_media'];
$attachment_info = wp_get_attachment_image_src($attachment_id, 'quiescent_post_thumbnail');
restituisci $info_allegato[0];
}
Utilizzando l'ultimo metodo creato, puoi recuperare molte informazioni su un post come ID, titolo, contenuto e simili.
Il codice seguente serve per creare una dimensione personalizzata per l'immagine in primo piano. La dimensione è stata mantenuta a 712 x 348 pixel.
**
* Aggiunta della dimensione dell'immagine per l'immagine in primo piano
*/
funzione quiescent_add_image_size() {
add_image_size('quiescent_post_thumbnail', 712, 348, true);
}
add_action('init', 'quiescent_add_image_size');
Salva il file perché viene aggiunto il primo campo personalizzato, ne mancano altri due.
Post correlato: Immagine di copertina e immagine in primo piano nell'editor di blocchi di WordPress
Creazione di campi personalizzati per utenti e categorie
Di seguito è riportato il codice per aggiungere il campo per mostrare il nome dell'autore.
// aggiunta di un campo per il nome dell'autore
register_rest_field( 'post', 'quiescent_author_name', array(
'get_callback' = 'quiescent_get_author_name',
'update_callback' = nullo,
'schema' = nullo
) );
/**
* Funzione per recuperare il nome dell'autore
*/
funzione quiescent_get_author_name($post, $field_name, $request) {
return get_the_author_meta( 'display_name', $post['author'] );
}
Il codice seguente serve per aggiungere i nomi delle categorie.
// aggiunta di un campo per le categorie
register_rest_field( 'post', 'quiescent_categories', array(
'get_callback' = 'quiescent_get_categories',
'update_callback' =null,
'schema' = nullo
) );
/**
* Funzione per recuperare le categorie
*/
funzione quiescent_get_categories($post, $nome_campo, $richiesta) {
return get_the_category($post['id']);
}
Salva il campo e ora abbiamo quiescent_featured_image, quiescent_author_name, quiescent_categories come i tre diversi campi personalizzati per le funzionalità che non sono presenti nel modulo readymade.
Recupero dell'immagine Gravatar in formato Pn 207 x 207 pixel
L'ultima cosa che manca è la foto dell'autore di Gravatar. Il codice seguente è pensato proprio per questo.
/**
* Modifica della risposta per l'oggetto Utente
*/
funzione quiescent_modify_user_response() {
}
add_action( 'rest_api_init', 'quiescent_modify_user_response');
/**
* Modifica della risposta per l'oggetto Utente
*/
funzione quiescent_modify_user_response() {
// aggiunta di un campo per avatar 207 X 207
register_rest_field( 'utente', 'quiescent_avatar_url', array(
'get_callback' ='quiescent_get_user_avatar',
'update_callback' = nullo,
'schema' = nullo
) );
}
/**
* Recupero dell'avatar per l'utente
*/
funzione quiescent_get_user_avatar($utente, $nome_campo, $richiesta) {
$args = array(
'dimensione' = 207
);
return get_avatar_url($utente['id'], $args);
}
Ora, tutto ciò che devi fare è creare modelli, percorsi e servizi per le risorse e completare facilmente la creazione di un front-end basato su WordPress .