Créez des onglets en 5 secondes avec shortcodes ultimate, un plugin pour WordPress

Partagez si vous aimez ->

Créer des onglets dans vos pages ou vos articles, sur votre site WordPress

Je vais vous apprendre à créer des onglets dans votre contenu avec Shortcodes Ultimate, un plugin WordPress.

Mettez-vous dans la page de configuration de Shortcodes Ultimate qui est très utile pour savoir comment utiliser le plugin. Vous voyez qu’il y a deux exemples et le shortcode qui est associé à chacun de ces exemples est un petit peu différent.

1er shortcode

Le premier est « Tabs » et représente en fait le conteneur des onglets.

2ème shortcode

Et le deuxième, c’est « Tab ». C’est un onglet simple. Regardez tout de suite la documentation pour voir comment utiliser ces deux shortcodes pour créer nos onglets.

Si on compare le shortcode de la ligne « Tabs » et le shortcode de la ligne « Tab », on voit en fait qu’il faut tout le temps les utiliser ensemble.

« Tabs » qui encadre l’ensemble du code :

[tabs style=1]
[tab title="titre onglet"]
contenu de l'onglet
[/tab]
[/tabs]

…et qui en fait représente le conteneur ; et à l’intérieur, vous avez un élément « Tab » :

[tab title="titre onglet"]
contenu de l'onglet
[/tab]

…qui contient un contenu et un titre, et qui représente donc l’onglet en lui-même.

1/ Configuration de base des shortcodes

Vous allez commencer par la configuration de base qui consiste à copier-coller l’exemple que vous avez et l’utiliser tel quel pour voir comment il se comporte. Je copie-colle avec un Ctrl + C, je viens dans un nouvel article.

Remarquez que vous pouvez le faire dans une page également ou dans un widget.

Et je colle mon contenu. Je vais l’appeler ici « Test onglets » et je clique sur « Publier ».

Résultat : vous avez bien un onglet avec un contenu dans un conteneur qui est grisé. Alors l’exemple n’est pas très probant parce qu’en général on utilise toujours plusieurs onglets. Alors, voyons comment améliorer ce code pour avoir un deuxième onglet.

2/ Modifier le shortcode pour créer un deuxième onglet

Donc je vous l’ai dit tout à l’heure la partie qu’il y a à l’intérieur représente un seul onglet, donc je peux très bien la copier et puis la coller à côté :

[tabs style=1]
[tab title="titre onglet 1"]
contenu de l'onglet 1
[/tab]
[tab title="titre onglet 2"]
contenu de l'onglet 2
[/tab]
[/tabs]

Pour une meilleure lisibilité, je vous conseille de sauter des lignes, de revenir à la ligne, puis je mets à jour (F5). Alors, améliorons encore un petit peu mieux l’exemple en mettant cette fois-ci des textes un peu plus pertinents.

3/ Un exemple complet pour créer des onglets dans WordPress

Alors, par exemple, je pourrais faire un article sur comment faire des crêpes. Ici, le titre du premier onglet, je voudrais parler des ingrédients de ma recette et comme les ingrédients c’est souvent une liste, je vais utiliser une liste à puces. Donc je vais également revenir à la ligne et puis utiliser ma liste à puces. Voilà. Donc on va utiliser de la farine, des œufs, du lait, etc.

Dans le deuxième onglet, je vais mettre donc la recette en elle-même.

Et je vais également faire un troisième onglet que je vais appeler « Cuisson » et dans lequel donc je vais indiquer la cuisson.

[tabs style=1]
[tab title="Ingredients"]
<ul>
 	<li>Farine</li>
 	<li>Œufs</li>
 	<li>Lait</li>
 	<li>…</li>
</ul>
[/tab]
[tab title="Recette"]
Mélangez tout dans un bol…
[/tab]
[tab title="Cuisson"]
Cuire 2 minutes sur chaque face
[tab]
[/tabs]

J’enregistre. Maintenant nous avons bien un contenu sous forme d’onglets, un contenu tout à fait pertinent que vous pouvez à loisir reproduire sur votre blog.

3/ Configuration des paramètres du shortcode pour créer des onglets dans WordPress

Les Style d’onglets

Quels paramètres avons-nous pour le premier shortcode qui est « Tabs » ?

Nous avons un « style » d’onglet. Donc vous pouvez utiliser le style 1, le 2 ou le 3. Et dans l’exemple, ils utilisent déjà le 1 :

[tabs style=1]

.

Bien, nous, nous allons utiliser le 3

[tabs style=3]

pour tester. Donc je change le 1 par 3 dans mon shortcode Tabs ; je mets à jour et puis je viens voir sur ma page, en rechargeant (F5), voir ce que ça a donné. Ah, et vous voyez que le style 3 donne des onglets de façon horizontale au lieu d’avoir des onglets verticaux comme nous avions tout à l’heure. C’est une façon de faire. Donc je vous laisse tester le style numéro 2.

Quant aux paramètres du shortcode « Tab », eh bien vous voyez qu’il y a seulement le paramètre « title » que vous avez déjà utilisé pour afficher le titre sur l’onglet.

Il n’y a pas d’autres paramètres à utiliser, donc vous avez utilisé ici toutes les possibilités de ces shortcodes. Vous pouvez utiliser votre éditeur ou wysiwyg, sans problème à l’intérieur des différents shortcodes pour faire ainsi du contenu très élaboré.

Créer des onglets avec le plugin Shortcode Ultimate : résumé

  • Utilisation du shortcode sans paramètres (configuration de base) :
    [tabs style="1"]
    [tab title="Tab name"] Tab content [/tab]
    [/tabs] 
  • Multiplier les onglets:
     [tabs style="1"]
    [tab title="Tab name 1"] Tab content 1 [/tab]
    [tab title="Tab name 2"] Tab content 2 [/tab]
    [/tabs]
    
  • Utilisation du shortcode avec paramètres
    • Changer le style des onglets
      [tabs style=3]
Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

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

Simple Share Buttons