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

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

Je reprends la série sur ce plugin très complet : Shortcode Ultimate. Après vous avoir présenté le plug-in Shortcode Ultimate et vous avoir montré comment créer un diaporama, voici, à la demande de Tomeo, les onglets!

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

  • Durée: 4min 18
  • Niveau: facile | intermédiaire | expert
  • Public: webmaster/chef d’entreprise | développeur |tous

Cliquez ici pour afficher la transcription de la vidéo :
« Comment créer des onglets dans vos pages avec Shortcodes Ultimate, un plugin pour WordPress »


Bonjour, ici Marie-Eve du blog les Doigts dans le Net. Dans cette vidéo, je vais vous apprendre à créer des onglets dans votre contenu avec Shortcodes Ultimate, un plugin WordPress. À tout de suite.

Nous sommes ici dans la page de configuration de Shortcodes Ultimate qui est très utile pour savoir comment utiliser le plugin. Alors nous allons tout de suite regarder dans la démo quels sont les onglets en question que nous voulons installer. Nous les retrouvons ici; nous voyons qu’il y a deux exemples et le shortcode qui est associé à chacun de ces exemples est un petit peu différent.

1er shortcode : Tabs 00:33

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

2ème shortcode : Tab 00:37

Et le deuxième, c’est « Tab ». C’est un onglet simple. Regardons 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 01:19

Alors je vais commencer par la configuration de base qui consiste à copier-coller l’exemple que nous avons ici 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 ». Voilà donc ce que nous obtenons.

Nous avons 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 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 03:10

Les Style d’onglets 03:17

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

Nous avons un « style » d’onglet. Donc nous pouvons 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 ici, en rechargeant (F5), voir ce que ça a donné. Ah, et nous voyons 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 nous voyons qu’il y a seulement le paramètre « title » que nous avons déjà utilisé pour afficher le titre sur l’onglet.

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

Bien, je vous remercie de votre attention et n’hésitez pas à me faire vos retours dans les commentaires. Au revoir.

http://lesdoigtsdanslenet.com

Fin de la transcription

Résumé de la vidéo : Dans cette vidéo, je vous explique comment utiliser le plug-in WordPress Shortcode Ultimate pour créer des onglets dans vos articles ou pages WordPress. Une méthode idéale par exemple pour proposer une recette ou structurer des informations différentes sans surcharger votre page.

EDIT à 15h20: J’avais comme qui dirait, oublié la vidéo… ah les joies de l’automatisation ! 😉

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

  • Utilisation du shortcode sans paramètres (configuration de base) :
    
    			
    Tab content
  • Multiplier les onglets:
     
    			
    Tab content 1
    Tab content 2
  • Utilisation du shortcode avec paramètres
    • Changer le style des onglets
      			

comment créer des onglets dans un article de blog, créer des onglets dans un article, débutant, plugin wordpress, plugin wordpress création d’onglets, tutoriel

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

26 commentaires

  1. Salut Marie Eve merci pour ce tuto. Effectivement, les shortcodes offrent énormément de possibilités c’est un très bon plugin sous WP pour ceux qui n’ose pas touché au code très pratique, très utile. Merci encore une fois. A bientôt

    Répondre
  2. Bonjour et merci pour ce petit tuto; je me demandais s’il était possible de styler les onglets dans Shortcode Ultimate, si on pouvait créer d’autres styles d’onglets que SCU prenne en charge, et donc, si SCU intègre une interface de création de type et/ou de style d’onglets?
    Si non, comment faire?

    Répondre
    • Bonjour,

      Non SCU n’intègre pas d’outils de création d’onglets. Pour en créer soi-même, il faut soit coder un peu (création d’un shortcode puis du style css OU juste modification du css des onglets existants) ou trouver un plugin qui permettent de créer ses propres shortcodes (je ne sais pas si ça existe).

      Répondre
      • Merci pour ta réponse. Je n’en suis pas encore à créer mes shortcodes, j’irai donc voir du côté des CSS.

  3. Bonjour,
    merci beaucoup pour toutes ces explications mais surtout pour la vidéo, j’arrivais pas à créer des onglet pourtant j’en ai besoin pour mon blog.

    Répondre
  4. Nickel merci! Avec la vidéo c’est hyper simple et surtout très utile.
    Je vais m’en servir également pour un de mes blogs.
    A bientôt pour votre prochain article.

    Répondre
    • Bonjour,
      l’apport de la vidéo est énorme, elle a rendu la tache plus facile.
      Merci Marie Eve pour cet effort très appréciable
      Nathalie

      Répondre
  5. Super tuto, les novices ou tout simplement ceux qui n’aiment pas coder seront ravis !

    Répondre
  6. merci beaucoup pour nous avoir partagé ce plugin, c’est pratique et ça marche très bien. ca fera bien des heureux

    Répondre
    • Oui , il est très pratique.
      Au début j’ai cru qu’il s’agit d’une tache difficile mais tout est clair surtout avec la vidéo

      Répondre
  7. Créer des onglets pour un article peut être utile mais ne prend on pas le risque que l’internaute ne les voit pas et passe à coté de la moitié de l’article ?

    Autre question : gagne t on en référencement en procédant ainsi ou la finalité unique est-elle le confort de lecture et de compréhension de l’article pour l’internaute ?

    Répondre
    • Bonjour,

      C’est sûr que si l’utilisateur ne le voit pas… peut-être est-il préférable d’y mettre seulement des informations annexes ? En tout cas, sur une très longue page, cela permet de structurer le contenu comme je l’ai fait ici : http://formactionweb.fr/formation/creer-site-vitrine/

      Non aucune influence sur le référencement, Google ne voit pas les onglets.

      Répondre
  8. Fort pratique et particulièrement ergonomique pour la structuration de contenus dans des pages très fournies !

    Répondre
  9. Merci Marie-Eve pour ce tuto qui m’a permis de découvrir cette extension. Un nouveau monde s’ouvre à moi grâce à ton article !

    Répondre
  10. Salut Marie Eve, je trouve que cette extension est très pratique avec les thèmes WP, mais pour un novice tout comme moi, j’ai eu quand même un peu de mal a comprendre son fonctionnement au départ. Merci pour cet article ! Au plaisir

    Répondre
  11. cela ouvre effectivement de nouveaux horizons et j’apprécie toujours autant la clarté des explications de Marie Eve

    Répondre
  12. Super tuto, bien expliqué !!!
    Pour le moment je ne pense pas en avoir le besoin mais c’est toujours sympa de le savoir

    Répondre
  13. Merci beaucoup pour ces précieuses informations.

    Est-ce que vous connaissez une façon pour mettre les onglets de différentes couleurs ?

    Répondre
    • Bonjour Pierre-Yves,

      Oui, vous pouvez utiliser ce code CSS dans chaque balise de chaque onglet et changer la couleur (vous pouvez mettre une couleur hexadecimale) : style= »color:red; »

      Répondre
  14. Bonjour,

    Merci pour vos vidéos.

    Je débute avec wordpress. J’ai installé le shortcode ultimate. Par contre, je ne vois pas l’ensemble des onglets et notamment celui sur lequel vous trouvez les shortcodes. Je souhaitais savoir comment faire pour les faire apparaitre ou s’il faut acheter les « Add » pour y avoir accès. Je voudrais mettre un sllider dans la sidebar.

    Merci pour votre réponse,

    Cordialement

    Martine

    Répondre
    • Bonjour MArtine,

      J’ai vu votre mail mais pas eu le temps d’y répondre pour l’instant. Il ne faut pas acheter d’addon ou de plugin en plus. Mais la version de shortcode ultimate a changé depuis ce tutoriel. Maintenant, il faut juste cliquer sur un bouton au-dessus de l’éditeur wysiwyg, dans l’article ou la page, et choisir « Diaporama » ou « slider ». C’est encore plus simple qu’avant ! Dites moi si vous ne trouvez pas.

      Répondre
  15. Bonjour!
    Je développe une nouvelle partie de site et je découvre avec bonheur les onglets! et aussi par la meme occasion les shortcodes.
    J’ai remarqué que le contenu de mes onglets ne s’écrit pas comme le contenu de la page (la police et la couleur de police changent)
    Dans quel ficher css se règle ces paramètres?
    Est ce la meme chose pour l’insertion de medias ou d’autres contenus?

    Merci pour ton aide.
    Hélene

    Répondre
    • Bonjour Hélène,
      Je crois que dans la version gratuite, on ne peut pas gérer le css (je suis plus sûre et je n’en ai pas un sous la main). Pour vérifier va dans les réglages du plugin (onglet css, il me semble qu’il y en a un). Sinon tu peux tout simplement travailler dans le fichier css de ton thème (attention aux règles de priorités de la cascade).

      Répondre
  16. Yes!
    J’adore tomber sur des pépites comme cet article.
    Merci MarieEve! 😉

    Répondre

Trackbacks/Pingbacks

  1. Créez des onglets en 5 secondes avec sho... - [...] Je reprends la série sur ce plugin très complet : Shortcode Ultimate. Après vous l’avoir présenté et montré comment…
  2. Créez des onglets en 5 secondes avec shortcodes ultimate | Les Doigts dans le Net | la bibliothèque, et veiller - [...] Je reprends la série sur ce plugin très complet : Shortcode Ultimate. Après vous l’avoir présenté et montré comment créer un diaporama,…
  3. Tutoriels WordPress - Wordpress | Pearltrees - […] Formation Wordpress : Introduction. Créez des onglets avec le plugin wordpress Shortcode Ultimate. […]

Soumettre un commentaire

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint