Comment ajouter un code court dans WordPress (Guide du débutant)

Imaginez que vous puissiez ajouter de nouvelles choses à votre site WordPress, comme des diaporamas, des formulaires de contact ou même des listes spéciales, en tapant un simple code. C’est la puissance des codes courts.

Vous trouverez que de nombreuses extensions et thèmes WordPress peuvent utiliser des codes courts pour ajouter des fonctionnalités supplémentaires à votre site. Beaucoup de nos lecteurs nous demandent la meilleure façon de les ajouter à leurs publications, pages et colonne latérale.

Dans cet article, nous allons vous afficher comment utiliser les codes courts sur votre site WordPress, étape par étape. Nous allons même vous afficher comment créer des codes courts personnalisés si vous voulez être vraiment créatif.

Qu’est-ce qu’un code court ?

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

[myshortcode]

Pour mieux comprendre les codes courts, jetons un coup d’œil à l’arrière-plan de la raison pour laquelle ils ont été ajoutés en premier lieu.

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

Mais qu’en est-il si vous souhaitez exécuter un code personnalisé à l’intérieur de vos publications 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 des codes courts.

Fondamentalement, il permet aux développeurs/développeuses d’ajouter leur code à l’intérieur d’une fonction, puis d’inscrire cette fonction dans WordPress en tant que code court, de sorte que les utilisateurs/utilisatrices puissent facilement l’utiliser sans avoir de connaissances en matière de codage.

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

Voyons comment ajouter facilement des codes courts à vos publications et pages WordPress. Vous pouvez utiliser les liens ci-dessous pour passer à votre méthode préférée.

Ajout d’un code court dans les publications et les pages de WordPress

Tout d’abord, vous devez modifier la publication et la page où vous souhaitez ajouter le code court.

Ensuite, vous devez cliquer sur le bouton d’ajout de bloc « + » pour insérer un bloc de code court.

Après avoir saisi/saisie le bloc Shortcode, vous pouvez simplement saisir votre code court dans les Réglages du bloc.

Le code court sera fourni par divers plugins WordPress que vous pourriez utiliser, tels que WPForms pour les formulaires de contact ou OptinMonster pour le marketing e-mail.

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

Vous pouvez maintenant enregistrer votre publication ou votre page et prévisualiser vos modifications pour voir le code court en action.

Ajout d’un code court dans les widgets de la colonne latérale de WordPress

Vous pouvez également utiliser des codes courts dans les widgets de la colonne latérale de WordPress.

Il suffit de se rendre sur la page Apparence  » Widgets et d’ajouter un bloc de widgets « Shortcode » à une colonne latérale.

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

N’oubliez pas de cliquer sur le bouton « Mettre à jour » pour stocker les réglages de votre widget.

Après cela, vous pouvez visiter votre site WordPress pour voir la Prévisualisation directe du code court dans le widget de la colonne latérale.

Ajout d’un code court dans l’ancien éditeur/éditrices classique de WordPress

Si vous utilisez encore l’ancien éditeur classique de WordPress, voici comment vous pouvez ajouter des codes courts à vos publications et pages WordPress.

Il suffit de modifier la publication et la page où vous souhaitez ajouter le code court. Vous pouvez coller le code court n’importe où à l’intérieur de l’éditeur de contenu où vous voulez qu’il s’affiche. Confirmez simplement que le code court se trouve sur sa propre ligne.

N’oubliez pas d’enregistrer vos modifications. Après cela, vous pouvez prévisualiser votre publication et votre page pour voir le code court en action.

Ajout d’un code court dans les fichiers du thème WordPress

Les codes courts sont destinés à être utilisés dans les publications, les pages et les widgets de WordPress. Cependant, il peut arriver que vous souhaitiez utiliser un code court à l’intérieur d’un fichier de thème WordPress.

WordPress permet de le faire facilement, mais vous devrez modifier les fichiers de votre thème WordPress. Si vous n’avez jamais fait cela auparavant, consultez notre guide sur la façon de copier et coller du code dans WordPress.

Ajouté à n’importe quel modèle de thème WordPress, vous pouvez ajouter un code court en utilisant le code suivant :

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

WordPress va maintenant rechercher le code court et afficher sa sortie dans le modèle de votre thème.

Ajout d’un code court dans les fichiers du thème Block avec l’éditeur du site complet

Si vous utilisez un thème en blocs, vous trouverez plus facile d’ajouter des codes courts dans les fichiers de votre thème WordPress à l’aide de l’éditeur de site complet.

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

Le modèle d’accueil de votre thème s’affiche par défaut. 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 remplit alors l’écran.

Maintenant, vous pouvez cliquer sur l’icône d’insertion de bloc  » +  » et rechercher le bloc de code court. Après cela, il suffit de le faire glisser sur le Modèle et de taper le code court que vous souhaitez utiliser.

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

Créer votre propre code court personnalisé dans WordPress

Les codes courts peuvent être très utiles lorsque vous souhaitez ajouter du contenu dynamique ou du code personnalisé dans les publications et les pages de WordPress. Cependant, si vous souhaitez créer un code court personnalisé, il est nécessaire d’avoir une certaine expérience du 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 un code et renvoie le résultat. Ensuite, nous avons créé un nouveau code court appelé « greeting » et demandé à WordPress d’exécuter la fonction que nous avons créée.

Vous pouvez ajouter ce code au fichier functions.php de votre thème manuellement ou utiliser une extension d’extraits de code comme WPCode.

Pour plus de détails, vous pouvez consulter notre guide pour ajouter du code personnalisé dans WordPress sans rien casser.

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

[accueil]

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

Voyons maintenant une utilisation plus pratique d’un code court.

Dans cet exemple, nous allons afficher une bannière Google AdSense à l’intérieur d’un code court :

// 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'); 

N’oubliez pas de remplacer le code de l’annonce par votre propre code d’annonce.

Vous pouvez désormais utiliser le code court [my_ad_code] dans vos publications, pages et widgets de la colonne latérale de WordPress. WordPress exécutera automatiquement la fonction associée au code court et affichera le code de la publicité.

Shortcodes vs. Blocs Gutenberg

Les utilisateurs/utilisatrices nous demandent souvent quelles sont les différences entre les codes courts vs les blocs Gutenberg.

Fondamentalement, les blocs vous permettent de faire la même chose que les codes courts, mais d’une manière plus simple/simple d’utilisation.

Au lieu de nécessiter l’ajout d’un code court pour afficher du contenu dynamique, les blocs permettent aux utilisateurs/utilisatrices d’ajouter du contenu dynamique à l’intérieur des publications/pages avec une interface utilisateur plus intuitive. Beaucoup d’extensions WordPress populaires ont opté pour l’utilisation de blocs au lieu de codes courts parce qu’ils sont plus faciles à utiliser pour les débutants.

Nous avons dressé une liste des extensions 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 la façon de créer des blocs Gutenberg personnalisés sur WordPress.

Nous espérons que cet article vous a aidé à apprendre comment ajouter un code court dans WordPress. Vous pouvez également consulter notre guide sur la façon de créer un thème WordPress personnalisé sans écrire de code et notre choix d’experts des meilleurs plugins de constructeur de page WordPress par glisser-déposer.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.