Une Introduction Aux Shortcodes WordPress (Avec Exemples)

Les shortcodes WordPress peuvent facilement enrichir ton site web avec des éléments interactifs et captivants qui peuvent être répétés à travers les articles et les pages. Des exemples incluent des galeries d’images, des formulaires de contact, et des playlists pour rendre ton contenu plus utile et captivant.

Dans ce post, nous discuterons des shortcodes WordPress et pourquoi ils sont utiles. Ensuite, nous décrirons quatre méthodes pour commencer à utiliser des shortcodes sur ton site. Commencez maintenant !

WordPress Shortcodes 101

Les shortcodes WordPress sont des extraits qui permettent d’incorporer rapidement différents fichiers, objets ou morceaux de contenu dans ton site web. Ce sont des lignes uniques de code HTML qui peuvent inclure des éléments de publication interactifs.

Un shortcode ressemble à ceci, entouré de deux crochets :

[exampleshortcode]

Les shortcodes ont été introduits en 2008 pour faciliter la création de publications et de pages plus complexes. Ils offrent un moyen simple d’insérer et de charger des éléments de contenu dynamiques sur votre site.

Par exemple, tu peux vouloir personnaliser ta page d’accueil WordPress en intégrant une carte Google pour montrer ton emplacement commercial. Tu pourrais même ajouter une vidéo d’introduction en utilisant un shortcode :

Les propriétaires de sites web utilisent généralement des shortcodes dans le corps des articles, des pages et des types de publications personnalisés. Heureusement, à mesure que l’éditeur de blocs Gutenberg a évolué, l’utilisation des shortcodes est devenue encore plus conviviale. Nous aborderons ce sujet plus tard dans l’article.

Pourquoi Envisager D’utiliser Des Shortcodes WordPress

Il existe plusieurs raisons pour lesquelles tu pourrais vouloir utiliser les shortcodes WordPress. Pour commencer, ils sont souvent plus faciles à ajouter à ta page que d’apprendre et d’écrire un long morceau de code HTML.

De plus, les shortcodes peuvent garder ton contenu propre et organisé. Ils ne prennent pas autant de place dans le HTML de ton article. Cela peut t’aider à identifier facilement les erreurs lorsque tu utilises l’éditeur de code.

Les codes courts sont également réutilisables. Tu n’auras pas besoin d’ajouter manuellement les mêmes fonctionnalités, telles qu’un appel à l’action (CTA) ou des boutons de réseaux sociaux, à chaque publication. Au lieu de cela, tu peux simplement coller ton code court.

WordPress Shortcodes 101 (4 Façons d’Utiliser Ces Extraits)

Il existe deux types de base de codes courts que tu dois connaître : auto-fermants et englobants. Les codes courts auto-fermants sont indépendants et ne nécessitent pas de balises de fermeture :

[myshortcode]

Les shortcodes englobants entourent un élément de contenu spécifique pour le modifier. Par conséquent, les shortcodes englobants doivent être fermés manuellement. Ils ressemblent généralement à ceci :

[myshortcode] contenu [/myshortcode]

Tu peux aussi modifier les propriétés des shortcodes avec différents attributs. Cela influencera la manière dont l’élément s’affiche sur le frontend.

Par exemple, tu pourrais changer la taille d’un shortcode de galerie en ajoutant un attribut de taille :

[gallery id="123" size="medium"]​​

Si tu consultes le Répertoire des Plugins WordPress, tu trouveras qu’il existe de nombreuses options pour utiliser des shortcodes sur ton site WordPress. Voici quatre options différentes !

1. Shortcodes Par Défaut De WordPress

WordPress est équipé de shortcodes intégrés de base. Ces extraits te permettent d’intégrer des médias supplémentaires directement dans tes publications.

Ces codes courts incluent :

• [caption]: Entoure le contenu de légendes.
• [gallery]: Affiche des galeries d’images.
• [audio]: Intègre et joue des fichiers audio.
• [video]: Intègre et joue des fichiers vidéo.
• [playlist]: Affiche une collection de fichiers audio ou vidéo.
• [embed]: Entoure les éléments intégrés.

Tu peux également activer une variété de shortcodes supplémentaires via le plugin Jetpack.

Tout d’abord, assure-toi que le module Jetpack est activé en cliquant sur Jetpack dans ton tableau de bord WordPress :

Ensuite, sélectionne Settings :

Rends-toi à l’onglet Écriture, descends jusqu’à la section Rédaction et active Composer en utilisant des shortcodes pour intégrer des médias de sites populaires :

Une fois que tu as activé cette option, tu peux utiliser le shortcode [tweet] pour intégrer un tweet spécifique dans ton billet. Il suffit de copier l’URL du tweet et de la coller dans tes crochets de shortcode :

Cela intégrera le tweet lié dans ton post. Le résultat ressemblera à ceci :

Tu peux utiliser ces codes courts supplémentaires pour intégrer une multitude d’autres médias dans ton contenu, y compris des playlists Spotify, des documents Google ou des recettes.

2. Codes Courts de Gutenberg

Les blocs Gutenberg facilitent l’ajout de contenu dynamique dans vos articles. L’éditeur de blocs te permet de modifier facilement des sections individuelles et d’appliquer des paramètres et des règles de formatage spécifiques aux blocs sans utiliser de plugins.

L’éditeur Gutenberg a évolué pour rendre la création de publications et de pages WordPress encore plus facile. Il offre une manière conviviale d’insérer des shortcodes. La plupart des blocs Gutenberg remplacent les shortcodes standards, mais l’éditeur de blocs s’est avéré être une cible mouvante, donc apprendre à utiliser les shortcodes pour la fonctionnalité est une bonne idée.

Par exemple, tu pourrais utiliser un bloc Gutenberg pour intégrer le tweet de notre exemple précédent au lieu d’un shortcode. Il te suffit de cliquer sur l’icône + et de sélectionner le bloc Twitter :

Cette méthode te permet de coller directement l’URL du tweet dans le bloc sans écrire le shortcode entre crochets.

De plus, l’éditeur de blocs Gutenberg propose un bloc Shortcode. Il te permet de gérer tes extraits dans l’éditeur visuel sans écrire directement le code en HTML :

Gutenberg te permet également de créer des blocs réutilisables, ce qui peut être pratique pour utiliser les mêmes extraits de contenu dans tes articles. Nous pouvons te montrer ce concept avec un appel à l’action pour les réseaux sociaux que tu pourrais utiliser à la fin des articles que tu écris sur ton site.

Tu peux commencer en sélectionnant le bloc Shortcode dans la fenêtre pop-up :

Ensuite, une fois que tu as ajouté ton extrait de CTA, clique sur les trois points pour un menu d’options et sélectionne Ajouter aux blocs réutilisables :

Tu peux alors nommer le bloc réutilisable :

Ton extrait sera ensuite enregistré sous l’onglet réutilisable, te permettant de l’utiliser partout sur ton site web, y compris dans les articles, les pages et les zones de widget.

3. Shortcodes de Plugin

Différents plugins WordPress viennent également avec leurs propres codes courts. Certains de ces outils peuvent même t’aider à ajouter des paramètres personnalisables aux codes courts par défaut existants.

Par exemple, tu peux obtenir des shortcodes prêts à l’emploi pour des formulaires de contact depuis le plugin Participants Database. Il suffit de taper [pdb_signup] pour insérer un formulaire d’inscription dans un article :

Le formulaire s’affichera alors sur le frontend :

Si cela t’intéresse, tu peux en apprendre davantage sur d’autres plugins WordPress qui peuvent améliorer ton site web. Cela inclut le plugin Enhanced Media Library, qui peut t’aider à ajuster les paramètres pour les shortcodes Playlist et Gallery intégrés.

Cependant, n’oublie pas de mettre à jour tes plugins de shortcode WordPress. Faire cela peut garantir que ton site fonctionne aussi rapidement que possible et n’est pas vulnérable aux menaces de sécurité.

4. Codes Courts Personnalisés

Si tu as besoin de plus de fonctionnalités avec les shortcodes, il est possible de créer des shortcodes personnalisés. Ils peuvent être des outils précieux pour les développeurs cherchant à réduire le temps passé sur le codage répétitif.

Tu devrais noter que créer des shortcodes personnalisés nécessite des connaissances techniques. Si tu ne te sens pas à l’aise avec la programmation, tu pourrais préférer te tenir à une des autres stratégies que nous avons mentionnées.

Si tu veux essayer cette méthode, envisage d’utiliser un générateur tel que GenerateWP pour aider à formater ton code depuis le début. Tu peux remplir différents champs d’attributs pour modifier l’apparence de l’élément selon tes préférences.

Tu peux ensuite implémenter ces shortcodes en utilisant la fonction add_shortcode. En action, cela ressemblera à ceci :

add_shortcode( string $tag, callable $callback )

Cependant, si tu ne te sens pas à l’aise de créer un shortcode personnalisé à partir de zéro, il y a une autre solution ! Tu peux contacter notre équipe de services de développement web personnalisé, et nous pouvons t’aider :

En utilisant les Services professionnels de DreamHost, tu as juste besoin de remplir une demande de développement web. Nous te poserons quelques questions simples sur ton site web et tes exigences. Ensuite, nous pouvons commencer à travailler sur l’implémentation de tes modifications sur une version préliminaire de ton site. Une fois que tu as approuvé les derniers ajustements, nous pouvons appliquer le nouveau code à ton site web en direct !

Utilise Les Shortcodes WordPress Pour Améliorer Ton Contenu

Les shortcodes WordPress peuvent enrichir le contenu de ton site avec des fonctionnalités attrayantes pour les visiteurs. Ils peuvent garantir que les lecteurs interagissent avec ton site et continuent de revenir pour plus.

Dans cet article, nous avons décrit quatre méthodes pour utiliser les shortcodes WordPress sur ton site :

1. Shortcodes par défaut de WordPress
2. Shortcodes de Gutenberg
3. Shortcodes de Plugins
4. Shortcodes personnalisés

Si tu penses que tu n’as pas l’expertise technique ou le temps de rédiger des shortcodes ou des Blocks, ne t’inquiète pas ! Tu peux consulter nos Services professionnels de développement de site web pour découvrir comment nous pouvons personnaliser ton site avec du code de haute qualité.