Comment ajouter un shortcode dans WordPress (Guide pour débutants)

Nous recevons souvent des utilisateurs qui se sentent dépassés par les shortcodes WordPress.

Ces petits extraits de code peuvent sembler déroutants au début, mais ils constituent en réalité l'une des fonctionnalités les plus puissantes de WordPress lorsqu'ils sont utilisés correctement.

Que vous souhaitiez ajouter des formulaires de contact, des galeries ou des mises en page personnalisées, les shortcodes offrent un moyen simple d'insérer des fonctionnalités complexes sans toucher au code.

Dans ce guide destiné aux débutants, nous vous montrerons exactement comment ajouter des shortcodes dans WordPress, où les placer et les meilleures façons de les utiliser.

Nous avons décomposé le tout en étapes simples et faciles à suivre que tout le monde peut comprendre, même si vous êtes complètement novice sur WordPress.

Que sont les shortcodes ?

Les shortcodes dans WordPress sont des raccourcis de code qui vous aident à ajouter du contenu dynamique aux articles, pages et widgets de barre latérale de WordPress. Ils sont affichés entre crochets comme ceci :

[myshortcode]

Pour mieux comprendre les shortcodes, examinons le contexte de leur ajout initial.

WordPress filtre tout le contenu pour s'assurer que personne n'utilise le contenu des articles et des pages pour insérer du code malveillant dans la base de données. Cela signifie que vous pouvez écrire du HTML de base dans vos articles, mais vous ne pouvez pas écrire de code PHP.

Mais que faire si vous vouliez exécuter du code personnalisé dans vos articles pour afficher des articles similaires, des bannières publicitaires, des formulaires de contact, des galeries ou autre chose ?

C'est là qu'intervient l'API Shortcode.

Fondamentalement, elle permet aux développeurs d'ajouter leur code dans une fonction, puis d'enregistrer cette fonction auprès de WordPress en tant que shortcode, afin que les utilisateurs puissent l'utiliser facilement sans aucune connaissance en codage.

Lorsque WordPress trouve le shortcode, il exécute automatiquement le code qui lui est associé.

Voyons comment ajouter facilement des shortcodes à vos articles et pages WordPress.

Vous pouvez utiliser les liens ci-dessous pour accéder à votre méthode préférée :

• Ajouter un shortcode dans les articles et pages WordPress
• Ajouter un shortcode dans les widgets de la barre latérale WordPress
• Ajout d'un shortcode dans l'ancien éditeur classique de WordPress
• Ajouter un shortcode dans les fichiers de thème WordPress
• Ajouter un shortcode dans les fichiers de thème de blocs avec l'éditeur complet du site
• Creating Your Own Custom Shortcode in WordPress
• Shortcodes vs. Blocs Gutenberg
• Questions fréquemment posées sur les shortcodes

Ajouter un shortcode dans les articles et pages WordPress

Tout d'abord, vous devez modifier l'article et la page où vous souhaitez ajouter le shortcode.

Ensuite, vous devez cliquer sur le bouton d'ajout de bloc '+' pour insérer un bloc Shortcode.

Après avoir ajouté le bloc Shortcode, vous pouvez simplement entrer votre shortcode dans les paramètres du bloc.

Le shortcode sera fourni par divers plugins WordPress que vous pourriez utiliser, tels que WPForms pour les formulaires de contact.

Pour en savoir plus sur l'utilisation des blocs, consultez notre tutoriel sur l'éditeur de blocs Gutenberg pour plus de détails.

Vous pouvez maintenant enregistrer votre article ou votre page et prévisualiser vos modifications pour voir le shortcode en action.

Ajouter un shortcode dans les widgets de la barre latérale WordPress

Vous pouvez également utiliser des shortcodes dans les widgets de la barre latérale de WordPress.

Visitez simplement la page Apparence » Widgets et ajoutez un bloc de widget « Shortcode » à une barre latérale.

Vous pouvez maintenant coller votre shortcode dans la zone de texte du widget.

N'oubliez pas de cliquer sur le bouton « Mettre à jour » pour enregistrer vos paramètres de widget.

Après cela, vous pouvez visiter votre site web WordPress pour voir l'aperçu en direct du shortcode dans le widget de la barre latérale.

Ajout d'un shortcode dans l'ancien éditeur classique de WordPress

Si vous utilisez toujours l'ancien éditeur classique, vous pouvez ajouter des shortcodes directement dans la zone de contenu.

Modifiez simplement l'article ou la page et collez le shortcode là où vous souhaitez que la fonctionnalité apparaisse.

Pour de meilleurs résultats, nous vous recommandons de le placer sur sa propre ligne, en particulier pour les shortcodes qui ajoutent de grands éléments comme des formulaires ou des galeries. Cela permet d'éviter tout problème de mise en forme.

N'oubliez pas d'enregistrer vos modifications. Vous pouvez ensuite prévisualiser votre article pour voir le shortcode en action.

Ajouter un shortcode dans les fichiers de thème WordPress

Les shortcodes sont destinés à être utilisés dans les articles, les pages et les widgets WordPress. Cependant, parfois, vous voudrez peut-être utiliser un shortcode dans un fichier de thème WordPress.

WordPress facilite cela, mais vous devrez modifier vos fichiers de thème WordPress. Si vous ne l'avez jamais fait auparavant, consultez notre guide sur comment copier et coller du code dans WordPress.

Fondamentalement, vous pouvez ajouter un shortcode à n'importe quel modèle de thème WordPress en ajoutant simplement le code suivant :

<?php echo do_shortcode('[your_shortcode]'); ?>

WordPress recherchera alors le shortcode et affichera son résultat dans votre modèle de thème.

Ajouter un shortcode dans les fichiers de thème de blocs avec l'éditeur complet du site

Si vous utilisez un thème de blocs, vous trouverez plus facile d'ajouter des shortcodes dans les fichiers de votre thème WordPress en utilisant l'éditeur complet de site.

Vous pouvez accéder à cet outil en sélectionnant Apparence » Éditeur depuis le tableau de bord WordPress.

Le modèle d'accueil de votre thème vous sera montré par défaut, et vous pouvez passer à d'autres modèles en sélectionnant l'option « Modèles ».

Une fois que vous avez choisi un modèle, vous pouvez commencer à le modifier en cliquant dans le volet droit de l'éditeur. L'éditeur remplira maintenant l'écran.

Vous pouvez maintenant cliquer sur l'icône de l'insert de blocs « + » et rechercher le bloc de shortcode. Ensuite, faites-le simplement glisser sur le modèle et tapez le shortcode que vous souhaitez utiliser.

N'oubliez pas de cliquer sur le bouton « Enregistrer » en haut de l'écran pour sauvegarder vos modifications.

Créer votre propre shortcode personnalisé dans WordPress

Les shortcodes peuvent être très utiles lorsque vous souhaitez ajouter du contenu dynamique ou du code personnalisé dans les articles et les pages WordPress. Cependant, si vous souhaitez créer un shortcode personnalisé, cela nécessite une certaine expérience en codage.

Si vous êtes à l'aise avec l'écriture de code PHP, voici un exemple de code que vous pouvez utiliser comme modèle :

// function that runs when shortcode is called
function wpb_demo_shortcode() { 
 
// Things that you want to do.
$message = 'Hello world!'; 
 
// Output needs to be return
return $message;
}
// register shortcode
add_shortcode('greeting', 'wpb_demo_shortcode');

Dans ce code, nous avons d'abord créé une fonction qui exécute du code et renvoie le résultat. Ensuite, nous avons créé un nouveau shortcode appelé « greeting » et avons indiqué à WordPress d'exécuter la fonction que nous avons créée.

Vous pouvez ajouter ce code à votre fichier functions.php de thème manuellement ou utiliser un plugin d'extraits de code comme WPCode (recommandé).

Nous recommandons cette dernière option car WPCode est le moyen le plus sûr et le plus simple d'ajouter du code à votre site. Pour en savoir plus, consultez notre avis sur WPCode.

Pour plus de détails, vous pouvez consulter notre guide sur l'ajout de code personnalisé dans WordPress sans rien casser.

Une fois que vous avez fait cela, vous pouvez ajouter ce shortcode à vos articles, pages et widgets en utilisant le code suivant :

[greeting]

Il exécutera la fonction que vous avez créée et affichera le résultat souhaité.

Bien que cet exemple soit simple, le véritable pouvoir des shortcodes réside dans la réutilisation de code complexe.

En encapsulant un long script dans un shortcode, vous gardez votre éditeur de contenu propre et facilitez grandement les mises à jour sur l'ensemble du site. Vous n'avez qu'à modifier le code à un seul endroit.

Exemple pratique : Shortcode Google AdSense

Maintenant, examinons un exemple plus pratique.

Vous pouvez utiliser un shortcode pour afficher facilement une bannière Google AdSense n'importe où sur votre site.

// The shortcode function
function wpb_demo_shortcode_2() { 
 
// Advertisement code pasted inside a variable
$string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-0123456789101112"
     data-ad-slot="9876543210"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>';
 
// Ad code returned
return $string; 
 
}
// Register shortcode
add_shortcode('my_ad_code', 'wpb_demo_shortcode_2'); 

Assurez-vous de remplacer le code publicitaire de substitution par le vôtre. Vous pouvez maintenant utiliser le shortcode [my_ad_code] pour afficher la publicité dans n'importe quel article, page ou zone de widget.

Shortcodes vs. Blocs Gutenberg

Les blocs Gutenberg et les shortcodes vous permettent tous deux d'ajouter du contenu dynamique à votre site WordPress. La principale différence est que les blocs offrent une interface visuelle, tandis que les shortcodes sont des extraits textuels que vous collez dans un bloc spécifique.

De nombreux plugins WordPress populaires ont commencé à utiliser des blocs au lieu de shortcodes. C'est parce que les blocs sont souvent plus conviviaux pour les débutants et vous permettent de voir un aperçu du résultat final directement dans l'éditeur.

Nous avons rassemblé une liste des plugins de blocs Gutenberg les plus utiles pour WordPress que vous pourriez vouloir essayer.

Si vous souhaitez créer vos propres blocs Gutenberg personnalisés, vous pouvez suivre notre tutoriel étape par étape sur comment créer des blocs Gutenberg personnalisés dans WordPress.

Questions fréquemment posées sur les shortcodes

Ici, sur WPBeginner, nous recevons souvent des questions sur le fonctionnement des shortcodes. Vous trouverez ci-dessous les réponses à certaines des plus courantes.

Les shortcodes sont-ils toujours pertinents avec l'éditeur de blocs ?

Oui, absolument. Bien que de nombreux nouveaux plugins utilisent des blocs dédiés, des milliers d'autres plugins utilisent encore des shortcodes pour vous permettre d'ajouter des fonctionnalités à votre contenu. Vous les trouverez toujours utiles pendant longtemps, c'est pourquoi WordPress inclut un bloc Shortcode dédié.

Les shortcodes peuvent-ils ralentir mon site web ?

Un shortcode n'est aussi rapide que le code qu'il exécute. Un shortcode bien codé provenant d'un plugin réputé aura un impact minimal sur les performances de votre site.

Cependant, l'utilisation de trop de shortcodes qui chargent beaucoup de scripts sur une seule page peut parfois causer un ralentissement.

Comment trouver le shortcode d'un plugin ?

La plupart des plugins afficheront leur shortcode sur leur page de réglages, leur documentation, ou directement dans l'interface de l'éditeur. Par exemple, WPForms permet de copier facilement le shortcode d'un formulaire dès que vous l'enregistrez.

Puis-je utiliser des shortcodes dans des constructeurs de pages comme SeedProd ?

Oui, tous les principaux constructeurs de pages comme SeedProd disposent d'un bloc ou d'un widget dédié aux 'Shortcodes'. Vous pouvez simplement faire glisser le bloc sur votre mise en page et coller le shortcode que vous souhaitez afficher.

Nous espérons que cet article vous a aidé à apprendre comment ajouter un shortcode dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment afficher et masquer du texte dans les articles WordPress avec l'effet bascule et notre tutoriel sur comment copier et coller dans WordPress sans problèmes de mise en forme.

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.