Étude de cas : Foodtruck • Relationnel + Options + CPT + Map + Shortcodes • Formation WordPress Capitaine WP

Pour terminer, je vous présente une étude de cas d’un vrai projet utilisant toute la puissance d’ACF pour simplifier la gestion des contenus d’un site client. L’objectif étant que ce dernier doit pouvoir administrer son site en un temps record.

Sommaire du cours

Présentation du projet
Enjeux & ergonomie
Côté administration
Côté site
1. Les shortcodes
2. La tâche Cron pour vider le cache

Présentation du projet

Le Black Rhino est un foodtruck Grenoblois qui propose d’excellents hamburgers.

La caravane du Black Rhino, le foodtruck à burgers — Emeric, le client, et sa caravane

Afin de gagner du temps et limiter le budget, le site a été réalisé avec Divi pour la construction des pages.

J’ai d’ailleurs connu quelques peines avec des soucis de fiabilité, crash, lenteurs et pertes de données qui ont fini de me convaincre d’utiliser à terme Elementor.

Le site présente le concept : une caravane à burgers qui sert les midis en semaine à différents endroits de la ville.

Capture d'écran de la page d'accueil du site Black Rhino — Le site Black Rhino, qui présente le concept

Les emplacements sont d’ailleurs susceptibles de varier d’une semaine sur l’autre. Une carte interactive permet donc d’afficher les différents emplacements de la semaine, pour savoir si la fameuse caravane viendra faire office près de son lieu de travail.

Capture d'écran de la Google Maps montrant les emplacements de la semaine — La carte des emplacements du Black Rhino

Quant à la carte des menus, elle reste minimaliste avec 2 à 4 recettes seulement, et certaines d’entre-elles sont susceptibles de changer périodiquement en fonction des saisons et des arrivages.

Capture d'écran de la carte des menus du Black Rhino — La carte des hamburgers proposés cette semaine

Du coup le site est présenté sous forme d’un One page où l’on retrouve toutes les informations pour assouvir son envie de bonne boustifaille.

Voir le site Black Rhino

Enjeux & ergonomie

Chaque dimanche, Emeric, le client, doit mettre à jour sa carte ainsi que les emplacements de la semaine. Je voulais éviter à tous prix qu’il doive à chaque fois ouvrir l’éditeur visuel de Divi pour modifier les informations à la main.

Je voulais plutôt lui proposer une expérience simple, facile, et sans risque. Il fallait que ce soit un no-brainer.

Pour les recettes par exemple, un expert de Divi peut très facilement enregistrer une section ou une colonne en bibliothèque, afin de s’en resservir plus tard. Du coup, il pourrait enregistrer les différents burgers de la carte et les appeler au besoin.

L'interface de l'éditeur visuel de Divi — L’interface de Divi peut s’avérer un peu complexe

Mais pour un débutant, c’est plus compliqué : Il pourrait se tromper et casser la structure section/colonne, car la modification des contenus n’est pas forcément évidente.

Bref, c’était hors de question de lui proposer une telle expérience ! C’est pour cela que j’ai imaginé un système simplifié à base de champs ACF. Et pour réussir cela, j’ai utilisé des Custom Post Types, une page d’options, le champ répéteur et relationnel, et j’ai créé un shortcode pour l’affichage sur le site.

Conseil

L’objectif est donc de proposer une interface unique, simple, qui permette la modification des contenus en un clic sans aucun risque d’erreur.

Voici à quoi va ressembler cette interface :

L'interface de saisie des emplacements et burgers de la semaine, à base de champs ACF — L’interface de saisie des burgers et emplacements

Une seule page pour choisir les emplacements et les burgers de la semaine. Un clic sur Update, et le tour est joué.

Avec une telle interface, la modification du contenu pour la semaine ne prend pas plus d’une petite minute chaque dimanche.

Côté administration

On va commencer notre tour du propriétaire par un passage dans l’interface d’administration. Comme j’ai utilisé le thème Divi, j’ai préalablement créé un thème enfant pour ajouter les bouts de code qui vont suivre.

Les CPT

Pour commencer, j’ai créé 2 Custom Post Types « Emplacements » et « Burgers ». Le but va être de créer tous les emplacements possibles, ainsi que tous les burgers potentiellement présentés dans la carte.

1 burger = une publication dans le CPT « Burgers » ;
1 emplacement = une publication dans le CPT « Emplacements ».

Les CPT ne sont pas publics et n’ont pas d’archive : je ne veux pas de page dédiée à chaque burger (même si ça aurait pu être une possibilité), ni une page qui dresse une liste des plats. Pareil pour les emplacements.

L’objectif va être de les afficher dans notre page d’accueil uniquement.

PHP

functions.php

<?php
function black_rhino_create_post_type() {

  $labels = array(
    'name' => 'Burgers',
    'menu_name' => 'Burgers'
  );

  $args = array(
    'labels' => $labels,
    'public' => false,
    'supports' => array( 'title', 'thumbnail' ),
    'menu_position' => 6,
    'show_ui' => true,
    'menu_icon' => 'dashicons-heart',
  );

  register_post_type( 'burgers', $args );

  $labels = array(
    'name' => 'Emplacements',
    'menu_name' => 'Emplacements'
  );

  $args = array(
    'labels' => $labels,
    'public' => false,
    'supports' => array( 'title' ),
    'menu_position' => 7,
    'show_ui' => true,
    'menu_icon' => 'dashicons-location',
  );

  register_post_type( 'location', $args );
}
add_action( 'init', 'black_rhino_create_post_type' );

J’ai donc indiqué false au paramètre public pour ne pas créer de pages sur le site. J’ai par contre mis show_ui à true afin d’avoir tout de même l’interface des CPT dans l’admin.

Le saviez-vous ?

Certaines extensions utilisent des CPT pour stocker des données brutes. En passant public à false, elles ne sont visibles ni en front, ni en back. On est du coup vraiment sur du stockage pur et dur de données.

Le groupe de champs Burgers

J’ai ensuite créé un groupe de champs pour les hamburgers, assigné au type de publication « Burgers ».

Capture d'écran du formulaire de saisie des hamburgers — L’interface d’édition des hamburgers

On y retrouve plusieurs champs :

Un champ zone de texte pour lister les ingrédients ;
Un champ répéteur pour lister les prix et les différentes options.

Je n’ai pas eu besoin d’ajouter un champ image pour la photo du burger puisque j’utilise l’image mise en avant. Quant au nom du burger, il est dans le titre de la publication.

Le groupe de champ Emplacements

Du côté des emplacements, j’ai créé un autre groupe de champs.

Capture d'écran du formulaire de saisie des emplacements — L’interface d’édition des emplacements

Cette fois j’ai :

Un champ texte pour le nom du lieu ;
Un champ zone de texte pour l’adresse ;
Un champ Google Maps pour définir l’emplacement sur une carte.

J’ai utilisé un champ pour le nom du lieu, car certains lieux portent le même nom mais l’adresse n’est pas la même. Le titre de la publication est donc réservé au client, qui pourra ajouter des indications pour distinguer les lieux proches.

La page d’options

Et pour faire la sélection des emplacements et burgers de la semaine, j’ai décidé de créer un menu dédié, que j’ai appelé « Cette semaine ». Pour cela j’ai déclaré une page d’options ACF.

PHP

functions.php

<?php 
if( function_exists( 'acf_add_options_page' ) ) {

    acf_add_options_page( array(
        'page_title' 	=> 'Cette semaine',
        'menu_title'	=> 'Cette semaine',
        'menu_slug' 	=> 'find-us',
        'capability'	=> 'edit_posts',
        'icon_url'      => 'dashicons-calendar',
        'position'      => 5,
        'redirect'		=> false
    ) );
}

J’ai ensuite créé un groupe de champs que j’ai assigné à cette page d’options.

Capture d'écran des champs ACF de la page d'option — La page d’options, la plus importante pour le client

Voici les champs :

Un répéteur qui permet :
- D’indiquer le jour de la semaine sur un simple champ texte ;
- Et de choisir l’emplacement via un champ objet publication ;
Enfin, un champ relationnel permet de choisir les burgers de la semaine.

Le champ objet publication est limité à la sélection d’emplacements, alors que le relationnel est limité au CPT des burgers.

Du coup, pour le client tout tourne autour de ces 3 éléments du menu WordPress :

Les 3 menus importants pour le client : Cette semaine, Burgers, Emplacements

Et donc à aucun moment il n’a besoin d’aller dans Pages, et modifier le contenu via l’éditeur visuel de Divi.

Côté site

Maintenant on va passer côté public. Il va falloir afficher toutes ces informations dans notre page.

Les shortcodes

Et le plus simple pour cela, c’est de créer un shortcode pour chaque zone dynamique.

Le shortcode (code court en français) est un code entre crochets à intégrer dans le contenu d’un site WordPress. Un code court fait appel à une fonction définie en PHP, appelée par WordPress au moment de la génération de la page. [gallery] générera par exemple une galerie photo. Beaucoup d’extensions les utilisent pour s’interfacer facilement avec le CMS

Traduction : Code court

J’en aurai besoin de 3 :

Un shortcode [burgers] s’occupera d’afficher la carte des burgers ;
Un autre [emplacements] s’occupera de la liste des emplacements ;
Et un dernier [map] qui affichera la Google Maps.

Ensuite c’est facile puisqu’il suffit de coller ces codes n’importe où dans l’éditeur de contenu (de Gutenberg, de Divi, d’Elementor…).

Insérer un shortcode dans Divi — L’insertion d’un shortcode dans Divi

En d’autres termes, il suffit de coller le shortcode dans un bloc « Texte » de Divi.

J’ai parlé de l’approche hybride dans la formation Développeur de thèmes. Elle consiste à utiliser un page builder tout en conservant la possibilité de faire du sur-mesure.

J’explique d’ailleurs dans un cours comment créer un shortcode WordPress.

Le shortcode burgers

Voici à quoi ressemble le code PHP du shortcode des burgers :

PHP

functions.php

<?php 
add_shortcode( 'burgers', 'black_rhino_burgers' );

// Burgers Shortcode
function black_rhino_burgers( $atts ) {

    $burgers = get_field( 'burgers', 'options' );

    $html = "<div class='burgers'>";

    // Relationnel Burgers de la page options
    foreach( $burgers as $burger_id ) {

        $burger = get_post( $burger_id );

        $name = $burger->post_title;
        $picture = get_the_post_thumbnail( $burger_id, 'large' );
        $desc = get_field( 'description', $burger_id );
        $meals = get_field( 'prices', $burger_id );

        $html .= "
        <div class='burgers__col'>
            <h3>$name</h3>
            $picture
            <p>$desc</p>
            <table>
        ";
      
        // Répéteur options et prix dans le CPT Burgers
        foreach( $meals as $meal ) {

            if( $meal['bold'] ) {
            	$label = "<strong>" . $meal['label'] . "</strong>";
            	$price = "<strong>" . $meal['price'] . "</strong>";
            } else {
            	$label = $meal['label'];
            	$price = $meal['price'];
            }

            $html .= "<tr><td>$label</td><td>$price</td></tr>";
        }

        $html .= "</table></div>";
    }
    $html .= "</div>";

	return $html;
}

Le premier foreach permet d’itérer dans les burgers de notre relationnel, et le second permet d’aller chercher les options et prix du répéteur.

Un shortcode n’affiche jamais directement un contenu via un echo, mais va renvoyer du HTML via return.

Le shortcode emplacements

Pour les emplacements, c’est à peu près la même chose.

PHP

functions.php

<?php 
add_shortcode( 'emplacements', 'black_rhino_locations' );

function black_rhino_locations( $atts ) {

    // Je récupère les date de la semaine en cours, 
    // ou de la prochaine si on est dimanche 
    $when = date('D') == 'Sun' ? 'next' : 'this';
    $monday = date( "d", strtotime( "monday $when week" ) );
    $friday = date_i18n( "d F Y", strtotime( "friday $when week" ) );
   
    // Le champ répéteur de la page options
    $locations = get_field( 'find_us', 'options' );

    $html = "
    	<div class='planning'>
      	<p>Semaine du <strong>$monday au $friday</strong></p>  
    ";

    foreach( $locations as $location ) {
        $day = $location['day'];
        $place = get_field( 'name', $location['place'] );
        $address = get_field( 'address', $location['place'] );

        $html .= "
            <p><strong>$day</strong> : $place<br>
            	<em>$address</em>
            </p>";
  	}

    $html .= "</div>";

	return $html;
}

Ce code me permet d’afficher la liste des emplacements dans la colonne de gauche « Nous trouver cette semaine ».

Il y a quelques fonctions de traitement de dates PHP afin de définir les premier et dernier jours de la semaine.

Le shortcode Google Maps

Et enfin, il nous faut gérer l’affichage de la Google Maps, comme on a appris à le faire précédemment.

PHP

functions.php

<?php
add_shortcode( 'map', 'black_rhino_map' );

function black_rhino_map( $atts ) {
	
    // Champ répéteur de la page options
    $locations = get_field( 'find_us', 'options' );

    $html = "<div class='google-map' data-zoom='14'>";

    foreach( $locations as $location ) {
        $day = esc_html( $location['day'] );
        $place = esc_html( get_field( 'name', $location['place'] ) );
        $address = esc_html( get_field( 'address', $location['place'] ) );
        
        // Coordonnées Gmap de la publication du CPT Emplacements
        $coords = get_field( 'position', $location['place'] );

        if( $coords ) {
            $lat = esc_attr( $coords['lat'] );
            $lng = esc_attr( $coords['lng'] );

            $html .= "
                <div class='marker' data-lat='$lat' data-lng='$lng'>
                    <h4>$place</h4>
                    <p><strong>$day</strong></p>
                    <p>$address</p>
                </div>
          ";
        }
    }

    $html .= "</div>";

    return $html;
}

Il ne faut bien sûr pas oublier de charger les scripts dédiés à la Google Maps, et indiquer la clé d’API obtenue sur Google Cloud Platform.

PHP

functions.php

<?php 
define( 'RHINO_GMAP_API_KEY', 'AIxxxxx' );

function black_rhino_enqueue_assets() {
    
    // Charger le thème parent
	wp_enqueue_style( 
        'parent-style', 
        get_template_directory_uri() . '/style.css' 
    ); 
	
    // Script Gmap officiel
	wp_enqueue_script( 
        'google-map', 
    	'https://maps.googleapis.com/maps/api/js?key=' . RHINO_GMAP_API_KEY, 
        array(), 
        null, 
        true 
    );
    
    // Script de gestion de la Gmap fourni par ACF
	wp_enqueue_script( 
        'map', 
        get_stylesheet_directory_uri() . '/js/map.js', 
        array( 'jquery', 'google-map' ), 
        '1.0', 
        true 
    ); 
}
add_action( 'wp_enqueue_scripts', 'black_rhino_enqueue_assets' );

// Clé d'API pour l'admin WP
function black_rhino_acf_google_map_api( $api ){
    $api['key'] = RHINO_GMAP_API_KEY;
    return $api;
}
add_filter( 'acf/fields/google_map/api', 'black_rhino_acf_google_map_api' );

La tâche Cron pour vider le cache

À ce niveau-là, tout est opérationnel ou presque, et mon client Emeric est content de pouvoir administrer son site aussi simplement.

Mais il reste un dernier petit souci : le cache. J’utilise WP Rocket et toutes les pages sont mises en cache pour un site plus performant.

Le système est intelligent puisqu’à chaque fois qu’on modifie une page, le cache correspondant est purgé pour prendre en compte les nouvelles données.

Mais là, souci, puisqu’on modifie des données sur une page options, qui sont ensuite intégrées dans un shortcode. Je vais donc devoir purger automatiquement le cache de la page d’accueil tous les dimanches en fin de journée.

Et pour cela je vais créer une tâche CRON sur le serveur. Le site étant sur o2switch, la documentation indique comment programmer une telle tâche. Voici le code PHP lancé par celle-ci :

PHP

cron.php

<?php 

// Charger le coeur de WordPress
require( '../../../wp-load.php' );
 
// Purger le cache
if ( function_exists( 'rocket_clean_post' ) ) {
	rocket_clean_post( '113' ); // ID de ma page d'accueil
}
 
// Précharger le cache
wp_remote_get( 'https://black-rhino.fr' );

Et voilà. Grâce à ACF, j’ai pu construire une interface vraiment plus simple pour le client, même si j’ai utilisé un page builder en premier lieu. Grâce aux différents champs, aux pages d’options et toutes les autres subtilités d’ACF, vous allez pouvoir faire des miracles en un temps record.

Maintenant, c’est à votre tour. N’hésitez pas à me faire part de vos projets et problématiques ACF !

Questions, réponses et commentaires

Chandelz

Le 23 décembre 2020

Super instructif! Merci !!!

Répondre
Myriam DEMAINE

Le 17 septembre 2021

J’adore l’approche pour faciliter la mise à jour hebdomadaire du site !!
Et je confirme, les burgers de Black Rhino sont extras 🙂

Répondre
1. Maxime BJ
  
  Le 17 septembre 2021
  
  On est bien d’accord ! 😀
  
  Répondre
L'instant Reims

Le 27 février 2024

Article très instructif 🙂

Répondre

Laisser un commentaire Annuler la réponse