Comment utiliser les shortcodes dans vos thèmes WordPress

Voulez-vous utiliser des shortcodes dans votre thème WordPress ?

Normalement, vous utiliserez des codes courts dans des zones de contenu telles que des publications, des pages ou des widgets de la barre latérale. Cependant, vous souhaiterez parfois ajouter un shortcode dans votre thème WordPress.

Dans cet article, nous allons vous montrer comment ajouter facilement n’importe quel shortcode à votre thème WordPress.

Pourquoi utiliser des shortcodes dans vos thèmes WordPress ?

Les codes courts vous permettent d'ajouter toutes sortes de fonctionnalités à votre site Web, notamment des galeries d'images, des formulaires, des flux de réseaux sociaux et bien plus encore.

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

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

La plupart du temps, vous ajouterez des codes courts dans des zones de contenu telles que des articles et des pages.

Pour en savoir plus, veuillez consulter notre guide complet sur la façon d'ajouter un shortcode dans WordPress.

Cependant, vous souhaiterez parfois utiliser un shortcode dans vos fichiers de thème WordPress.

Cela vous permet d'ajouter des éléments dynamiques aux zones que vous ne pouvez pas modifier à l'aide de l'éditeur de publication WordPress standard, comme votre page 404. C’est également un moyen simple d’utiliser le même shortcode sur plusieurs pages.

Par exemple, vous pouvez ajouter un shortcode au modèle de page ou de publication de votre thème.

Dans cet esprit, voyons comment vous pouvez utiliser les shortcodes dans votre thème WordPress. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser.

Méthode 1 : utilisation de l'éditeur de site complet (thèmes de bloc uniquement)

Le moyen le plus simple d’utiliser des shortcodes dans votre thème WordPress consiste à utiliser l’éditeur de site complet. Cela vous permet d'ajouter un bloc Shortcode à n'importe quelle partie de votre site Web.

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

Pour commencer, rendez-vous sur Thèmes » Éditeur dans le tableau de bord WordPress.

Par défaut, l'éditeur de site complet affiche le modèle d'accueil de votre thème, mais vous pouvez ajouter des codes courts à n'importe quel modèle ou partie de modèle, comme l'en-tête ou le pied de page.

Pour voir toutes les options disponibles, sélectionnez simplement « Modèles » ou « Parties du modèle ».

Vous pouvez maintenant cliquer sur le modèle ou la partie de modèle que vous souhaitez modifier.

À titre d'exemple, nous ajouterons 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 désormais un aperçu du modèle ou de la partie du modèle.

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

Cela fait, cliquez sur l’icône bleue « + » dans le coin supérieur gauche.

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

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

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

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

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

Méthode 2 : Modification de vos fichiers de thème WordPress (fonctionne avec n'importe quel thème WordPress)

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 tous les thèmes WordPress.

Si vous n’avez jamais ajouté de code à votre site auparavant, consultez notre guide étape par étape sur la façon de copier et coller du code dans WordPress.

Vous pouvez modifier directement les fichiers de thème individuels, mais cela rend difficile la mise à jour de votre thème WordPress sans perdre la personnalisation. Pour cette raison, nous vous recommandons de remplacer les fichiers de 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 parce que WordPress n’exécute pas de shortcodes dans les fichiers de modèles de thème. Au lieu de cela, vous devrez indiquer explicitement à WordPress d'exécuter le shortcode à l'aide de la fonction do_shortcode.

Pour plus d’informations, veuillez consulter notre guide sur la façon d’ajouter facilement du code personnalisé.

Voici un exemple du code que vous ajouterez à vos fichiers de thème WordPress :

echo do_shortcode('[gallery]');

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

Si vous ne savez pas où ajouter le shortcode, veuillez consulter notre guide du débutant sur la hiérarchie des modèles WordPress.

Si vous ajoutez un shortcode avec des paramètres supplémentaires, l'extrait de code changera également un peu.

Imaginez que vous avez créé un formulaire de contact à l'aide de WPForms. Dans ce cas, vous devrez utiliser le shortcode standard WPForms ainsi que 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 le résultat du code n’apparaît pas sur votre site 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 pour vous en ajoutant la fonction shortcode_exists() à votre fichier index.php.

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

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

Si vous ne voyez toujours pas la sortie du shortcode sur votre site Web, essayez de vider le cache WordPress, car vous voyez peut-être une version obsolète de votre site.

Méthode 3 : Créer votre propre thème WordPress (entièrement personnalisable)

Une autre option consiste à créer un thème WordPress personnalisé. Il s’agit d’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 un thème possédant exactement les fonctionnalités et le design souhaités.

Dans le passé, vous deviez suivre des didacticiels WordPress compliqués et écrire du code pour créer un thème WordPress personnalisé. Cependant, il est désormais possible de créer un thème personnalisé sans écrire une seule ligne de code à l'aide de SeedProd.

SeedProd est le meilleur constructeur de pages WordPress et est également livré avec un constructeur de thèmes. Cela vous permet de concevoir vos propres thèmes par glisser-déposer.

Pour des instructions étape par étape, veuillez consulter notre guide sur la façon de créer un thème WordPress personnalisé (sans aucun code).

Après avoir créé un thème, vous pouvez ajouter des codes courts à n'importe quelle partie de votre site Web WordPress en accédant à SeedProd » Theme Builder.

Ici, recherchez le modèle dans lequel vous souhaitez utiliser un shortcode.

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

Cela ouvrira le modèle dans le générateur de page glisser-déposer de SeedProd.

Dans le menu de gauche, faites défiler jusqu'à la section « Avancé ». Ici, recherchez 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 case « 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 la bascule « Afficher l'option de shortcode ».

Après cela, vous souhaiterez peut-être ajouter du 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 à utiliser les shortcodes dans vos thèmes WordPress. Vous pouvez également consulter notre guide sur la façon de créer une page de destination dans WordPress et nos choix d’experts pour les meilleurs plugins de médias sociaux pour WordPress.

Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.