Virgin Child : thème enfant de Virgin

Publlié le 23 juillet 2021 par Merlin.
Catégorie : Blog
Étiquettes :

Dans mon article précédent, je vous présentais Virgin ; un thème wordpress de base qui introduisait tout nouveau projet propulsé sous mon CMS préféré. J’y relatais également l’importance des thèmes enfant. Je vous parle ici et maintenant donc du thème enfant “Virgin Child” de Virgin. Ce dernier est axé “API”.

Un thème enfant ?

Comme déjà expliqué précédemment, et sans entrer dans les détails, sachez qu’un thème WordPress s’accompagne le plus souvent de ce qu’on appelle un “thème enfant“. Si vous avez lu mon article précédent, vous pourrez en comprendre l’utilité principale ; à la mise à jour du thème principal, le thème enfant garde sa configuration et toutes ses spécificités. Le thème enfant ne peut pas fonctionner sans son thème parent.
Virgin Child est un thème enfant de Virgin.

Axé API ?

C’est une idée que j’ai eue au boulot. En agence, nous travaillons souvent à deux ; je développe des plateformes d’administration qui permettent au client d’alimenter le contenu de son site. On appelle cela du backend. Mon collègue quant à lui travaille en amont, en “frontend” ; il dessine le site et implémente du contenu de substitution en attendant que ce dernier devienne dynamique grâce à la plateforme proposée.

L’idée

L’idée est donc venue dans une réflexion d’efficacité. Nous cherchions à ne pas implémenter toute l’architecture du site codée en frontend. Même s’il est tout à fait possible de le faire avec WordPress ; soit un thème WordPress sur-mesure (comme c’est le cas pour lintermediaire.be par exemple) – je souhaitais intervenir que très peu dans le code frontend tout en rendant le projet éditable pas son futur propriétaire.

WordPress tout naturellement

Et dans le même temps, je voulais garder WordPress pour la gestion du contenu dynamique.
Dès lors, j’ai pensé à l’API WordPress, qui sous format json, affiche son contenu sans problèmes.
Mais évidemment, il faut dans ce cas une installation d’un WordPress “vierge” et non référencé. C’est l’objectif de ce thème enfant. Une fois installé et activé, la page d’accueil redirige le client vers le site placé à la racine. Le lien d’un article redirige l’éditeur vers la page seule dont il est question également. Pour avoir été plus loin dans ce type de projet, sachez qu’il est également possible de créer sa propre version de l’API, avec sa propre route et le contenu qu’on décide d’y afficher.

Voilà un exemple de code qui affiche les articles de l’intermédiaire en “customisant l’API”

/* api */
function virgin_child_api() {

    register_rest_field('post', 'custom_details', array(
        'get_callback' => function ( $post_arr ) {

            $image_src_arr = wp_get_attachment_image_src($post_arr['featured_media'], 'medium');

            $author_name = get_the_author_meta('display_name', $post_arr['author']);

            $categories_name = array();
            foreach ($post_arr['categories'] as $key => $value) {
                $categories_name[] = get_the_terms(intval($post_arr['ID']), 'category')[$key]->name;
            }

            $tags_name = array();
            foreach ($post_arr['tags'] as $key => $value) {
                $tags_name[] = get_the_terms($post_arr['ID'], 'post_tag')[$key]->name;
            }

            return array(
                "featured_media_medium" => $image_src_arr[0],
                "author_display_name" => $author_name,
                "categories_name" => $categories_name,
                "tags_name" => $tags_name,
            );
        },
        'update_callback' => null,
        'schema' => null
    )
);
}
add_action('rest_api_init', 'virgin_child_api');

Avec ce morceau de code, nous rajoutons le paramètre “custom_details” que nous pouvons ajouter dans l’url native de l’API WordPress. En spécifiant d’autres paramètres déjà prévus, nous pouvons avoir une série de données des articles publiés qui nous intéressent en les filtrant via l’url et cette fonction.

Voilà ce que l’exemple va donner sur l’intermédiaire si nous appelons l’url suivante :

https://lintermediaire.be/wp-json/wp/v2/posts?_fields=id,slug,title,link,excerpt,comment_status,custom_details,tags,categories,featured_media&per_page=5&order=desc

Traduction : affiche-moi, l’ID, le slug, le titre, l’url, la première partie du contenu, le statut des commentaires des 5 derniers articles du site. Affiche-moi aussi le détail de ces articles (que sont : le nom de l’auteur, l’url de l’image mise en avant, le nom des catégories et des étiquettes de chaque article.

Et pour conclure

C’est déjà le troisième article dédié à l’API WordPress, et je ne m’en lasse pas. Une fois encore, on remarquera la flexibilité des fonctions WordPress qui permettent ici la modification de l’affichage de son API.
Il ne reste plus qu’à créer sa propre API, avec l’aide de WordPress et pour customiser un site entièrement séparé et désigné sur-mesure, qui par exemple, pourra faire le lien avec l’API avec l’aide de Javascript

Source

Source officielle de la fonction utilisée : https://developer.wordpress.org/reference/functions/rest_api_init/

Virgin Child : thème enfant de Virgin

  • Écrit le 23 juillet 2021
  • Catégorie : Blog
  • Étiquettes : Wordpress

auteur : Merlin

Diplômé d'un baccalauréat en Communication et Journalisme, j'ai maintenant terminé ma formation de Web-Designer/concepteur d'interface pour entrer dans le monde du web qui me passionne depuis toujours. Bienvenue sur mon blog et bonne visite ! Merlin


Plus d'infos

Derniers commentaires