Utiliser JqueryUI Tabs et le champ repeater du plugin ACF

Tu veux créer un système de tabulation dynamique géré par le champ repeater d’ACF sous WordPress ? Ce tuto est fait pour toi :)

Sommaire

  1. Introduction à jQuery UI tabs
  2. Introduction au champ repeater d’ACF
  3. Problématique : le décompte dans les #id
  4. Solution : $counter++

Introduction à jQuery UI tabs

Je ne présenterai pas ici jQuery UI, je pense que vous le connaissez déjà tous. Je vais me contenter de décortiquer le système de tabulation pour comprendre comment il fonctionne et expliquer pourquoi son utilisation avec le champ repeater du plugin ACF peut être laborieuse la première fois.

Pour créer une tabulation avec jQuery UI, il faut créer une navigation dans une liste non ordonnée :

<ul>
   <li><a href="#tabs-1">Nunc tincidunt</a></li>
   <li><a href="#tabs-2">Proin dolor</a></li>
   <li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>

Et les différents contenus dans des div :

<div id="tabs-1">
   <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
 <div id="tabs-2">
   <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
 <div id="tabs-3">
   <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
   <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
 </div>

Remarquez que les div ont toutes une #id qui correspond aux liens de notre navigation :

  • #tabs-1
  • #tabs-2
  • #tabs-3

Il suffit ensuite de regrouper tout ça dans une div#tabs et d’initialiser le tout :

<script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
</script>

<div id="tabs">
  <!-- NAVIGATION -->
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <!-- FIN DE LA NAVIGATION -->
  <!-- CONTENU -->
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
  <!-- FIN DU CONTENU -->
</div>

Vous avez maintenant une navigation à trois tabulations :)
C’est très bien, mais ça n’est pas pratique si vous voulez dynamiser le nombre de tabulation. C’est là que le plugin ACF et le champ repeater entrent en jeu.

Introduction au champ repeater d’ACF

Le champ repeater permet, comme son nom l’indique, de créer un champ qui va pouvoir se répéter. C’est à dire que l’on va pouvoir créer plusieurs fois un même champ, composé de deux sous-champs :

  • notre navigation
  • le contenu d’une tabulation

Tout d’abord, commencez par créer un champ repeater ACF :

Créer un champ repeter avec acf

Création du champ repeater ACF.

Ensuite, créez un premier sous-champ qui va correspondre aux titres de notre navigation :

Creer le premier sous-champ repeter acf

Création du premier sous-champ.

Puis un second sous-champ qui va être notre contenu :

Créer le second sous-champ repeter acf

Création du second sous-champ.

Voilà à quoi ressemble notre champ repeater dans son ensemble :

Le champ repeter acf

Voilà notre champ créé.

Nous avons donc notre champ description composé de deux sous-champs : titre_de_la_description et texte_de_la_description.
Après l’avoir enregistré, allez sur votre article/page/produit … pour voir votre repeater :

Le champ repeter acf dans l'article

Voilà à quoi ressemble notre champ repeater en Back Office.

Pour le moment, il est vide. Remplissez-le d’autant de contenus que nécessaire :

Le champ repeter acf dans l'article rempli

Et le voilà maintenant rempli.

Maintenant que notre contenu est entré en Back Office, nous allons l’appeler coté front.

Problématique : le décompte dans les #id

Tout d’abord, nous allons créer la boucle et faire apparaître une div#tabs uniquement si le contenu du champ description est renseigné en Back Office :

<?php if( have_rows('descriptions') ):?>
	<div id="tabs">
	</div><!-- #tabs -->
<?php endif; ?>

Nous allons maintenant appeler notre navigation :

<?php if( have_rows('descriptions') ):?>
	<div id="tabs">
		<ul>
		<?php while( have_rows('descriptions') ): the_row(); 
			// vars
			$titre = get_sub_field('titre_de_la_description');
			?>
			<li>
				<a href="#tab_1"><?php echo $titre; ?></a>
			</li>
		<?php endwhile; ?>
		</ul>
	</div><!-- #tabs -->
<?php endif; ?>

Puis notre contenu :

<?php if( have_rows('descriptions') ):?>
	<div id="tabs">
		<!-- NAVIGATION -->
		<ul>
		<?php while( have_rows('descriptions') ): the_row(); 
			// vars
			$titre = get_sub_field('titre_de_la_description');
			?>
			<li>
				<a href="#tab_1"><?php echo $titre; ?></a>
			</li>
		<?php endwhile; ?>
		</ul>
		<!-- FIN DE LA NAVIGATION -->
		<!-- CONTENU -->
		<?php while( have_rows('descriptions') ): the_row(); 
			// vars
			$texte = get_sub_field('texte_de_la_description');
			?>
			<div id="tab_1"><?php echo $texte; ?></div>
		<?php endwhile; ?>
		<!-- FIN DU CONTENU -->
	</div><!-- #tabs -->
<?php endif; ?>

Nous avons maintenant notre contenu qui apparaît bien coté front.
Problème : toutes les div ont la même #id, et les liens ont la même cible.
Résultat : la tabulation ne fonctionne pas.

Pour réparer notre tabulation, il va falloir donner une #id et une cible correspondante unique à chacun de nos div et href.
Pour cela, nous allons utiliser l’incrémentation ++

Solution : $counter++

Nous allons ajouter deux variables dans la boucle :

  • $counter_nav qui va gérer les cibles des liens dans la navigation ;
  • $counter_div qui va gérer les #id des div cibles.

Nous allons ensuite afficher le résultat (chiffre) de ces variables dans nos #id et href, puis incrémenter le décompte de 1. Voilà ce que ça donne dans notre boucle :

<?php if( have_rows('descriptions') ):?>
	<?php $counter_nav = 1;  //Le décompte commence à 1 ?>
	<?php $counter_div = 1;  //Le décompte commence à 1 ?>
	<div id="tabs">
		<!-- NAVIGATION -->
		<ul>
		<?php while( have_rows('descriptions') ): the_row(); 
			// vars
			$titre = get_sub_field('titre_de_la_description');
			?>
			<li>
				<a href="#tab_<?php echo $counter_nav; // Ajoute le numéro du décompte ?>"><?php echo $titre; ?></a>
			</li>
			<?php $counter_nav++; // ajoute 1 à chaque tabulation ?>
		<?php endwhile; ?>
		</ul>
		<!-- FIN DE LA NAVIGATION -->
		<!-- CONTENU -->
		<?php while( have_rows('descriptions') ): the_row(); 
			// vars
			$texte = get_sub_field('texte_de_la_description');
			?>
			<div id="tab_<?php echo $counter_div; // Ajoute le numéro du décompte ?>"><?php echo $texte; ?></div>
			<?php $counter_div++; // ajoute 1 à chaque tabulation ?>
		<?php endwhile; ?>
		<!-- FIN DU CONTENU -->
	</div><!-- #tabs -->
<?php endif; ?>

J’espère que ce tuto vous a été utile :)
Voilà quelques sources qui sont citées dans cet article :
Champ repeater ACF : https://jqueryui.com/tabs/
Tabulation jQuery UI : https://www.advancedcustomfields.com/add-ons/repeater-field/

See ya’ space integrator

Auteur : PUShAUNE

Graphiste freelance, J’ai créé un collectif à Marseille appelé Bison Bleu.
Je tiens un blog pour partager mes techniques et mes expériences.
Je donne aussi des cours aux élèves de l’école Axe Sud.

À ton tour de participer :

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *