Construire une application ou un projet frontal alimenté par le CMS WordPress

La création d'une application frontale alimentée par WordPress nécessite la connaissance de l'API WP REST et d'AngularJS. Vous pouvez créer n'importe quelle application avec WordPress comme backend. Vous pouvez vous libérer du modèle de thème et d'administration conventionnel qui est populaire dans WordPress.

Dans cet article sur la création d'un frontal alimenté par WordPress, nous allons créer une interface contenant des publications, des catégories et des pages de liste d'utilisateurs.

Vous aurez besoin de l'aide de wireframes pour créer une application frontale alimentée par WordPress.

L'aperçu du projet

Il est temps de comprendre l'exigence et de planifier l'ensemble du projet. La première chose dont nous avons besoin est de répertorier les pages et les pages individuelles pour les publications, les utilisateurs et les catégories.

Par conséquent, nous aurions besoin de modèles pour ces pages. La page de liste affichera un certain nombre de publications avec pagination. Voici à quoi devrait ressembler grosso modo une page de liste.

Voici à quoi devrait ressembler un modèle de publication unique.

La plupart des fonctionnalités que nous avons dans le wireframe sont disponibles avec l'API WP REST, mais il y a quelques fonctionnalités supplémentaires que nous devons ajouter nous-mêmes comme le lien d'image en vedette, les noms de catégories et les noms d'auteurs.

Allons plus loin et analysons à quoi devraient ressembler les wireframes des catégories et des publications. Voici à quoi devrait ressembler le modèle de catégories.

Voici à quoi devrait ressembler le modèle des utilisateurs.

Pour avoir certaines de ces fonctionnalités, vous auriez besoin d'un plugin compagnon. Vous remarquerez également que certaines des fonctionnalités sont communes à tous ces modèles et, par conséquent, nous devrions créer une directive AngularJS commune afin que les fonctionnalités communes puissent être partagées et qu'il n'y ait pas de répétition.

Les exigences

Avant de pouvoir démarrer le projet, vous devez installer certaines applications.

1. Node.js pour travailler avec certaines commandes.

2. GulpJS pour l'optimisation et Git pour le clonage

3. Installation de WordPress avec le plug-in WP REST API

Dans la ligne de commande Github, vous devez écrire ce qui suit pour cloner le référentiel de packages HTML -

$ git clone https://github.com/bilalvirgo10/quiescent-rest-api-html.git

$ cd chemin/vers/cloné/dépôt

La ligne suivante installera les modules Node.js.

$ npm installer

L'installation prendra un certain temps, puis exécutera la source à l'aide de la commande $ gulp. Cela créera un dossier nommé 'dist' où tous les fichiers source compilés sont conservés.

Il est temps de créer le plugin Companion -

Comme nous l'avons indiqué précédemment, nous avons besoin de créer des plugins compagnons pour créer une application frontale alimentée par WordPress . Voici les choses que nous allons réaliser en créant un plugin compagnon.

Les caractéristiques sont l'image en vedette pour un article, le nom de l'auteur d'un article ainsi que l'image de l'auteur du compte Gravatar et enfin la liste des catégories pour chaque article.

Allez dans votre dossier wp-content/plugins et nommez-le de la même manière que votre plugin. Par exemple, nous allons avec un compagnon quiescent.

Allez dans le dossier et créez un fichier php avec le même nom que le dossier. Ouvrez-le et collez le code suivant qui n'est qu'un début formel pour créer un plugin.

/**
 * Nom du plugin : Quiescent Companion
 * Description : Plugin pour travailler avec le thème Quiescent WP REST API
 * Auteur : Bilal Shahid
 * URI de l'auteur : http://imbilal.com
 */

Création du champ personnalisé pour l'image sélectionnée

Collez le code suivant destiné à créer une image sélectionnée pour un message. Fondamentalement, cela créera un champ personnalisé et vous pourrez ajouter une image en vedette comme vous le faites.

/**
 * Modification de la réponse pour l'objet Post
 */
function quiescent_modify_post_response() {
    // ajout d'un champ pour l'image sélectionnée
    register_rest_field( 'post', 'quiescent_featured_image', array(
        'get_callback' ='quiescent_get_featured_image',
        'update_callback' = null,
        'schéma' = null
    ) );
}
add_action( 'rest_api_init', 'quiescent_modify_post_response' );

Le code suivant sert à donner un nom au champ personnalisé pour l'image sélectionnée et à récupérer l'image.

/**
 * Fonction pour récupérer le lien de l'image en vedette
 */
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' );
    retourne $attachment_info[0] ;
}

En utilisant la dernière méthode créée, vous pouvez récupérer de nombreuses informations sur un message, telles que son identifiant, son titre, son contenu, etc.

Le code suivant permet de créer une taille personnalisée pour l'image sélectionnée. La taille a été maintenue à 712 x 348 pixels.

**
 * Ajout de la taille de l'image pour l'image sélectionnée
 */
function quiescent_add_image_size() {
    add_image_size( 'quiescent_post_thumbnail', 712, 348, true );
}
add_action( 'init', 'quiescent_add_image_size' );

Enregistrez le fichier car le premier champ personnalisé est ajouté, il en reste deux.

Article connexe : image de couverture contre image en vedette dans l'éditeur de blocs WordPress

Construire les champs personnalisés pour les utilisateurs et les catégories

Voici le code pour ajouter le champ pour afficher le nom de l'auteur.

// ajout d'un champ pour le nom de l'auteur
register_rest_field( 'post', 'quiescent_author_name', array(
    'get_callback' = 'quiescent_get_author_name',
    'update_callback' = null,
    'schéma' = null
) );

/**
 * Fonction pour récupérer le nom de l'auteur
 */
function quiescent_get_author_name( $post, $field_name, $request ) {
    return get_the_author_meta( 'display_name', $post['author'] );
}

Le code suivant sert à ajouter les noms des catégories.

// ajout d'un champ pour les catégories
register_rest_field( 'post', 'quiescent_categories', array(
    'get_callback' = 'quiescent_get_categories',
    'update_callback' = null,
    'schéma' = null
) );

/**
 * Fonction pour récupérer les catégories
 */
function quiescent_get_categories( $post, $field_name, $request ) {
    return get_the_category( $post['id'] );
}

Enregistrez le champ et nous avons maintenant quiescent_featured_image, quiescent_author_name, quiescent_categories comme trois champs personnalisés différents pour les fonctionnalités qui ne sont pas présentes dans le formulaire prêt à l'emploi.

Récupération de l'image Gravatar Pn 207 x 207 Pixel Format

La dernière chose qui manque est la photo de l'auteur de Gravatar. Le code suivant est destiné uniquement à cela.

/**
 * Modification de la réponse pour l'objet Utilisateur
 */
function quiescent_modify_user_response() {
     
}
add_action( 'rest_api_init', 'quiescent_modify_user_response' );

/**
 * Modification de la réponse pour l'objet Utilisateur
 */
function quiescent_modify_user_response() {
    // ajout d'un champ pour l'avatar 207 X 207
    register_rest_field( 'utilisateur', 'quiescent_avatar_url', array(
        'get_callback' ='quiescent_get_user_avatar',
        'update_callback' = null,
        'schéma' = null
    ) );
}

/**
 * Récupération de l'avatar de l'utilisateur
 */
function quiescent_get_user_avatar( $user, $field_name, $request ) {
    $args = tableau(
        'taille' = 207
    );
     
    return get_avatar_url( $user['id'], $args );
}

Maintenant, tout ce que vous avez à faire est de créer des modèles, des itinéraires et des services pour les ressources et de créer facilement un frontal alimenté par WordPress .