Dans l'article précédent qui résume un talk fait lors d'un meetup Wordpess Lille, nous avons découvert ce qu'était Advanced Custom Fields. La suite de la présentation portait sur l'utilisation du plugin en situation réelle. Pour l'occasion j'ai imaginé le cas pratique qui suit. (Cette partie est assez longue et chargée en images)

Utiliser ACF en réponse à une problématique client.

Advanced Custom Fields peut être une réponse simple, efficace et rapide à différents types de problèmes que peuvent rencontrer des utilisateurs de WordPress. Dans l'exemple qui suit, nous imaginons être une agence web, un freelance ou autres prestataires web.

Le brief client

Voilà le mail reçu de notre nouveau client :

Advanced Custom Fields

Bonjour, je suis Madame Prune, de la société Kiexistepa

Mes collaborateurs et moi même nous réunissons souvent et publions nos comptes-rendus de réunions sur notre site internet.

Nous souhaiterions améliorer la mise en page de ces documents car elle est pour le moment assez basique. De même, nous aimerions pouvoir enrichir facilement le contenu, voir document ci-joint.

Il faudrait également que le tout reste simple pour nos rédacteurs.

Wireframes de la page

En examinant la maquette de la page, on se rend rapidement compte qu'il est compliqué de reproduire de manière simple ce schéma pour chaque nouveau compte-rendu. WordPress offre de multiples moyens pour y arriver.

On pourrait par exemple utiliser des shortcodes mais même si ils semblent simples d'usage pour beaucoup, ils peuvent vite poser problème aux néophytes.

On pourrait utiliser un éditeur visuel comme Visual Composer, mais comment s'assurer que chacun, une fois le fonctionnement comprit, respectera strictement la mise en page.

Advanced Custom Fields

En utilisant ACF pour ce problème, on s'assure de conserver un rendu constant pour tous les comptes-rendus et on offre une solution d'édition très simple pour les rédacteurs les moins chevronnés. Si ils savent se connecter à l'admin, ils sauront créer un compte-rendu.

Créer un nouveau type de post

WordPress propose de base deux types de contenus, les posts que l'on désignent souvent comme étant les articles de blogs et les pages qui reçoivent tout type de contenu.

Comme il serait difficile de classer tout le contenu avec ces deux seuls types, on peut en ajouter de nouveaux, ce sont les Custom post types. Pour faire ça, on peut ajouter quelques lignes de codes dans son fichier functions.php par exemple. On peut aussi utiliser des plugins pour gagner du temps.

On utilise ici le plugin Custom Post Type UI pour créer un nouveau type de posts "Réunions". Une fois créé, on constate une nouvelle entrée "Réunion" dans le menu principal de l'admin de WordPress. On peut dès lors ajouter de nouvelles réunions comme on crée de nouveaux articles.

Custom post type ui

Lister les réunions

Par défaut, WordPress liste les articles de blog avec sa boucle légendaire. On a donc besoin de créer une nouvelle boucle pour lui indiquer que l'on souhaite lister nos réunions.

Il existe différentes manières pour lister des post-types. Si on suit la hiérachie de template nos réunions peuvent être listées via le fichier archive.php ou mieux archive-reunion.php

Dans le cas présent, on placera la boucle dans un template de page qu'on assigne à la page réunion. Cela permet de conserver une zone éditable depuis l'admin et d'avoir facilement et sans code additionnel un lien dans le menu principal du site.
Voici la boucle à ajouter

// Lister les posts d'un custom post type
<?php $query = new WP_Query( array( 'post-type' => 'reunion' ) ); ?>

    <?php while ( $query->have_posts() ) : $query->the_post(); ?>

        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

    <?php endwhile; ?>

Création des champs

Les champs principaux

On retourne dans l'admin d'Advanced Custom Fields et on crée un groupe de champs qui comporte l'ensemble des champs pour la page réunion, puis les champs Objet et Photo on utilisant les types de champs texte et image.

Advanced Custom Fields

Le champ répéteur

On crée ensuite un champ "répéteur", ce qui nous permet de créer un sous-groupe de champs qui pourra être appelé de multiples fois dans la page réunion.

Advanced Custom Fields

Le sous-groupe

Comme pour les champs Objet et Photo, on ajoute les champs relatifs aux intervenants : photo, nom, sujet dans le sous-groupe.

Advanced Custom Fields

Avant de partir

On crée un champ de type objet > article qui permet de récupérer une liste de pages à mettre en lien et on définit un règle pour l'affichage des champs

Advanced Custom Fields

On utilise plus souvent des plugins comme Yet Another Related Post pour ce genre de chose. L'idée ici était de montrer qu'on peut le faire d'une certaine manière avec ACF. Dans ce cas précis cela permet aux rédacteurs de faire des liens logiques vers les réunions en relation.

Retour à l'éditeur

Si on retourne maintenant dans l'éditeur et qu'on ajoute une nouvelle réunion, on découvre la nouvelle interface de saisie de contenu, avec nos différents nouveaux champs.

Advanced Custom Fields

Afficher les champs personnalisés

On peut désormais afficher une liste de toutes les réunions, créer de nouvelles entrées plus riches mais si on affiche une réunion en front-end, on se rend compte que seul le contenu saisi dans l'éditeur WYSIWYG s'affiche.
C'est normal ! Pour le moment, lorsqu'on demande à WordPress de nous afficher une réunion, il se sert du même fichier que pour les articles de blog, le fichier single.php. On a donc besoin de lui indiquer un nouveau fichier dédié à l'affichage d'une réunion et donc de nos champs personnalisés.

La récolte des champs

Pour cela, on crée un fichier de type single-posttypeslug.php soit single-reunion.php pour personnaliser l'affichage de la page. C'est dans ce fichier, de prime abord semblable à single.php qu'on va ajouter nos champs à l'aide des deux fonctions que l'on a vu plus tôt.

// Affiche nos champs personnalisés 
<?php while ( have_posts() ) : the_post(); ?>

    <h1><?php the_title(); ?></h1>
    <p>Compte-rendu publié par <?php the_author(); ?>, le <?php the_date(); ?></p>
    <p><?php the_field( 'reunion_objet' ); ?></p>

    <?php
        // Affiche une image en utilisant son ID

        $image = get_field( 'reunion_photo' );
        $size = 'medium'; //(thumbnail, medium, large, full ou taille personnalisée)

        if( $image ) {
            echo wp_get_attachment_image( $image, $size );
        }
    ?>

    <?php the_content(); ?>

<?php endwhile; ?>

Et du sous-groupe

L'affichage du champ répéteur et son sous-groupe nécessite de faire une boucle dans la boucle à l'aide de la fonction have_rows(); et d'utiliser ensuite la fonction the_sub_field(); en lieu et place de the_field();

Cette boucle est nécessaire car on ajouter autant d'intervenants que l'on souhaite.

// Affiche le sous-groupe de champs
<?php if( have_rows( 'reunion_intervenants') ): ?>

    <!-- Liste des intervenants
    <ul>

    <?php while ( have_rows( 'reunion_intervants' ) ) : the_row(); ?>
        <li>
        <?php
            // Affiche une image en utilisant son ID
            $image = get_sub_field( 'intervenant-photo' );
            $size = 'thumbnail';

            if( $image ) {
                echo wp_get_attachment_image( $image, $size );
            }
        ?>

        <?php the_sub_field( 'intervenant_nom' ); ?>
        <?php the_sub_filed( 'intervenant_sujet' ); ?>
        </li>

    <?php endwhile; ?>

    </ul>

<?php endif; ?>

La liste de liens

On récupère pour finir la liste de liens sous forme d'un tableau qu'on boucle avec foreach() pour afficher le lien et le titre du lien.

<?php
// Affiche les liens relatifs
$posts = get_field('liens_additionnels');

if( $posts ): ?>
    <ul>
    <?php foreach($posts as $p): ?>
        <li>
            <a href="<?php echo get_permalink' $p->ID); ?>">
                <?php echo get_the_title( $p->ID); ?>
            </a>
        </li>
    <?php endforech; ?>
    </ul>
<?php endif; ?>

Tout est question de style

Avec l'ajout de ces morceaux de code, nous avons maintenant une page qui doit normalement afficher nos nouveaux champs ainsi que la liste des intervenants et une liste de liens. On peut vérifier cela en front-end :

Advanced Custom Fields

Évidement, comme il n'y a pas de règles CSS appliquées sur nos nouveaux champs, l'affichage est très basique. La suite c'est donc du pur HTML / CSS pour arriver au résultat final qui suit:

Advanced Custom Fields

J'ai essayé, dans cet article de retranscrire au mieux ce que j'ai dit lors de la présentation. Cependant celle-ci était accompagnée de démo live sur le site fictif créé pour l'occasion. J'espère que la compréhension est restée bonne malgré ce manque.

Article précédent : Advanced Custom Fields, présentation
Article suivant : Rails, des livres à la première application

Je suis disponible pour des missions longues / CDD / CDI Cliquez pour en savoir plus