Shortcoder : le plugin pour WordPress pour créer ses propres 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 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…).

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

Installation du plugin Shortcoder pour WordPress

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

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

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 ».

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 :

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) :

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 :

Créer un shortcode : étape 3

Et le code HTML/CSS associé :

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 :

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.

Utilisation dans un article

Voici le résulat dans le front-office :

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 :

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.

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

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

Comment écrire le shortcode avec un paramètre ?

Voici le résulat 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;"><strong>' . %%text%% . '</strong></p>
';
}
// on déclare le nom du shortcode et la fonction qui comprend sa définition
add_shortcode('bouton', 'lddln_bouton');