Pour faire des trucs cools sur WordPress avec peu d’efforts, les codes courts ou shortcodes sont une excellente idée. L’avantage avec ces éléments, c’est qu’ils vous permettent de faire à peu près n’importe quoi. Pour créer des mises en page complexes ou pour intégrer des éléments interactifs dans votre contenu, ces codes courts sont parfaits. Si vous êtes un novice, vous aurez quelques difficultés à vous en servir avec votre WordPress. Découvrez ici quelques conseils et astuces qui vous permettront de maîtriser les shortcodes.
Petit tour d’horizon sur les shortcodes WordPress
Encore appelés codes courts, les shortcodes sont des éléments qui utilisent des balises entre crochets, lesquels servent à définir leur utilisation. Chaque shortcode que vous utiliserez vous permettra d’arriver à des fins différentes telles que, la création d’un formulaire de contact, l’intégration d’un diaporama ou l’ajout d’un tableau comparatif de tarifs pour un site woocommerce par exemple.
D’où viennent les shortcodes ?
Les shortcodes sont apparus en 1998 lors de leur première utilisation sur un forum appelé UBB (Ultimate Bulletin Board). Notez qu’à cette période, il existait ce qu’on appelle le BBCode (Bulletin Board Code), un ensemble de balises utilisables par les visiteurs du forum. Si le BBCode est plus simple et plus léger que le codage HTML, le principe de fonctionnement est le même. Ce qui diffère avec le Bulletin Board Code, c’est que l’utilisation de ses balises est plus sûre que celle du langage HTML parce que les utilisateurs n’ont pas la possibilité d’introduire de code HTML.
En d’autres termes, les vulnérabilités en matière de sécurité sont évitées. Quelque temps après la première utilisation, d’autres Content Management System, dont les forums vBulletin et PHPBB ont employé cette fonctionnalité. Enfin, il est important de préciser que WordPress refuse l’exécution du code PHP à l’intérieur du contenu du site pour des raisons de sécurité. Pour surmonter cette contrainte, depuis la version 2.5 de WordPress sortie en 2008, les shortcodes sont intégrés à ce CMS.
Quels sont les codes courts sur WordPress ?
Sur WordPress, les codes courts servent à mettre en place plusieurs contenus sur votre site et à personnaliser votre mise en page, sans avoir des connaissances en codage et sans avoir besoin d’éditer un script HTML. Si vous utilisez ce CMS, vous aurez à votre disposition deux types de shortcodes à exploiter. Il s’agit des codes courts à fermeture automatique qui n’ont pas besoin de balise de fermeture comme le code « Caption » et les codes courts de fermeture qui nécessitent l’utilisation d’une balise de fermeture.
Quels sont les shortcodes par défaut de WordPress ?
Sur WordPress, il existe plusieurs shortcodes par défaut que vous pouvez exploiter. Au nombre de ceux-ci, on peut citer : audio, caption, embed, gallery, playlist et vidéo. Le code court « audio » permet d’intégrer des fichiers audio sur votre site web. Il comprend des commandes de lecture courantes telles que Play et Pause. Quant au shortcode « caption », il enveloppe votre contenu avec des légendes. Il est généralement utilisé pour ajouter des légendes d’images. Cependant, vous avez la possibilité de l’employer pour n’importe quel élément HTML.
Vous pouvez utiliser le code court « embed » qui développe la fonctionnalité oEmbed par défaut. Avec ce raccourci, vous avez la possibilité de définir divers attributs aux éléments que vous incorporez à votre site. Pour ajouter une galerie d’images sur votre site, vous pouvez utiliser le code court « gallery ». Il vous permet d’accéder aux attributs pour définir les images utilisées et la personnalisation de l’apparence de la galerie.
Grâce au shortcode par défaut « playlist », vous afficherez une collection de fichiers audio ou vidéo. Avec son attribut de style, vous pouvez lui donner un mode « dark » (sombre). Enfin, le code court « vidéo » permet d’intégrer un fichier vidéo et de le lire grâce à un simple lecteur vidéo. Ici, plusieurs formats sont pris en charge. Au nombre de ceux-ci, on peut citer : mp4, WebM, m4v, ogv, wmv et flv.
Les shortcodes sont-ils toujours utiles ?
Il faut l’avouer, les shortcodes sont malheureusement de moins en moins utiles. Ce que WordPress envisage en réalité, c’est de se passer des codes courts à termes. Cependant, le CMS tient également à éviter que cette solution devienne utilisable. En effet, après les améliorations, on pourra toujours utiliser ces shortcodes dans un contenu, car WordPress est un CMS qui est rétrocompatible avec ses anciennes versions.
Pour l’ajout de contenus et les améliorations sur votre site, vous pouvez vous tourner vers la création de blocs sur mesure en fonction des éditeurs disponibles, à savoir : Gutenberg, Elementor ou Divi. Malheureusement, pour un créateur de plugin, cela peut demander énormément de travail supplémentaire. C’est la raison pour laquelle les codes courts restent une approche intéressante. Par exemple, si vous souhaitez créer une mise en page particulière pour un projet qui vous est confié, les shortcodes sont une excellente idée. Ils vous permettront de gagner du temps et d’atteindre vos objectifs sans trop de difficultés.
Quels sont les avantages et les inconvénients des shortcodes WordPress ?
Les shortcodes WordPress sont des solutions qui offrent des avantages, mais qui disposent également de quelques inconvénients. Découvrez-les sans plus tarder.
Les avantages
Le principal avantage des shortcodes, c’est qu’ils permettent d’ajouter de nombreuses fonctionnalités à votre site WordPress grâce à une ligne de code. Si vous êtes un débutant, vous n’aurez donc aucune difficulté à les utiliser. Ici, vous n’êtes pas obligé d’écrire des scripts complexes pour chaque insertion.
En outre, il est important de mentionner que lorsque vous n’avez pas de solides bases en programmation, vous aurez du mal à ajouter du code HTML à votre site. Avec les shortcodes, vous pouvez ajuster les paramètres de votre site sans difficulté. Selon vos préférences, vous pouvez conserver tous vos codes courts dans la même extension. Ainsi, vous pourrez les garder lorsque vous effectuez un changement de thèmes.
Enfin, si vous êtes un développeur web, vous gérez probablement plusieurs projets. Aussi, vous devez satisfaire plusieurs clients dans les meilleurs délais. En possédant les shortcodes prêts à l’emploi, vous gagnerez du temps.
Les inconvénients
Si vous êtes un débutant, les codes courts ne seront pas faciles à prendre en main. Ils sont donc plus adaptés pour les développeurs Web. Par ailleurs, si vous intégrez un code court à un thème, les fonctionnalités ajoutées ne fonctionnent plus en cas de changement de template. Notez que lorsque lorsqu’un shortcode est intégré, il peut casser votre HTML en raison de quelques balises conflictuelles.
Comment utiliser les codes courts de WordPress
L’utilisation des shortcodes dans WordPress est assez simple. Cependant, tout dépendra de l’endroit où vous souhaitez les ajouter sur votre plateforme. Quoi qu’il en soit, il sera nécessaire de bien vous documenter sur ces codes courts et sur les attributs supportés afin de bien configurer votre site internet.
Les shortcodes WordPress dans les pages et les articles
Pour commencer, rendez-vous dans l’éditeur de page ou d’articles où vous souhaitez insérer votre code court. Si vous utilisez Gutenberg, vous pouvez ajouter la balise de code court dans le bloc autonome « Code court » ou « Shortcode ». Pour la retrouver, il vous suffit d’aller dans la section « Widgets ». En revanche, si vous utilisez l’éditeur classique, vous devez utiliser la méthode classique. Certains codes courts possèdent même un bouton dans l’écran d’éditeur pour vous faciliter la tâche.
Les shortcodes WordPress dans les widgets de la barre latérale
Vous avez également la possibilité d’insérer des shortcodes dans les widgets qui se situent au niveau de la barre latérale. Pour les ajouter, rendez-vous dans l’onglet « Apparence » et cliquez sur « Widgets ». Ajoutez ensuite un widget Texte dans la section où vous désirez mettre un shortcode. Collez le code court dans la partie Widget Texte et sauvegardez-le. Si vous le souhaitez, vous pouvez visiter l’interface publique de votre site pour voir le résultat de votre shortcode dans la barre latérale.
Notez qu’avec WordPress 4.8 et les versions inférieures, les codes courts ne sont pas pris en charge dans les widgets qui se situent au niveau de la barre latérale. Pour en apprendre davantage sur cette particularité, n’hésitez pas à vous renseigner sur les nouvelles mises à jour et les améliorations.
Les shortcodes WordPress dans l’en-tête et le pied de page
Notez que les shortcodes de WordPress sont conçus spécialement pour les pages, les articles et les widgets. Cependant, vous avez la possibilité de les ajouter n’importe où sur votre site internet. Par exemple, si vous souhaitez ajouter un bouton CTA (Call to action) dans votre pied de page ou dans la totalité de vos actions avant la section des commentaires, vous devez recourir à la fonction de callback « do_shortcode() ».
Dans le but d’obtenir la configuration que vous désirez, vous devez ajouter un code spécifique au header.php ou au footer.php de votre thème ou à l’un de ses fichiers de modèle. Une fois que vous procédez de cette manière, le code court est affiché exactement à l’endroit où vous l’avez inséré. Il est important d’ajouter des crochets entre les guillemets pour faire écho au code court. Sans cette configuration, votre insertion ne fonctionnera pas. Par ailleurs, vous pouvez utiliser la fonction de callback do_shortcode() pour activer les shortcodes partout dans votre CMS WordPress.
Que faut-il savoir sur l’API des shortcodes ?
L’API des codes courts de WordPress définit la manière dont vous pouvez utiliser des codes courts pour personnaliser et étendre les fonctionnalités de votre plateforme. Il permet aux spécialistes du développement web de créer des contenus uniques avec des diaporamas, des formulaires et des call to action que les utilisateurs peuvent associer à leur site rien qu’en collant le shortcode adapté.
Notez qu’avec les codes courts, vous aurez droit à presque toutes les fonctionnalités que vous pouvez imaginer sur votre site internet. L’API prend en charge les codes courts à la fermeture automatique et les codes courts de fermeture. Il gère toutes les analyses délicates et comprend des fonctions d’aide pour définir et récupérer les attributs par défaut. En vous servant de l’API, vous pouvez aller directement au développement et à la personnalisation des codes courts. L’avantage ici, c’est que vous ne perdrez plus votre précieux temps à définir les expressions régulières pour les codes courts que vous créez.
Quelles sont les bases de l’API de shortcodes ?
Lorsque vous ouvrez un article ou une page WordPress, l’API recherche des codes courts enregistrés tout en traitant le contenu du site. S’il trouve un shortcode enregistré, l’API des codes courts prend le relais et renvoie l’affichage du shortcode ou des shortcodes. La chaîne renvoyée remplace la balise de code court à l’endroit où elle a été mise. Lorsque vous enregistrez un shortcode dans WordPress avec la fonction add_shortcode(), voici comment procéder :
add_shortcode(‘shortcode_name’, ‘shortcode_handler_function’);
Pour “short_name”, la balise WordPress sera recherchée au cours de l’analyse du contenu des articles. L’API des shortcodes vous recommande donc de n’utiliser que des lettres minuscules, des chiffres et des underscores pour définir sa valeur. Ici, vous devez impérativement éviter les tirets.
En ce qui concerne le shortcode_handler_function, la fonction de callback est exécutée après que WordPress a confirmé la présence d’un code court enregistré. Notez que la fonction handler shortcode se définit comme suit : function shortcode_handler_function (, , ){ }. Chaque élément a une signification précise. Si vous ne définissez aucun attribut, vous n’aurez qu’une chaîne vide par défaut. Ensuite, on a la valeur pour le contenu de fermeture lorsque vous définissez un code court de fermeture. La responsabilité de la fonction handler sera de s’assurer que la valeur de, est retournée à la sortie.
Enfin, on a . Si plusieurs codes courts ont la même fonction valide de callback, cette valeur vous permettra de déterminer le code court ayant déclenché la fonction handler.
Pour résumer, l’API analyse la balise du code court, ses attributs et son contenu en contournant les valeurs vers la fonction handler, qui les traite et renvoie une chaîne de sortie. Il s’agit d’un processus assez spécial qui n’est pas accessible aux débutants.
Où mettre vos scripts personnalisés de shortcodes ?
Selon vos préférences, vous pouvez ajouter vos scripts personnalisés de codes courts dans une extension ou les inclure dans le fichier functions.php du thème utilisé. Si vous optez pour la seconde solution, vous pouvez exécuter la fonction add_shortcode() sans rien modifier. En revanche, si vous optez pour une extension, vous devez initialiser vos scripts personnalisés après le chargement complet de WordPress. Pour vous en assurer, envoyez la fonction add_shortcode() dans une autre fonction. Ce procédé est appelé l’enveloppement de fonction. Il se présente comme suit :
function shortcodes_init(){
add_shortcode( ‘nom_du_code_court’, ‘shortcode_handler_function’ );
}
add_action(‘init’, ‘shortcodes_init’);
Ici, la fonction add_action() accroche la fonction shortcodes_init pour se déclencher lorsque le chargement de WordPress est achevé.
Comment utiliser les shortcodes WordPress: en résumé
En somme, les shortcodes ou codes courts sont des solutions qui permettent de personnaliser votre contenu sans accéder au langage de codage HTML. Avec une telle solution, vous gagnerez du temps tout en configurant votre site WordPress selon vos besoins.
