Comment utiliser les shortcodes WordPress dans les pages et les publications
Les shortcodes WordPress peuvent accomplir des choses extraordinaires… si vous leur donnez une chance ! Un shortcode est une balise unique qui permet à l’utilisateur d’ajouter des scripts prédéfinis, des images, du contenu, des fonctions, etc. dans des pages WordPress sans avoir à saisir, à chaque fois, de longues lignes de code HTML ou CSS. Autant de bonnes raisons pour apprendre à utiliser ces shortcodes WordPress !
Souvenez-vous : enfant, il vous arrivait de crier « Maman est rentrée ! ». Évidemment, cette phrase signifiait bien plus que le fait que votre mère était de retour à la maison… Cela voulait dire : arrêter l’activité du moment, ranger le bazar et, surtout, cesser toute bêtise en cours.
C’est la même chose avec les shortcodes : la simple insertion d’un shortcode dans votre éditeur de page a des conséquences bien plus larges sur votre site Internet.
Un shortcode se compose généralement d’un ou deux mots entre crochets (ex. : [maman-rentrée]) qui ont pour but d’indiquer un script ou contenu attribué : arrêter l’activité du moment, ranger le bazar et cesser toute bêtise en cours.
Vous comprenez mieux ce qu’est un shortcode ? Voici les autres sujets abordés dans cet article :
- Utilisations des shortcodes
- Créer un shortcode en partant de zéro
- Créer un shortcode en utilisant un plugin
- Plugins avec shortcodes intégrés
C’est parti !
Pourquoi apprendre à utiliser les shortcodes WordPress ?
Apprendre à utiliser des shortcodes WordPress peut vous faire gagner du temps et vous faciliter la vie. Réfléchissez à toutes les tâches que vous devez répéter lorsque vous créez une page ou une publication.
Principales raisons pour apprendre à utiliser les shortcodes WordPress :
- Ajout rapide d’un lien d’inscription à la fin de votre article de blog.
- Ajout de boutons d’appel à l’action
- Ajout de formulaires de contact
- Création de colonnes
- Insertion de code AdSense
- Ajout d’images
- Ajout d’autres éléments visuels
S’il existe de nombreuses autres façons d’intégrer des shortcodes dans des sites WordPress, ces méthodes sont celles que nous avons le plus souvent rencontrées et utilisées. Ces shortcodes sont généralement regroupés avec des plugins.
Par exemple, le plugin Column Shortcodes facilite la création de colonnes sur les publications ou pages, et le plugin Ninja Forms utilise un shortcode pour faciliter l’ajout de formulaires de contact dans les publications ou pages.
Vous savez désormais ce qu’est un shortcode et connaissez quelques façons de l’utiliser. Découvrons maintenant comment créer vos propres shortcodes.
Créer votre premier shortcode WordPress
Il est vrai que les shortcodes WordPress facilitent l’ajout de fonctionnalités à votre site Web. Que faire, cependant, si vous ne trouvez pas de shortcode pour ajouter la fonction à laquelle vous pensez ? Une fois que vous savez utiliser les shortcodes WordPress, voici deux différentes façons de créer les vôtres.
- En partant de zéro — Rendez-vous dans le fichier function.php de votre thème WordPress pour créer un shortcode.
- À l’aide d’un plugin WordPress — Nous vous présentons un plugin qui devrait vous faciliter la tâche lors de la création d’un shortcode.
Créer un shortcode en partant de zéro
Petite info avant de commencer : il est conseillé de créer une sauvegarde avant d’apporter la moindre modification à vos fichiers de thèmes WordPress.
Toute mise à jour comporte un risque de dommage : croyez-moi, je sais de quoi je parle ! Cette méthode est également conseillée si vous possédez un thème enfant – ainsi, vous ne risquez pas de perdre vos shortcodes en cas de mise à jour du thème.
Nous allons créer un contenu de shortcode très simple, mais vous pouvez toujours créer des shortcodes plus avancés avec des éléments de code personnalisés.
Accédez à votre fichier functions.php dans votre dashboard WordPress. Dans Appearance (Apparence), cliquez sur Editor (Éditeur), puis sélectionnez votre fichier functions.php. Le shortcode est divisé en deux parties : la fonction et son nom.
La fonction
La fonction est le résultat du shortcode. Il représente ce que fera le shortcode sur votre site Web lorsqu’il sera utilisé. Exemple :
// Shortcode "Maman est rentrée"
function shortcode_mamanrentree () {
Return ‘arrêter l’activité du moment, ranger le bazar
et cesser toute
bêtise en cours
!’;
Nommer le shortcode
Nous devons maintenant ajouter le code afin d’associer la fonction à un nouveau shortcode. Dans l’exemple suivant, maman-rentrée sera le shortcode que nous créons, puis associerons à la fonction shortcode_mamanrentree.
add_shortcode(‘maman-rentrée’, ‘shortcode_mamanrentree’);
Nous obtiendrons ceci :
// Shortcode "Maman est rentrée"
function shortcode_mamanrentree () {
Return ‘arrêter l’activité du moment, ranger le bazar
et cesser toute
bêtise en cours
!’; add_shortcode(‘maman-rentrée’, ‘shortcode_mamanrentree’);
Dans cet exemple, Arrêter l’activité du moment, ranger le bazar et cesser toute bêtise en cours s’affichera chaque fois que j’ajouterai [maman-rentrée] dans une page, une publication ou un widget.
Notre exemple est farfelu, car nous en sommes encore à l’étape d’apprentissage des shortcodes WordPress. Vous pouvez nommer vos propres shortcodes comme bon vous semble, et y inclure les options de personnalisation que vous souhaitez. Je conseille toutefois d’opter pour des noms faciles à retenir. N’oubliez pas que les shortcodes doivent vous faciliter la vie !
Créer des shortcodes en utilisant un plugin
Peu enchanté à l’idée de bricoler le code de votre thème ? Pas d’inquiétude ! Comme je dis toujours, « il y a un plugin pour ça ».
Le plugin Shortcoder
Nous allons maintenant vous expliquer comment utiliser le plugin Shortcoder pour réaliser cette tâche. Ce plugin gratuit vous permet de créer des shortcodes en utilisant l’éditeur de page WordPress standard.
Depuis votre tableau de bord WordPress, cliquez sur Add New Plugins (Ajouter de nouveaux plugins), puis recherchez Shortcoder.
Une fois le plugin installé, procédez comme suit pour créer votre premier shortcode :
- Dans le menu en haut à gauche, cliquez sur Settings (Paramètres), puis sélectionnez Shortcoder.
- Cliquez sur Create a new shortcode (Créer un shortcode)
- Donnez un titre à votre shortcode, puis ajouter votre contenu dans l’éditeur.
- Cliquez sur Create shortcode (Créer le shortcode) en bas : vous venez de créer votre premier shortcode !
- Rendez-vous dans l’éditeur de la page ou publication où vous souhaitez ajouter votre shortcode.
- Cliquez sur l’icône de shortcode dans la barre d’outils de l’éditeur, puis sélectionnez quick insert (insertion rapide) en regard du shortcode que vous souhaitez utiliser.
- Publiez vos modifications et affichez la page !
Le plugin Shortcodes Ultimate
Avec 700 000 installations actives et une note de quasiment 5 étoiles, ce plugin gratuit se devait d’être mentionné. Shortcodes Ultimate offre un éventail complet de shortcodes prédéfinis, visuels et fonctionnels, pour créer un onglet, un bouton, un slider, un carrousel, une vidéo responsive — et bien plus encore.
Vous trouverez la liste complète des shortcodes prédéfinis dans l’image ci-dessous. Utilisez-les pour faciliter le processus de création. Dans votre tableau de bord WordPress, rendez-vous dans Add New Plugins (Ajouter de nouveaux plugins), puis recherchez Shortcodes Ultimate.
Les shortcodes WordPress offrent un potentiel illimité. Maintenant que vous savez les utiliser, basez-vous sur les informations ci-dessus pour créer facilement vos propres shortcodes : vous économiserez ainsi du temps et des efforts.
Image : Sanjeevan SatheesKumar sur Unsplash