7 conseils essentiels pour utiliser les shortcodes dans WordPress

Que vous soyez un utilisateur WordPress expérimenté ou un débutant complet, l'utilisation de shortcodes peut débloquer de nouvelles façons de personnaliser votre site sans aucune connaissance en codage.

Les shortcodes vous permettent d'ajouter diverses fonctions aux articles, pages et widgets sans écrire de code. De nombreux plugins et thèmes WordPress utilisent également des shortcodes pour ajouter différents éléments, tels que des grilles de prix et des calendriers d'événements.

Chez WPBeginner, nous avons constamment utilisé des shortcodes et des plugins de shortcodes lors de la création de sites WordPress pour nos clients ou de leur test pour nos lecteurs. Au fil du temps, nous avons appris quelques moyens de rendre l'utilisation des shortcodes plus facile et plus efficace.

Dans cet article, nous partagerons quelques conseils essentiels pour utiliser les shortcodes dans WordPress.

Que sont les shortcodes dans WordPress ?

Dans WordPress, les shortcodes sont de petits morceaux de code entourés de crochets qui vous permettent d'ajouter du contenu dynamique ou des fonctionnalités à vos articles, pages ou widgets.

Voici un exemple :

[example_shortcode]

Lorsque vous ajoutez du contenu à un site Web WordPress, il passe automatiquement par des contrôles de sécurité et des filtres pour s'assurer qu'aucun code nuisible ne pénètre dans les articles, les pages ou les commentaires. Cela signifie que vous ne pouvez pas écrire directement de code dans ces zones.

Cependant, il y a des moments où vous pourriez avoir besoin d'ajouter du code spécifique à ces sections. Les shortcodes offrent un moyen de le faire.

Ils agissent comme des raccourcis pour ajouter des fonctionnalités avancées, telles que des curseurs réactifs magnifiques, des formulaires de contact, des galeries d'images ou des vidéos intégrées, de manière simple et conviviale.

Par exemple, au lieu d'intégrer manuellement un extrait HTML ou JavaScript complexe, vous pouvez utiliser un shortcode pour obtenir le même résultat avec une seule ligne de texte. Cela rend les shortcodes incroyablement utiles pour les débutants comme pour les experts.

Cependant, même si les shortcodes sont faciles à utiliser, connaître les meilleures façons de les ajouter et de les gérer peut vous faire gagner du temps, améliorer votre flux de travail et prévenir les problèmes.

Cela dit, examinons quelques conseils pour utiliser les shortcodes dans WordPress. Vous pouvez cliquer sur les liens ci-dessous pour accéder à n'importe quel conseil :

• Savoir quand ne pas utiliser de shortcodes
• Protégez vos shortcodes pour l'avenir
• Comment rechercher des shortcodes dans votre thème WordPress
• Utiliser des shortcodes dans les widgets
• Conseil 5 : Ajouter un shortcode dans les fichiers du thème
• Conseil 6 : Masquer un shortcode défectueux
• Conseil 7 : Trouver les shortcodes utilisés dans les articles
• Bonus : Erreurs courantes de shortcodes à éviter

Conseil 1 : Savoir quand ne pas utiliser de shortcodes

Les shortcodes peuvent être incroyablement utiles, mais s'en remettre à eux pour chaque article ou page n'est pas toujours la meilleure idée. De nombreux thèmes WordPress prétendent avoir plus de 200 shortcodes, mais en utiliser trop peut créer des problèmes à long terme.

Par exemple, si vous utilisez un shortcode de thème pour créer des boutons d'appel à l'action (CTA) dans vos articles, vous vous liez à ce thème. Si vous changez de thème, ces shortcodes peuvent cesser de fonctionner, laissant un contenu cassé ou illisible.

Si vous cherchez un moyen d'ajouter des boutons CTA à vos articles, vous devriez lire notre guide sur l'ajout de boutons CSS dans WordPress sans utiliser de shortcodes.

Vous pouvez également utiliser le bloc Bouton intégré de WordPress pour créer des boutons d'appel à l'action sans aucun code.

De même, si vous utilisez des shortcodes pour des éléments répétitifs comme des bannières publicitaires ou du texte de signature à la fin de vos articles, nous vous recommandons d'envisager une approche différente. Vous pourriez utiliser un plugin WordPress ou travailler avec un développeur pour ajouter ces éléments à votre blog.

Cette méthode garantit un style cohérent et facilite la mise à jour ou la suppression d'éléments à l'avenir.

Enfin, rappelez-vous que les shortcodes dispersés dans les articles peuvent être difficiles à supprimer si vous décidez de ne plus les utiliser. Modifier chaque article manuellement prend du temps.

C'est pourquoi il est important d'être prudent quant à la manière et à l'endroit où vous utilisez les shortcodes. Limitez-vous à les ajouter uniquement là où ils sont nécessaires, car une utilisation excessive peut créer des problèmes plus importants par la suite.

Astuce 2 : Préparez vos shortcodes pour l'avenir

Les shortcodes sont excellents, mais si votre thème en propose, vous voudrez peut-être y réfléchir à deux fois avant de les utiliser excessivement.

En effet, si vous changez de thème, il y a de fortes chances que votre nouveau thème ne prenne pas en charge le même shortcode, vous laissant avec du contenu cassé.

Pour éviter ce problème, vous pouvez passer à un plugin spécifique au site. De cette façon, vos shortcodes resteront indépendants et continueront de fonctionner quel que soit le thème que vous utilisez.

Pour ce faire, vous pouvez simplement localiser l'extrait de shortcode dans le fichier functions.php de votre thème et le copier. Ensuite, collez-le dans un plugin spécifique au site pour vous assurer qu'il reste fonctionnel.

Cependant, modifier directement le fichier functions.php n'est pas idéal, car une petite erreur peut faire planter tout votre site.

C'est là qu'intervient WPCode. À notre avis, il offre le moyen le plus simple d'ajouter un extrait de shortcode à votre thème.

Il vous permet d'ajouter du code personnalisé en quelques clics et met même en évidence les erreurs dans vos extraits de code.

Nous avons testé en profondeur le plugin sur notre site Web et l'avons trouvé très convivial pour les débutants. Pour en savoir plus, consultez notre avis sur WPCode.

De plus, il ne fera pas planter votre site Web si vous ajoutez accidentellement du code incorrect, ce qui en fait une option fiable pour quiconque.

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

Astuce 3 : Comment rechercher des shortcodes dans votre thème WordPress

Pour vous assurer que vos shortcodes restent fonctionnels, il est important de savoir à quoi ils ressemblent et comment les trouver dans votre thème.

Tout d'abord, vous devez ouvrir le dossier de votre thème, qui se trouve généralement dans /wp-content/themes/nom-de-votre-theme/.

Vous voudrez le chercher à l'intérieur du fichier functions.php, ou si le thème a un dossier 'includes', alors à l'intérieur de celui-ci.

Une fois que vous avez localisé le fichier, ouvrez-le et recherchez le terme 'add_shortcode'. Cela vous aidera à localiser tous les shortcodes actuellement utilisés par votre thème WordPress.

Voici un exemple de ce à quoi ressemble un extrait de shortcode :

function my_shortcode_function() { 
$i = '<p>Hello World!</p>';
return $i;
} 
add_shortcode('my-shortcode', 'my_shortcode_function');

Ce code crée un shortcode 'my-shortcode', qui renvoie un simple message de salutation textuel et peut être intégré dans un article ou une page WordPress comme ceci :

[my-shortcode]

Pour plus de détails, vous pouvez consulter notre guide sur comment ajouter un shortcode dans WordPress.

Astuce 4 : Utiliser des shortcodes dans les widgets

De nombreux utilisateurs pensent que les shortcodes sont uniquement destinés aux articles et aux pages, mais ce n'est pas le cas.

Vous pouvez également les utiliser à l'intérieur des widgets WordPress, ce qui vous donne encore plus de flexibilité pour ajouter du contenu dynamique aux barres latérales, aux pieds de page et à d'autres zones prêtes pour les widgets.

Pour ce faire, visitez la page Apparence » Widgets depuis le tableau de bord WordPress et cliquez sur le bouton ‘Ajouter un bloc’ (+). Cela ouvrira le menu des blocs, à partir duquel vous devrez ajouter le bloc ‘Shortcode’ .

Pour ce faire, vous devrez accéder à l’éditeur approprié pour votre thème. Si vous utilisez un thème classique, allez dans Apparence » Widgets depuis le tableau de bord WordPress. Si vous utilisez un thème basé sur des blocs, vous irez plutôt dans Apparence » Éditeur.

Une fois dans l’éditeur approprié, cliquez simplement sur le bouton ‘Ajouter un bloc’ (+) pour ouvrir le menu des blocs. De là, recherchez et ajoutez le bloc ‘Shortcode’ à votre barre latérale ou à une autre zone de widget.

Gardez à l’esprit que la méthode ci-dessus ne fonctionnera que si vous utilisez un thème classique comme Hestia.

Cependant, si vous utilisez un thème de blocs, vous pouvez alors ajouter un shortcode à n'importe quelle zone de widget en utilisant l'éditeur de site complet.

Pour plus de détails, consultez notre tutoriel sur comment utiliser les shortcodes dans les widgets de la barre latérale de WordPress.

Conseil 5 : Ajouter un shortcode dans les fichiers du thème

Vous devez ajouter un shortcode en dehors des articles, des pages ou des widgets ?

Si vous souhaitez ajouter un shortcode à un fichier de thème personnalisé ou à une section spécifique de votre thème, vous pouvez facilement le faire en ajoutant le shortcode directement au code de votre thème.

Par exemple, disons que vous avez créé un modèle de page personnalisé et que vous souhaitez inclure un curseur réactif à l'aide d'un shortcode.

Au lieu d'insérer manuellement le shortcode dans la zone de contenu, vous pouvez l'afficher directement dans le thème. Ajoutez simplement votre shortcode comme ceci :

<?php echo do_shortcode("[example_shortcode]"); ?>

Cette technique est utile lorsque vous souhaitez intégrer des shortcodes dans des zones telles que des pages personnalisées, des en-têtes, des pieds de page ou d'autres parties de votre thème qui ne sont pas liées à l'éditeur de contenu typique.

Si vous avez besoin d'aide, consultez notre guide sur la copie d'extraits du Web dans WordPress.

Conseil 6 : Masquer un shortcode défectueux

Souvent, les utilisateurs changent de thème sans se rendre compte que leurs anciens shortcodes ne fonctionneront plus. Parfois, ils le découvrent des mois plus tard lorsqu'un utilisateur visite leur ancien article et y trouve du texte étrange.

Eh bien, vous avez deux solutions pour y remédier. Vous pouvez soit supprimer manuellement le shortcode défectueux de chaque article, soit le masquer. Nous recommandons de le masquer car c'est une solution plus rapide.

Pour ce faire, vous devrez installer et activer le plugin WPCode. Après activation, visitez la page Extraits de code » + Ajouter un extrait et choisissez l'option « Ajouter un nouveau code personnalisé (Nouvel extrait) ».

Cela vous mènera à la page « Créer un extrait personnalisé », où vous devrez choisir l'option « Extrait PHP » dans le menu déroulant.

Ensuite, ajoutez le code suivant dans la boîte « Aperçu du code » et basculez le commutateur « Inactif » sur « Actif ».

add_shortcode( 'shortcodetag', '__return_false' );

N'oubliez pas de remplacer shortcodetag par le nom de votre shortcode. Enfin, cliquez sur le bouton « Enregistrer l'extrait » pour sauvegarder vos paramètres.

Ce code réinsérera maintenant le shortcode orphelin sans aucune sortie.

Conseil 7 : Trouver les shortcodes utilisés dans les articles

Si vous ne souhaitez pas utiliser l'astuce de l'astuce 6 et préférez supprimer manuellement tous les shortcodes, la première étape consiste à trouver tous les articles utilisant le shortcode.

Pour ce faire, ajoutez le code suivant dans le fichier functions.php de votre thème ou dans WPCode :

function wpb_find_shortcode($atts, $content=null) {
ob_start();
extract( shortcode_atts( array(
		'find' => '',
	), $atts ) );

$string = $atts['find'];

$args = array(
	's' => $string,
	);

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) {
        echo '<ul>';
	while ( $the_query->have_posts() ) {
	$the_query->the_post(); ?>
	<li><a href="<?php  the_permalink() ?>"><?php the_title(); ?></a></li>
	<?php
	}
        echo '</ul>';
} else {
        echo "Sorry no posts found";
}

wp_reset_postdata();
return ob_get_clean();
}
add_shortcode('shortcodefinder', 'wpb_find_shortcode');

Ce code crée simplement un shortcode appelé shortcodefinder. Il exécute une requête WordPress et liste les articles avec une balise de shortcode donnée.

Par exemple, si vous vouliez trouver tous les articles contenant le shortcode [contact-form], vous entreriez simplement [shortcodefinder find=’contact-form’] dans une page WordPress et l'enregistreriez. Maintenant, si vous prévisualisez la page, vous pourrez voir tous les articles contenant le shortcode.

Pour des instructions plus détaillées, consultez notre guide sur la façon de trouver et masquer les shortcodes inutilisés dans WordPress.

Bonus : Erreurs courantes de shortcodes à éviter

Bien que les shortcodes soient utiles et nécessaires pour de nombreux sites, les utilisateurs commettent souvent des erreurs courantes lorsqu'ils travaillent avec eux.

Ces erreurs peuvent entraîner des fonctionnalités défectueuses, un code désordonné ou de mauvaises performances du site. Voici cinq erreurs clés à surveiller et comment les éviter :

• Surcharger les pages avec trop de shortcodes : L'utilisation de trop de shortcodes sur une seule page peut entraîner des temps de chargement lents et un design encombré. C'est pourquoi nous recommandons de limiter l'utilisation des shortcodes aux éléments essentiels.
• Emboîtage incorrect des shortcodes : L'emboîtage de shortcodes (utiliser un shortcode à l'intérieur d'un autre) peut être délicat et causer des problèmes tels qu'un shortcode qui ne fonctionne pas ou une page affichant un contenu incorrect. Si vous devez emboîter des shortcodes, testez-les d'abord pour vous assurer qu'ils s'affichent comme prévu.
• Oubli de fermer correctement les shortcodes : Parfois, les utilisateurs oublient de fermer les shortcodes, ce qui peut casser la mise en page d'un article ou d'une page. C'est pourquoi vous devez toujours vous assurer que votre shortcode est correctement ouvert et fermé avec des crochets. Pour les shortcodes à usage unique, assurez-vous de ne laisser aucun espace ou symbole supplémentaire.
• Utilisation de shortcodes dans des zones non prises en charge : Certaines zones de WordPress peuvent ne pas prendre en charge les shortcodes par défaut. Essayer d'utiliser un shortcode là-bas peut entraîner un contenu cassé ou invisible. Avant d'insérer des shortcodes dans des widgets ou des champs personnalisés, vérifiez si la zone les prend en charge. Vous pouvez souvent utiliser un plugin pour activer les shortcodes dans les zones non prises en charge.
• Ne pas tester les shortcodes sur les appareils mobiles : De nombreux utilisateurs oublient de vérifier l'apparence des éléments créés avec des shortcodes sur les appareils mobiles. Ce qui est superbe sur un ordinateur de bureau peut casser ou mal apparaître sur les écrans mobiles. Prévisualisez toujours vos pages et articles sur différents appareils pour vous assurer que la sortie du shortcode est réactive.

En évitant ces erreurs courantes et en suivant ces conseils, vous pouvez avoir une expérience plus fluide lors de l'utilisation de shortcodes sur votre site WordPress.

Nous espérons que ces conseils vous ont aidé à apprendre à utiliser les shortcodes et à en tirer le meilleur parti dans WordPress. Vous voudrez peut-être aussi consulter notre guide pour débutants sur comment copier et coller dans WordPress sans problèmes de mise en forme et nos conseils d'experts pour maîtriser l'éditeur de contenu WordPress.

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.