Les onglets intéractifs
Un onglet interactif consiste en une association de « boutons » et de blocs. Lorsque l’on clique sur le premier élément (qui peut être un bouton, un conteneur ou autre), cela affiche automatiquement un contenu lié. Et ce contenu changera selon le bouton cliqué.
Sur WordPress, il est possible d’utiliser des widgets qui peuvent le faire automatiquement, mais on est vite limité par les plugins. Le mieux pour plus de liberté est d’en créer un avec des attributs, des classes CSS et des ID.
Exemple d'onglets intéractifs
Bouton n°1
Bouton n°2
Bouton n°3
Bouton n°1
Contenu 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Contenu 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Contenu 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Contenu 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Voici un exemple d’onglets interactifs sur WordPress. Cette méthode permet de centraliser un grand volume d’informations dans un espace réduit, optimisant ainsi l’expérience utilisateur (UX).
C’est également un atout pour la fluidité de navigation : le contenu étant préchargé, l’affichage est instantané sans avoir à recharger la page. Enfin, cette solution s’adapte parfaitement au mobile (« responsive »), évitant ainsi le défilement infini. Flexible, chaque onglet peut accueillir tout type de widget (texte, image, vidéo, formulaire)
Dans ce tuto, vous suivrez étape par étape tout le déroulé pour, vous aussi, pouvoir réussir facilement à faire des onglets interactifs.
Créer les conteneurs
La première étape consiste à créer la structure : d’un côté les conteneurs d’action (les boutons) et de l’autre les zones de contenu (la partie réactive).
C’est l’étape la plus simple techniquement, mais elle peut être longue selon la densité de vos informations. Pour ce tutoriel, nous reprendrons l’exemple ci-dessus.
Conseil de mise en page pour le conteneur avec les bouton : Pour obtenir un rendu propre et éviter que la taille de vos boutons ne varie selon la longueur du texte, structurez-les exactement comme sur l’image : créez un conteneur principal comprenant 2 lignes, où chaque ligne est divisée en 2 colonnes.
Conseil de mise en page pour le conteneur avec la parite réactive : Créer une colonne composer de 4 lignes
La premiers étape : Créer des conteneurs
Les attributs
Une fois la première étape terminée, la seconde consiste à assigner des attributs à chaque bouton. Cet attribut est spécifique à chaque bouton et doit être unique (le numéro change pour chaque élément). Il agit comme une commande cachée destinée au script (ajouté ultérieurement) pour lui indiquer quel contenu précis afficher (ex : le contenu associé au bouton 1)
En desous, le code a ajouté:
Attribut de données
data-showme|bouton1-content
Configurer les ID et le CSS
Après avoir créé un attribut pour chaque bouton, l’étape suivante consiste à lier ces attributs aux conteneurs correspondants. Pour cela, on utilise l’ID CSS.
L’attribut est composé comme ceci : data-showme="bouton1-content". Le début (data-showme) servira de repère pour le JavaScript, et la seconde partie est l’identifiant (l’ID que l’on va utiliser pour lier le bouton au conteneur).
Pour chaque conteneur, il faudra récupérer cet identifiant dans l’attribut du bouton et le coller dans le champ ID (dans les paramètres avancés du conteneur correspondant).
Avant d’intégrer le script JavaScript, il faut s’assurer qu’un seul conteneur apparaisse à la fois. Pour cela, il faut attribuer une classe CSS identique à chaque conteneur (par exemple « all-content »).
Grâce à cette classe, on pourra appliquer la propriété display: none aux conteneurs des 4 blocs pour tout cacher.
Pour ce faire, il faudra aller dans le CSS personnalisé du conteneur parent et y insérer le code suivant : .all-content { display: none; }.
Seulement, si on met uniquement ce code, logiquement on ne devrait plus rien voir. C’est tout à fait normal car c’est ce que nous avons demandé. Il faut donc ajouter un autre bout de code pour ne faire apparaître qu’un seul bloc. Nous allons donc rajouter, en dessous de la première ligne, ce code : #bouton1-content { display: block; } (en appelant l’ID du conteneur choisi).
Pourquoi cela fonctionne-t-il ? C’est ici qu’interviennent deux règles fondamentales du CSS. D’une part, WordPress lit le code de haut en bas, ce qui donne souvent raison à la dernière ligne écrite. D’autre part, et c’est le plus important : un ID est plus puissant qu’une classe. Comme nous utilisons un ID (#) pour l’affichage et une simple classe (.) pour le masquage, l’ID prendra toujours le dessus par priorité, peu importe son emplacement.
Une fois ceci fait, ce sera au tour de la commande JavaScript de prendre la relève.
CSS d'affichage/masquage initial
.all-content{
display: none;
}
#facebook-content{
display: block;
}
Le script JavaScript pour l'interaction
Les boutons et conteneurs sont faits, les attributs et les ID sont mis et liés entre eux, la classe CSS pour la commande est faite, il n’y a plus qu’à passer à l’attaque alors !
On a tous les éléments pour rendre les onglets fonctionnels. Il ne suffit plus qu’à les mettre en place et pour cela, il faut utiliser une commande JavaScript ! C’est elle qui va permettre de faire apparaître le conteneur selon le bouton sélectionné.
Pour le mettre en place, il va falloir ajouter un widget HTML à n’importe quel endroit de la page. Dans celui-ci, tu devras mettre cette commande : »
Onglet interactif JS
<script defer src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script defer src="data:text/javascript;base64,DQoNCnZhciAkID0galF1ZXJ5DQoNCiQoZG9jdW1lbnQpLnJlYWR5KGZ1bmN0aW9uKCl7DQogICAgJCgnW2RhdGEtc2hvd21lXScpLm9uKCdjbGljaycsIGZ1bmN0aW9uKCl7DQogICAgICAgIHZhciBzaG93bWUgPSAkKHRoaXMpLmF0dHIoJ2RhdGEtc2hvd21lJykNCiAgICAgICAgDQogICAgICAgICQoJy5hbGwtY29udGVudCcpLmhpZGUoKQ0KICAgICAgICAkKCcjJyArIHNob3dtZSkuc2hvdygpDQogICAgfSkNCn0pDQoNCg=="></script>
Un derniers détail
À cette étape, votre système d’onglets est fonctionnel. Il ne reste plus qu’à rendre l’expérience plus fluide en ajoutant une petite animation d’apparition.
Astuce : Comme nos conteneurs sont masqués par le CSS, nous devons temporairement les afficher pour pouvoir les modifier.
Allez dans le CSS personnalisé du parent et remplacez
display: nonepardisplay: block. Tous vos contenus vont s’afficher les uns sous les autres.Sélectionnez le premier conteneur, allez dans l’onglet Avancé > Effets de mouvement.
Dans « Animation d’entrée« , choisissez « Fade In » et réglez la vitesse sur « Lente » (simple et efficace).
Faites un clic droit sur ce conteneur, choisissez « Copier », puis faites « Coller le style » sur les 3 autres conteneurs pour gagner du temps.
Une fois terminé, n’oubliez pas de remettre la règle display: none dans le CSS du parent. Et voilà : vous avez des onglets interactifs, fonctionnels et stylisés !
Conclusion
Créer des onglets interactifs demande une petite compréhension des outils que nous offre WordPress. Certains, à la fin, se demanderont : « Pourquoi ne pas utiliser un plugin directement ? ».
Cette question serait légitime, car il existe bien des plugins capables de le faire. Malheureusement, ceux-ci nous limitent énormément sur ce que l’on peut faire, que ce soit au niveau du style ou même du nombre de boutons d’action possibles. Il vaudra toujours mieux privilégier l’apprentissage de WordPress, quitte à y passer du temps, plutôt que de choisir la solution de facilité qui nous mettra des barreaux autour de nous.
ffgfhjk
cwxwcv
dsqfdgf
Je suis un commentaire
qefsdfghjkljhgfdcghjklmgyfhdxcvbjklmgh