Cette seconde partie, nous allons aborder l’utilisation concrète du flexible content d’ACF. Je vais vous donner une méthode de développement afin de pouvoir travailler rapidement

Introduction

Dans la première partie de ce tutoriel, je vous expliquais le principe de fonctionnement des flexible content sur ACF. Dans cette seconde et dernière partie, nous allons l’utiliser dans un cas concret.

Flexible content sur ACF

Tout d’abord, commençons par nous rafraichir la mémoire en lisant la documentation sur ACF.

1- Création de la page template

Dans un premier temps, nous allons créer la page template spécifique à notre builder maison. Pour cela, créer une page du nom de « page-builder.php » à la racine de votre thème WP. Voici ce que doit contenir votre page pour le moment.

<?php
/*
    Template Name: Builder
*/

if (!defined('ABSPATH')) {
    exit;
}

get_header(); 
?>


<?php 
get_footer(); 
?>

Nous complèterons cette page par la suite, nous n’en avons besoin que pour cibler l’activation de notre champs.

2- Création du champs flexible content dans ACF

Dans cette seconde étape, nous allons créer le champ principal ainsi que les sous-champs. Afin de vous faire gagner du temps, voici le fichier à télécharger et à charger dans ACF >> Outils >> Importer les groupes de champs.

Une fois chargé, rendez-vous sur la page de modification des champs pour voir le réglage.

Voici un ordre « en français dans le texte » pour vous y retrouver :

• Builder (champs principal)
  • Bloc Txt/Img (sous-champs)
    • Titre (texte)
    • Texte (zone de texte)
    • Ajouter un CTA (case à cocher)
    • CTA (groupe avec une condition préalable à l’activation de la case à cocher)
      • Texte (texte)
      • Lien (URL)
      • Ouvrir dans une nouvelle fenêtre (case à cocher)
    • Image (image)
    • Inverser ordre des blocs (bouton radio)

N’oubliez pas de créer une condition d’affichage de ce champ « Builder » par rapport à votre template de page du même nom. Une fois cette dernière étape faite, vous allez créer une page avec un modèle « builder » et intégrer vos données.

3- Intégration du contenu

Maintenant, vous allez créer votre première page grâce à votre builder maison. Voila, d’après notre exercice, à quoi va ressembler l’interface du builder.

Intégrez votre contenu et publiez la page. Maintenant, passons à la mise en place du code sur notre page template « Builder ».

4- Développement de la page template

C’est maintenant que la meilleure partie commence : le développement !

Ajouter le code ci-après entre les fonctions header et footer de votre page template « builder ».

if( have_rows('builder') ):

    while ( have_rows('builder') ) : the_row();

        if( get_row_layout() == 'bloc_txt_img' ):

            $title = get_sub_field('titre');
            $text = get_sub_field('texte');
            $add_cta = get_sub_field('ajouter_un_lien')[0];
            $cta_texte = get_sub_field('cta')["texte"];
            $cta_lien = get_sub_field('cta')["lien"];
            $cta_lien_blank = get_sub_field('cta')["link_blank"][0];
            $image = get_sub_field('image');
            $inverser_ordre_blocs = get_sub_field('inverser_ordre_blocs');

            var_dump($title);
            var_dump($text);
            if($add_cta === 'active'){
              var_dump($add_cta);
              var_dump($cta_texte);
              var_dump($cta_lien);
              var_dump($cta_lien_blank);
            }
            var_dump($image);
            var_dump($inverser_ordre_blocs);

        endif;

    endwhile;

else :

endif;

Les var_dump ont volontairement été laissés à des fins de debugs.

Quelques explications sur toutes ces lignes de codes :

• La fonction have_rows() va cibler le flexible content « builder ». On y implante une condition et une boucle.
• La fonction get_row_layout() va cibler chaque bloc que vous créerez. Dans notre cas, ce sera le bloc ‘bloc_txt_img’.
• La fonction get_sub_field() va cibler les champs du bloc qui vous avez précédemment renseigné.

Bien sûr, vous pouvez très bien placer des include à l’intérieur des get_row_layout(); afin d’alléger le code le page (ce que je vous recommande). Ainsi, vous pourrez mieux organiser votre builder au sein de votre thème avec un dossier « builder » par exemple.

Et après ?

Après cela, vous pourrez créer autant de bloc de builder que vous voudrez en cliquant sur « Ajouter ».

Quel est l’intérêt ?

L’intérêt premier de passer par ce système est de pouvoir modifier les pages via WordPress et non plus en code. Vous avez également la possibilité de réorganiser les blocs à la volée (voir image ci-dessous).

Conclusion

Les flexible content d’ACF permettent de minimiser le temps de développement et de création/modification de pages. Vous avez tout à y gagner en utilisant cette technique. Plus besoin de développer chaque page à la main ou de passer par une phase de développement pour rajouter ou modifier une page.

En revanche, il vous faudra définir CHAQUE bloc au préalable. En effet, c’est le seul point noir : l’anticipation des blocs. Ceci dit, vous pourrez toujours feinter le système en incorporant un bloc qui permettra l’insertion de shortcode. Vous serez plus libre avec l’ajout de contenu spécifique tel une google map par exemple.