Mise en page avancée : les shortcodes pour créer des accordéons
Définition : Les shortcodes sont des balises de code pré-définies permettant d'insérer des éléments sur un site.
Les balises de code sont insérées dans l'éditeur de texte.
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 accordéons (éléments qui se déplient au clic pour afficher du contenu).
Accès aux shortcodes des accordéons dans l'éditeur de texte
Grâce aux shortcodes, vous allez pouvoir insérer 1, 2, 3, 4 ou 5 accordéons.
Insertion du shortcode
Si vous cliquez sur le bouton Shortcodes puis Colonnes et enfin sur 2 accordéons, le shortcode est alors automatiquement rajouté à l’endroit où votre curseur est positionné dans le contenu de l’éditeur de texte. Sa forme est la suivante :
[accordeons]
[accordeon]
[titreAccordeon lien="accordeon1-6441"]Titre 1[/titreAccordeon]
[texteAccordeon nom="accordeon1-6441"]Contenu de l'accordéon 1[/texteAccordeon]
[/accordeon]
[accordeon]
[titreAccordeon lien="accordeon2-6441"]Titre 2[/titreAccordeon]
[texteAccordeon nom="accordeon2-6441"]Contenu de l'accordéon 2[/texteAccordeon]
[/accordeon]
[/accordeons]
Voici l’explication de sa construction :
- [accordeons] ouvre d’abord le shortcode des accordéons.
- [accordeon] ouvre ensuite le 1er accordéon.
- [titreAccordeon lien="accordeon1-6441"] ouvre la partie contenant le titre du 1er accordéon.
- « Titre 1 » représente le titre du 1er accordéon.
- [/titreAccordeon] ferme la partie contenant le titre du 1er accordéon.
- [texteAccordeon lien="accordeon1-6441"] ouvre la partie présentant le contenu du 1er accordéon.
- « Contenu de l’accordéon 1 » représente le contenu du 1er accordéon.
- [/texteAccordeon] ferme la partie présentant le contenu du 1er accordéon.
- [accordeon] ferme enfin le 1er accordéon.
- [accordeon] ouvre le 2ème accordéon.
- [titreAccordeon lien="accordeon2-6441"] ouvre la partie contenant le titre du 2ème accordéon.
- « Titre 2 » représente le titre du 1er accordéon.
- [/titreAccordeon] ferme la partie contenant le titre du 2ème accordéon.
- [texteAccordeon lien="accordeon2-6441"] ouvre la partie présentant le contenu du 2ème accordéon.
- « Contenu de l’accordéon 2 » représente le contenu du 2ème accordéon.
- [/texteAccordeon] ferme la partie présentant le contenu du 2ème accordéon.
- [accordeon] ferme le 2ème accordéon.
- En enfin, [/accordeons] ferme le shortcode des accordéons.
Le principe est exactement le même pour les autres shortcodes des accordéons.
Exemple d’utilisation des accordéons
Nous allons créer 3 accordéons. Le 1èr 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 :
[accordeons]
[accordeon]
[titreAccordeon lien="accordeon1-6774"]Voir le texte de Voltaire[/titreAccordeon]
[texteAccordeon nom="accordeon1-6774"]Le texte[/texteAccordeon]
[/accordeon]
[accordeon]
[titreAccordeon lien="accordeon2-6774"]Voir la galerie photos[/titreAccordeon]
[texteAccordeon nom="accordeon2-6774"]La galerie photos[/texteAccordeon]
[/accordeon]
[accordeon]
[titreAccordeon lien="accordeon3-6774"]Voir la vidéo[/titreAccordeon]
[texteAccordeon nom="accordeon3-6774"]La vidéo[/texteAccordeon]
[/accordeon]
[/accordeons]
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 et aussi les plus appréciées. C’est à dire que sa physionomie annonçait son âme. D’ailleurs, il avait le jugement assez droit, avec l’esprit le plus simple ; En conséquent on le nommait Candide. Les anciens domestiques de la maison soupçonnaient d’ailleurs qu’il était fils de la soeur de monsieur le baron et d’un bon et 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 aussi été perdu par l’injure du temps.
Voltaire, Candide.
