Comment utiliser les codes courts dans vos thèmes WordPress

Vous souhaitez utiliser des codes courts dans votre thème WordPress ?

Normalement, vous utiliserez des codes courts à l’intérieur des zones de contenu comme les publications, les pages ou les widgets de la colonne latérale. Cependant, il peut arriver que vous souhaitiez ajouter un code court à l’intérieur de votre thème WordPress.

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

Pourquoi utiliser des codes courts dans vos thèmes WordPress ?

Les codes courts vous permettent d’ajouter toutes sortes de fonctionnalités à votre site, 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 nombreuses extensions WordPress populaires qui ajoutent des codes courts à votre site.

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

La plupart du temps, vous ajouterez des codes courts à l’intérieur des zones de contenu comme les publications et les pages.

Pour en savoir plus, veuillez consulter notre guide terminé sur l’ajout d’un code court dans WordPress.

Cependant, il peut arriver que vous souhaitiez utiliser un code court dans les fichiers de votre thème WordPress.

Cela vous permet d’ajouter des éléments dynamiques à des zones que vous ne pouvez pas modifier à l’aide de l’éditeur d’articles WordPress standard, comme votre page d’archives. C’est également un moyen facile d’utiliser le même code court sur plusieurs pages.

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

Avec cela à l’esprit, voyons comment vous pouvez utiliser les codes courts dans votre thème WordPress. Il vous suffit d’utiliser les liens rapides ci-dessous pour passer directement à la méthode que vous souhaitez utiliser :

Méthode 1 : Utilisation de l’éditeur de blocs (thèmes uniquement)

La façon la plus simple d’utiliser les codes courts dans votre thème WordPress est d’utiliser l’éditeur complet du site. Cela vous permet d’ajouter un bloc de codes courts à n’importe quelle partie de votre site.

Cependant, cette méthode fonctionne uniquement avec les thèmes basés sur les blocs comme Hestia Pro. Si vous n’utilisez pas un thème basé sur les blocs, alors vous devrez utiliser une autre méthode à la place.

Pour Premiers, allez dans Apparence  » É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.

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

Vous pouvez maintenant cliquer sur le modèle que vous souhaitez modifier.

À titre d’exemple, nous allons ajouter un code court 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 affiche maintenant une Prévisualisation du modèle.

Pour ajouter un code court, cliquez sur l’icône du petit crayon.

Cliquez ensuite sur l’icône bleue « + » dans le coin supérieur gauche.

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

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 code court que vous souhaitez utiliser.

Ensuite, cliquez sur le bouton « Enregistrer ».

Il vous suffit maintenant de vous rendre sur votre blog WordPress pour voir le code court en action.

Méthode 2 : Modifier les fichiers de votre thème WordPress (fonctionne avec n’importe quel thème WordPress)

Vous pouvez également ajouter des codes courts à 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 individuels du thème, mais cela rend difficile la mise à jour de votre thème WordPress sans perdre la personnalisation. Pour cette raison, nous recommandons de surcharger 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 les fichiers de votre thème existant.

Lorsque vous modifiez les fichiers de votre thème, vous ne pouvez pas ajouter le code court dans le même format que vous utilisez avec les zones de contenu standard. Au lieu de voir la sortie du code court, vous verrez le code court lui-même à l’écran.

Cela est dû au fait que WordPress n’exécute pas les codes courts à l’intérieur des fichiers de modèles de thèmes. Au lieu de cela, vous devrez explicitement dire à WordPress d’exécuter le code court en utilisant la fonction do_shortcode.

En savoir plus, veuillez consulter notre guide sur la façon d’ajouter facilement un module personnalisé.

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

echo do_shortcode('[gallery]');

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

Si vous n’êtes pas confiant quant à l’endroit où ajouter le code court, veuillez consulter notre guide du débutant sur la hiérarchie des modèles WordPress.

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

Imaginez que vous ayez créé un formulaire de contact en utilisant WPForms. Dans ce cas, vous devrez utiliser le code court standard de WPForms plus l’ID du formulaire :

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

Dépannage : Que faire lorsque do_shortcode ne fonctionne pas

Il arrive parfois que vous ajoutiez un code court à un fichier de thème, mais que la sortie du code n’apparaisse pas sur votre site WordPress. Cela signifie généralement que le code court dépend d’une extension WordPress ou d’un autre code sur votre site.

Si la fonction do_shortcode ne fonctionne pas, assurez-vous que l’extension qui fournit le code court est installée et activée en allant dans Plugins  » Installed Plugins.

Dans l’image abrégée, WPForms est installé mais désactivé, donc le code echo do_shortcode ne fonctionnera pas.

Vous pouvez également vérifier si un code court 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 sur notre site :

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

Si vous ne voyez toujours pas la sortie du code court sur votre site, essayez de vider le cache de WordPress, car il se peut que vous voyiez une version obsolète de votre site.

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

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 codes courts 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 qui a exactement les fonctionnalités et le design que vous souhaitez.

Dans le passé, vous deviez suivre des tutoriels WordPress compliqués et écrire du code pour construire un thème WordPress personnalisé. Cependant, il est maintenant possible de créer un thème personnalisé sans écrire une seule ligne de code en utilisant SeedProd.

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

Pour obtenir 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 WordPress en allant dans SeedProd  » Theme Constructeur.

Trouvez ici le Modèle dans lequel vous souhaitez utiliser le code court.

Il vous suffit ensuite de survoler ce modèle et de cliquer sur « Modifier le modèle » lorsqu’il apparaît.

Cela ouvrira le Modèle dans le constructeur de page par glisser-déposer de SeedProd.

Dans le menu de gauche, défilez jusqu’à la section « Avancé ». Trouvez ici le bloc Shortcode et faites-le glisser sur votre mise en page.

Dans la Prévisualisation directe, il suffit de cliquer pour sélectionner le bloc de codes courts.

Vous pouvez maintenant ajouter votre code court dans la case « Code court ».

Par défaut, SeedProd n’affiche pas le code court dans la prévisualisation en direct.

Pour voir votre code court en action, cliquez sur le permuter « Afficher l’option de code court ».

Ensuite, vous pouvez ajouter du style à la sortie du code court en sélectionnant l’onglet « Avancé ».

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

Lorsque vous êtes satisfait de l’aspect de la page, cliquez sur le bouton « Enregistrer ».

Ensuite, sélectionnez « Publier » pour rendre le code court direct.

Vous pouvez maintenant visiter votre site pour voir le code court personnalisé en action.

Nous espérons que ce tutoriel vous a aidé à apprendre à utiliser les codes courts dans vos thèmes WordPress. Vous pouvez également consulter notre guide sur la façon de créer une page d’atterrissage sur WordPress et nos choix d’experts pour les meilleures extensions de réseaux sociaux pour WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.