Mise en page avancée : les shortcodes pour créer des onglets
Les shortcodes proposés dans l'éditeur de texte d'un site 6temFlex, permettent d'enrichir la mise en page de votre contenu en créant par exemple des onglets.
Définition : Les shortcodes sont des balises de code pré-définies permettant d'insérer des éléments sur un site.
Accès aux shortcodes des onglets dans l’éditeur de texte
Grâce aux shortcodes, vous allez pouvoir créer 2, 3, 4 ou 5 onglets dans vos contenus textuels.
Insertion du shortcode pour créer des onglets
Si vous cliquez sur le bouton Shortcodes puis sur Onglets et enfin sur 2 onglets, le shortcode est alors automatiquement ajouté à l'endroit où votre curseur est positionné dans le contenu de l'éditeur de texte. Sa forme est la suivante :
[onglets] [enteteOnglets] [onglet lien="contenu1-4340" type="actif"]Onglet 1[/onglet] [onglet lien="contenu2-4340"]Onglet 2[/onglet] [/enteteOnglets] [contenuOnglets] [texteOnglet nom="contenu1-4340" type="actif"]Contenu de l'onglet 1[/texteOnglet] [texteOnglet nom="contenu2-4340"]Contenu de l'onglet 2[/texteOnglet] [/contenuOnglets] [/onglets]
Voici l’explication de sa construction :
- [onglets] ouvre d’abord le shortcode des onglets
- [enteteOnglets] ouvre ensuite la partie qui va contenir les onglets eux-mêmes, avec leur titre respectif
- [onglet lien="contenu1-4340" type="actif"] ouvre la partie qui contient le titre du 1er onglet (qui est actif par défaut)
- « Onglet 1 » représente le titre du 1er onglet
- [/onglet] ferme enfin la partie qui contient le titre du 1er onglet
- [onglet lien="contenu2-4340"] ouvre alors la partie qui contient le titre du 2ème onglet
- « Onglet 2 » représente le titre du 2ème onglet
- [/onglet] ferme la partie qui contient le titre du 2ème onglet
- [/enteteOnglets] ferme la partie qui contient les onglets
- [contenuOnglets] ouvre la partie qui va présenter le contenu des onglets
- [texteOnglet nom="contenu1-4340" type="actif"] ouvre la partie qui présente le contenu du 1er onglet
- « Contenu de l’onglet 1 » représente le contenu du 1er onglet
- [/texteOnglet] ferme la partie qui présente le contenu du 1er onglet
- [texteOnglet nom="contenu2-4340"] ouvre la partie qui présente le contenu du 2ème onglet
- « Contenu de l’onglet 2 » représente le contenu du 2ème onglet
- [/texteOnglet] ferme la partie qui présente le contenu du 2ème onglet
- [/contenuOnglets] ferme la partie qui présente le contenu des onglets
- Enfin, [/onglets] ferme le shortcode des onglets
Le principe est exactement le même pour les autres shortcodes des onglets.
Exemple d’utilisation
Nous allons créer 3 onglets. Le 1er contiendra un texte de Voltaire, le 2ème une galerie photo et le 3ème une vidéo.
Le shortcode va donc se présenter de cette façon :
[onglets]
[enteteOnglets]
[onglet lien="contenu1-34" type="actif"]Le texte[/onglet]
[onglet lien="contenu2-34"]La galerie photos[/onglet]
[onglet lien="contenu3-34"]La vidéo[/onglet]
[/enteteOnglets]
[contenuOnglets]
[texteOnglet nom="contenu1-34" type="actif"]Le contenu du texte[/texteOnglet]
[texteOnglet nom="contenu2-34"]Les photos[/texteOnglet]
[texteOnglet nom="contenu3-34"]Le player vidéo[/texteOnglet]
[/contenuOnglets]
[/onglets]
Et voici le résultat !
Tout d’abord, il y avait en Westphalie, dans le château de M. le baron de Thunder-ten-tronckh, un jeune garçon à qui la nature avait donné les moeurs les plus douces mais aussi surtout les plus appréciées. Sa physionomie annonçait alors son âme. Il avait surtout le jugement assez droit, avec l’esprit le plus simple ; en conséquent, on le nommait Candide. Les domestiques et les ouvriers de la maison soupçonnaient qu’il était fils de la soeur de monsieur le baron et d’un bon mais aussi honnête gentilhomme du voisinage, que cette demoiselle ne voulut jamais épouser parce qu’il n’avait pu prouver que soixante et onze quartiers. Finalement le reste de son arbre généalogique avait été aussi perdu par l’injure du temps.
Voltaire, Candide.
