Comment utiliser les shortcodes dans vos thèmes WordPress

Nous utilisons les shortcodes dans les thèmes WordPress depuis des années, et ils sont devenus une partie intégrante de la façon dont nous construisons des sites.

Ils résolvent un problème simple : comment ajouter la même fonctionnalité à plusieurs endroits sans dupliquer de code ou rendre vos fichiers de thème plus difficiles à gérer.

Les shortcodes vous permettent de créer des extraits de code simples et réutilisables qui fonctionnent n'importe où sur votre site.

Que vous ayez besoin d'afficher du contenu personnalisé, d'ajouter des formulaires ou de créer des éléments interactifs, les shortcodes offrent un moyen propre d'ajouter cette fonctionnalité et de l'utiliser partout où elle est nécessaire.

Dans ce guide, nous vous montrerons comment utiliser les shortcodes dans vos thèmes en utilisant différentes méthodes.

Pourquoi utiliser des shortcodes dans vos thèmes WordPress ?

Les shortcodes peuvent ajouter toutes sortes de fonctionnalités à votre site Web, y compris des galeries d'images, des formulaires, des flux de médias sociaux, et bien plus encore.

WordPress est livré avec quelques shortcodes intégrés, mais il existe également de nombreux plugins WordPress populaires qui ajoutent des shortcodes à votre site.

Par exemple, WPForms dispose de blocs faciles à utiliser, mais il fournit également des shortcodes pour que vous puissiez ajouter des formulaires à d'autres zones de votre site Web.

La plupart du temps, vous ajouterez des shortcodes dans des zones de contenu comme les articles et les pages.

Pour en savoir plus, veuillez consulter notre guide complet sur comment ajouter un shortcode dans WordPress.

However, sometimes, you may want to use a shortcode inside your WordPress theme files.

This allows you to add dynamic elements to areas you can’t edit using the standard WordPress post editor, such as your archive page. It’s also an easy way to use the same shortcode on multiple pages.

For example, you might add a shortcode to your theme’s Page or Post template.

With that in mind, let’s see how you can use shortcodes in your WordPress theme. Simply use the quick links below to jump straight to the method you want to use:

• Method 1: Using the Full-Site Editor (Block Themes Only)
• Method 2: Editing Your WordPress Theme Files (Works With Any WordPress Theme)
• Method 3: Adding Shortcode With a Page Builder (Custom Themes)

Method 1: Using the Full-Site Editor (Block Themes Only)

The easiest way to add a WordPress shortcode to your theme is by using the full site editor. This allows you to add a Shortcode block to any part of your website.

Cependant, cette méthode ne fonctionne qu'avec les thèmes basés sur des blocs comme Hestia Pro. Si vous n'utilisez pas un thème compatible avec les blocs, vous devrez utiliser une méthode différente.

Pour commencer, rendez-vous dans Apparence » Éditeur dans le tableau de bord WordPress.

Par défaut, l'éditeur de site complet affiche le modèle de page d'accueil de votre thème, mais vous pouvez ajouter des shortcodes à n'importe quel modèle.

Pour voir toutes les options disponibles, sélectionnez « Modèles ».

Vous pouvez maintenant cliquer sur le modèle de page personnalisé que vous souhaitez modifier.

À titre d'exemple, nous allons ajouter un shortcode au modèle de page 404, mais les étapes seront exactement les mêmes, quel que soit le modèle que vous sélectionnez.

WordPress affichera maintenant un aperçu du modèle.

Pour ajouter un shortcode, cliquez sur la petite icône en forme de crayon.

Une fois cela fait, cliquez sur l'icône bleue « + » dans le coin supérieur gauche de l'éditeur de blocs.

Dans la barre de recherche, vous devez taper « Shortcode ».

Lorsque le bon bloc apparaît, faites-le glisser et déposez-le sur le modèle de thème.

Vous pouvez maintenant coller ou taper le shortcode que vous souhaitez utiliser.

Après cela, cliquez sur le bouton « Enregistrer ».

Maintenant, visitez simplement votre blog WordPress pour voir le shortcode en action.

Method 2: Editing Your WordPress Theme Files (Works With Any WordPress Theme)

Vous pouvez également ajouter des shortcodes à votre thème WordPress en modifiant les fichiers du thème. Cette méthode est plus avancée, mais elle fonctionne avec les thèmes classiques et les thèmes blocs.

Si vous n'avez jamais ajouté de code à votre site auparavant, consultez notre guide étape par étape sur comment copier et coller du code dans WordPress.

Vous pouvez modifier les fichiers individuels du thème directement, mais cela rend difficile la mise à jour de votre thème WordPress sans perdre les personnalisations. Pour cette raison, nous vous recommandons de remplacer les fichiers du thème en créant un thème enfant.

Si vous créez un thème personnalisé, vous pouvez ajouter ou modifier le code dans vos fichiers de thème existants.

Lors de la modification de vos fichiers de thème, vous ne pouvez pas ajouter le shortcode dans le même format que celui que vous utilisez avec les zones de contenu standard. Au lieu de voir la sortie du shortcode, vous verrez le shortcode lui-même à l'écran.

Cela se produit car WordPress n'exécute pas les shortcodes à l'intérieur des fichiers de modèle de thème. Au lieu de cela, vous devrez dire explicitement à WordPress d'exécuter le shortcode en utilisant la fonction do_shortcode.

Pour plus d'informations, consultez notre guide sur comment ajouter facilement du code personnalisé.

Voici un exemple du code que vous ajouterez aux fichiers de votre thème WordPress :

echo do_shortcode('[gallery]');

Remplacez simplement « gallery » par le shortcode que vous souhaitez utiliser.

Si vous ne savez pas où ajouter le shortcode, consultez notre guide pour débutants sur la hiérarchie des modèles WordPress.

Si vous ajoutez un shortcode avec des paramètres supplémentaires, vous devrez utiliser un extrait de code légèrement différent.

Imaginez que vous avez créé un formulaire de contact avec WPForms. Dans ce cas, vous devrez utiliser le shortcode WPForms standard plus l'ID du formulaire :

echo do_shortcode("[wpforms id='92']");

Dépannage : Que faire lorsque do_shortcode ne fonctionne pas

Parfois, vous pouvez ajouter un shortcode à un fichier de thème, mais la sortie du code n'apparaît pas sur votre site Web WordPress. Cela signifie généralement que le shortcode dépend d'un plugin WordPress ou d'un autre code sur votre site Web.

Si la fonction do_shortcode ne fonctionne pas, assurez-vous que le plugin fournissant le shortcode est installé et activé en allant dans Plugins » Plugins installés.

Dans l'image suivante, WPForms est installé mais désactivé, donc le code echo do_shortcode ne fonctionnera pas.

Vous pouvez également vérifier si un shortcode est disponible en ajoutant la fonction shortcode_exists() à votre fichier index.php.

Dans l'extrait suivant, nous vérifions si l'extrait WPForms est disponible pour être utilisé sur notre site Web :

if ( shortcode_exists( 'wpforms' ))  {
  echo do_shortcode("[[wpforms id='147']]");
}

Si vous ne voyez toujours pas le résultat du shortcode sur votre site Web, essayez de vider le cache WordPress, car vous pourriez voir une version obsolète de votre site.

Method 3: Adding Shortcode With a Page Builder (Custom Themes)

Une autre option consiste à créer un thème WordPress personnalisé. C'est une méthode plus avancée, mais elle vous permet d'ajouter autant de shortcodes que vous le souhaitez à n'importe quelle zone de votre thème WordPress. Vous pouvez également apporter d'autres modifications pour créer exactement les fonctionnalités et le design que vous souhaitez.

Par le passé, il fallait généralement suivre un tutoriel compliqué ou écrire du code personnalisé pour créer un thème WordPress personnalisé. Cependant, vous pouvez maintenant créer un thème personnalisé sans écrire une seule ligne de code en utilisant SeedProd.

SeedProd est le meilleur constructeur de pages WordPress et est également livré avec un constructeur de thèmes, ainsi que des kits de site et modèles complets. Il vous permet de concevoir vos propres thèmes à l'aide d'un éditeur par glisser-déposer.

Plusieurs de nos marques partenaires ont conçu leurs sites Web entiers avec, et leurs équipes ont adoré la facilité d'utilisation et la simplicité.

Pour des instructions étape par étape, veuillez consulter notre guide sur comment créer un thème WordPress personnalisé (sans code).

Après avoir créé un thème, vous pouvez ajouter des shortcodes à n'importe quelle partie de votre site Web WordPress en allant dans SeedProd » Constructeur de thèmes.

Ici, trouvez le modèle où vous souhaitez utiliser le shortcode.

Ensuite, survolez simplement votre souris sur ce modèle et cliquez sur « Modifier la conception » lorsqu'il apparaît.

Cela ouvrira le modèle dans le constructeur de thèmes de SeedProd.

Dans le menu de gauche, faites défiler jusqu'à la section « Avancé ». Ici, trouvez le bloc Shortcode et faites-le glisser sur votre mise en page.

Dans l'aperçu en direct, cliquez simplement pour sélectionner le bloc Shortcode.

Vous pouvez maintenant ajouter votre shortcode dans la boîte « Shortcode ».

Par défaut, SeedProd n'affiche pas la sortie du shortcode dans l'aperçu en direct.

Pour voir votre shortcode en action, cliquez sur le commutateur « Afficher l'option Shortcode ».

Après cela, vous voudrez peut-être ajouter un style à la sortie du shortcode en sélectionnant l'onglet « Avancé ».

Ici, vous pouvez modifier l'espacement, ajouter du CSS personnalisé et même ajouter des effets d'animation CSS.

Lorsque vous êtes satisfait de l'apparence de la page, cliquez simplement sur le bouton « Enregistrer ».

Après cela, sélectionnez « Publier » pour rendre le shortcode actif.

Vous pouvez maintenant visiter votre site web pour voir le shortcode personnalisé en action.

Nous espérons que ce tutoriel vous a aidé à apprendre comment utiliser les shortcodes WordPress dans vos thèmes. Vous voudrez peut-être aussi consulter notre guide sur comment créer une page de destination dans WordPress et notre guide ultime sur les éléments de conception WordPress les plus efficaces.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.