Shortcoder : le plugin pour WordPress pour créer ses propres shortcodes

Shortcoder : le plugin pour WordPress pour créer ses propres shortcodes

Créer ses propres shortcodes peut s’avérer un gain de temps non négligeable. Si coder n’est pas votre fort, voici un plugin pour WordPress qui devrait faciliter la création de vos shortcodes.

Qu’est-ce qu’un shortcode ?

Un shortcode est un « petit bout de code » (traduction littérale) qui se présente sous la forme d’un mot entouré de crochet.

Par exemple, « gallery » (à écrire entre crochets) est un shortcode de WordPress, qui permet d’afficher une galerie d’images dans une page ou un article. Pour l’utiliser, il suffit d’écrire « gallery » (entre crochets) dans la page de son choix, et WordPress génèrera une galerie automatiquement (composée de chaque image qui est attachée à la page en cours).

L’avantage d’un shortcode est double :

  • il automatise un comportement complexe comme la création d’une galerie : vous n’avez donc pas à configurer un plugin, ni à perdre de temps. Seule l’écriture du shortcode est suffisante.
  • il facilite la maintenance : si vous souhaitez changer l’apparence de la galerie, il suffit de changer la définition du shortcode et les modifications s’appliqueront en une fois, partout où le shortcode a été utilisé.

Euh…je vous entends me dire « comment ça, changer la définition du shortcode ?? »

Dans l’exemple que je viens de donner en effet, vous n’avez pas d’autres choix que de mettre les mains doigts dans le code si vous souhaitez changer sa définition ! Mais imaginez que vous puissiez créer vos propres shortcodes sans coder : le principe serait bien entendu le même, sauf que cette fois, vous pourriez le modifier à volonté via le back-office de WordPress. Ce serait bien pratique, non ?

Dans quelle situation pouvez-vous avoir besoin d’un shortcode ?

Dès que vous utilisez plusieurs fois le même contenu au sein d’une page, vous avez besoin d’un shortcode. Par exemple :

  • pour insérer une signature en bas d’article
  • pour insérer un appel à l’action en bas d’article
  • pour insérer une bannière de publicité en haut d’un article
  • pour générer automatiquement le crédit pour l’image utilisée dans un article
  • etc

Voici deux exemples « live » (sur des vrais sites) :

Sur le blog « MLM Travail à domicile » réalisé par l’un des stagiaire de FeelWeb Formation, chaque article contient un encart qui propose une bannière et suggère 3 liens vers des articles. Cet encart a été réalisé avec Shortcoder : Bruno peut donc choisir les 3 articles qui doivent dynamiquement s’afficher, tout le reste est généré automatiquement (la bannière, les titres, les flèches…).

Capture du blog MLM Travail à domicile

Exemple d’un shortcode en application sur le blog MLM Travail à domicile

J’utilise également un shortcode pour les crédits photos qui sont insérés en bas de mes articles : je n’entre que le nom de l’auteur de la photo, et le lien vers le site est généré automatiquement.

Comment fonctionne un shortcode ?

Avant d’aller plus loin, un petit rappel sur le fonctionnement des shortcodes. Si vous connaissez déjà ça très bien, vous pouvez sauter ce chapitre. 😉

Partons d’un exemple simple et imaginaire

Soit un shortcode [bouton] qui affiche sur le front-office un bouton,  sur lequel est écrit « Contactez-moi » et qui mène vers la page de contact (inutile d’essayer chez vous, ce shortcode est fictif).

Le code HTML qui correspond au bouton, ainsi que le code CSS qui permet de le mettre en forme (la bordure, les couleurs….), se trouvent quelque part dans les fichiers de WordPress : c’est ce qu’on appelle la définition du shortcode.

Quand WordPress écrit votre page ou votre article sur le front-office et qu’il « tombe » sur le shortcode [bouton] : il sait qu’il doit aller chercher sa définition et remplacer le shortcode dans le texte par le code trouvé dans la définition.

L’utilisation d’un même shortcode à plusieurs endroits dans le site fait donc référence à la même définition. Ce qui explique qu’un changement dans cette définition impacte l’ensemble du site.

J’espère que mon explication est claire, et que vous comprenez mieux comment ces shortcodes fonctionnent. Comment pouvons-nous garder le meilleur (l’automatisation) et s’affranchir des difficultés (le code) ?

Shortcoder : la réponse idéale pour créer un shortcode facilement

Ce plugin pour WordPress vous permet de créer un nouveau shortcode : d’un côté le nom que vous souhaitez lui donner (« bouton » dans notre exemple »), et de l’autre, sa définition (le code HTML et CSS).

Son avantage est triple :

  • vous n’avez plus besoin d’aller dans les fichiers de WordPress pour écrire la définition du shortcode
  • vous n’avez pas besoin de savoir coder en PHP
  • vous avez accès à un éditeur WYSIWYG pour générer et mettre en forme le code HTML
La mise en forme devrait être faite en CSS dans une feuille de style séparée, afin de conserver un code propre : si vous savez coder en CSS, je vous recommande cette solution.

Installation du plugin Shortcoder pour WordPress

L’installation est tout à fait classique, elle se fait via le back-office de WordPress :

back-office de wordpress : installation d'un plugin

Installation du plugin Shortcoder dans WordPress

Une fois que le plugin est activé, rendez-vous dans le menu Réglages > Shortcoder.

Configuration de Shortcoder

Ce plugin ne possède pas à proprement parler de zone de configuration. Il propose seulement 2 fonctionnalités :

  • créer un shortcode
  • ou gérer les shortcodes précédemment créés
Les deux fonctionnalités du plugin Shortcoder 

Les deux fonctionnalités du plugin Shortcoder

Créer son premier shortcode

Il suffit d’entrer dans le champ « Titre » le nom du shortcode. Dans notre cas, il s’agit de « bouton ».

capture d'écran de la page de création de shortcode

Créer un shortcode : étape 1

Automatiquement, le plugin nous donne le shortcode correspondant que l’on devra utiliser dans nos pages. Ici il s’agit de [sc:bouton]. Le plugin a donc rajouté un préfixe, et ce afin que ce shortcode n’entre pas en conflit avec un autre shortcode (déjà présent dans votre thème ou dans un autre plugin).

Ensuite, il faut entrer sa définition dans l’éditeur, c’est à dire ce qui sera affiché à la place du shortcode, sur le front-office. Je peux changer la couleur, la taille et mettre en gras. Voici ce que ça donne :

Editeur wysiwyg de shortcoder

Créer un shortcode : étape 2

Le code HTML associé, qui a été généré automatiquement par l’éditeur WYSIWYG (on est dans l’onglet « Texte » de l’éditeur) :

L'éditeur wysiwyg côté HTML

Version HTML

L’éditeur WYSIWYG ne me permet pas d’ajouter une bordure pour en faire un « vrai » bouton. Mais si vous connaissez CSS, vous pouvez le faire à la main ; voici le résultat :

Capture d'écran du rendu

Créer un shortcode : étape 3

Et le code HTML/CSS associé :

vue du code HTML et CSS du shortcode

Code HTML et CSS

Remarque pour les utilisateurs avertis : idéalement le code HTML ne devrait avoir qu’une classe CSS et le code CSS devrait être dans la feuille de style du thème.

Pour valider votre tout nouveau shortcode, cliquer sur le bouton en bas de page « Create Shortcode ».

Votre shortcode est alors déplacé dans la zone « Shortcode créés » en bas de la page :

Page de gestion des shortcodes déjà créés

Les shortcodes créés avec Shortcoder

Un simple clic dessus permet de l’éditer à nouveau.

Utiliser le shortcode nouvellement créé

A présent, je peux utiliser mon shortcode [sc:bouton] dans n’importe quelle page de mon site.

Le shortcode dans un article en back-office

Utilisation dans un article

Voici le résulat dans le front-office :

le shortcode sur le site

Rendu du shortcode sur le front-office

Ce tutoriel est un peu long, mais vous verrez qu’il prend peu de temps à mettre en place. Créer vos premiers shortcodes va devenir un vrai jeu d’enfant !

Pour l’instant, nous avons vu un shortcode très simple, puisqu’il s’applique « tel quel ». Essayons de le rendre plus intéressant. Par exemple : est-ce que je peux utiliser le même shortcode pour créer des boutons ayant la même apparence, mais un texte différent ?

Oui, c’est possible !

Créer un shortcode complexe (avec des paramètres)

L’idée ici, est de « donner un mot » au shortcode, afin qu’il utilise ce mot à la place du mot par défaut « contactez-moi ». Ok, ça a l’air compliqué dit comme ça…rien ne vaut une petite démonstration.

Retournons dans notre éditeur de shortcode (Menu Réglages > Shortcoder, puis cliquez sur le shortcode à modifier dans la zone du bas).

On remarque une instruction sous l’éditeur WYSIWYG :

Consignes en back-office

Comment ajouter un paramètre

Vous ne comprenez pas ce que ça signifie ? Pas de panique ! Voici un exemple d’application, vous allez très vite comprendre comment ça marche:

Dans la définition du shortcode, je remplace le mot « Contactez-moi » par le paramètre « %%text%% (puis je sauvegarde les changements).

Pour cette manipulation, je vous conseille de passer en mode HTML pour ne pas casser le code.

Exemple de shortcode avec un paramètre en back-office

Remplacer le mot par un paramètre avec le symboles %

Et j’indique ce paramètre dans l’article où j’utilise ce shortcode :

Shortcode avec paramètre

Comment écrire le shortcode avec un paramètre ?

Voici le résulat sur le front-office :

Texte modifié sur le front office

Voilà le rendu sur le site : le texte a bien été modifié

Pour aller plus loin, on pourrait aussi dynamiser l’url du lien afin d’utiliser ce shortcode pour créer un bouton pour n’importe quelle action (« S’inscrire », « Se connecter », « En savoir plus »…)

Faire ses shortcodes à la main

Bien sûr, il est tout à fait possible de créer ses shortcodes à la main. Vous devez pour cela utiliser la fonction « add_shortcode » dans le fichier functions.php de votre thème (enfant idéalement).

Le passage de paramètre est un peu plus complexe mais rien d’insurmontable !

Sans rentrer dans les détails, voici ce que ça donnerait pour le shortcode Bouton créé à la main :

function lddln_bouton($attr){
	// le passage de paramètre
	 extract( shortcode_atts( array(
		'text' => ''
	), $attr ) );

	// le code HTML du shortcode
	return '<p style="border: solid 2px green; padding: 5px; display: inline-block;"><a href="http://feelwebformation.com/contact"><strong>' . %%text%% . '</strong></a></p>';
}
// on déclare le nom du shortcode et la fonction qui comprend sa définition
add_shortcode('bouton', 'lddln_bouton');

Nous sommes arrivés à la fin de ce long tutoriel : je vais essayer d’en faire plus souvent, en abordant à chaque fois de façon très complète un plugin WordPress. Est-ce que ce format vous satisfait ?

Image courtesy of Stuart Miles http://www.freedigitalphotos.net

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]

7 commentaires

  1. Bonjour! Amateur en création de blog, l’utilisation des shortcodes (dont je viens l’apprendre l’existence en lisant cet article) m’intrigue beaucoup, cependant je voulais savoir si ils ne sont utilisables que sur des thèmes WP ou bien peuvent être utilisés sur n’importe quel site codé à condition d’avoir une ligne de code à rajouter? N’hésitez pas à me dire si je n’ai pas été très clair.
    En attente de votre réponse, cordialement.

    Franck

    Répondre
    • Bonjour Franck

      Les shortcodes sont un système propres à WordPress. Il est possible que d’autres CMS utilisent le même concept (par exemple Magento) mais on ne peut pas utiliser les shortcodes de l’un sur l’autre (et vice-versa).

      Il est par contre possible de reproduire le même comportement à la main sur tout type de site, mais ça va plus loin qu’une ligne de code.

      Bien à vous,

      Répondre
  2. Idéal lorsqu’on a plusieurs sites sous wordpress avec des éléments qui peuvent changer. Je travaille avec des artisans et il y a a pas mal de turn-over. Changer : nom, adresse, téléphone…etc… sur quelques pages du site… l’enfer. Avec ce ce de système j’ai réussi a gagner pas mal de temps. Je connaissais avant de lire votre article mais il m’a poussé a aller faire un tour dans le php :) Merci pour la motiv !!

    Répondre
  3. Salut Marie-Eve,
    Je ne connaissais pas ce plugin, mais d’après ce que j’ai pu lire dans ton article cela ne fonctionne que pour insérer du HTML, le php n’est pas possible ?

    En parlant de shortcodes, je t’invite à jeter un oeil à un plugin gratuit que l’on vient de sortir avec Thèmes de France. Ça s’appelle Cocorico Shortcodes : https://wordpress.org/plugins/cocorico-shortcodes/

    L’avantage est que tous les shortcodes sont traduits en français, ça limite donc les incompréhensions que l’on peut avoir avec :)

    Dis-moi ce que tu en penses si tu as le temps de tester.
    A+

    Répondre
    • Salut Alex,

      Non en effet on ne peut pas mettre de PHP dans ce plugin. En même temps, c’est un peu logique : si tu codes en php (ou si tu es suffisamment à l’aise pour au moins lire et copier/coller du php), tu peux bien passer par un hook dans le fichier functions.

      Une bonne idée ton plugin de shortcode, j’y jetterais un oeil. Je suis en train de tester ton plugin de bouton de réseaux sociaux, faut que je te dise ce que j’en pense à l’occasion.
      A++

      Répondre
  4. Bonjour MarieEve,

    Super article qui pourrait m’être utile si je savais comment créer les parenthèses en forme de crochets nécessaires pour taper un Short Code.
    Pourrais tu me dire ou elle devrait se trouver sur mon clavier sachant que je suis sur MAC…

    Merci

    Répondre
    • Bonjour Stéphane,

      Passer sur PC ? 😀 Désolée c’était trop tentant.

      Tu as un raccourci clavier, je le connais pas par coeur, mais d’après CommentCaMarche, ça devrait être :
      alt et ( pour {
      alt et ) pour }
      shift alt et ( pour [
      shift alt et ) pour ]

      Répondre

Trackbacks/Pingbacks

  1. Shortcoder : le plugin pour WordPress pour cr&e... - […] Créer ses propres shortcodes peut s'avérer un gain de temps non négligeable. Si coder n'est pas votre fort, voici…
  2. Tutoriels WordPress - Wordpress | Pearltrees - […] Formation Wordpress : Introduction. Shortcoder : le plugin pour WordPress pour créer ses propres shortcodes. […]

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