Les shortcodes sont de petits morceaux de code qui vous permettent d’ajouter facilement des fonctionnalités dans vos articles et pages. Avec ce guide, vous apprendrez à créer vos propres shortcodes personnalisés en quelques étapes simples, et vous serez en mesure d’ajouter des éléments interactifs à votre site sans avoir besoin de plugins supplémentaires.
Qu’est-ce qu’un shortcode dans WordPress ?
Un shortcode, c’est un petit code entre crochets qui permet d’exécuter une fonction prédéfinie dans WordPress. Par exemple, un shortcode comme `
` affichera une galerie d’images dans votre article. C’est un moyen simple d’incorporer des éléments complexes sans avoir à écrire du code HTML ou PHP.
Les shortcodes ont été introduits dans WordPress pour la première fois dans la version 2.5, et depuis, ils sont devenus très populaires auprès des développeurs web. Ils vous permettent d’intégrer facilement des éléments comme des vidéos, des formulaires, des galeries d’images, et bien plus encore, tout cela avec une simple ligne de code.
Il existe des shortcodes par défaut fournis par WordPress, tels que `
`, `
`, et d’autres. Mais ce qui est vraiment intéressant, c’est que vous pouvez créer vos propres shortcodes adaptés à vos besoins spécifiques. Cela vous donne une flexibilité énorme pour personnaliser votre contenu.
Pourquoi créer des shortcodes personnalisés ?
En créant vos propres shortcodes, vous pouvez ajouter des fonctionnalités spécifiques à votre site qui ne sont pas couvertes par les shortcodes par défaut.
Supposons que vous souhaitez afficher un message d’abonnement à votre newsletter avec un lien vers votre formulaire d’inscription. Au lieu de copier-coller le même code HTML à chaque fois, vous pourriez créer un shortcode comme `[subscribe]`, qui affiche automatiquement le contenu souhaité chaque fois que vous l’utilisez. Cela rend votre processus de création de contenu beaucoup plus efficace et organisé.
De plus, les shortcodes peuvent vous aider à maintenir la cohérence de votre site. Si vous devez apporter des modifications à un élément, comme changer le lien d’un bouton, il vous suffira de modifier le code dans la fonction du shortcode, plutôt que de devoir mettre à jour chaque instance manuellement.
Comment créer un shortcode dans WordPress étape par étape
Pour créer votre propre shortcode dans WordPress, voici les étapes à suivre :
Étape 1 : créez un fichier pour votre shortcode
La première chose à faire est de décider où vous allez placer le code. Il est généralement recommandé de ne pas mettre votre shortcode directement dans le fichier `functions.php` de votre thème, car cela peut rendre la gestion de votre code plus compliquée. Au lieu de cela, créez un fichier séparé.
Pour cela, connectez-vous à votre serveur via FTP (par exemple avec FileZilla) et naviguez jusqu’au répertoire de votre thème, généralement sous `wp-content/themes/votre-theme/`. Créez un nouveau fichier que vous nommerez `custom-shortcodes.php`.
Dans ce fichier, ouvrez-le avec un éditeur de texte et ajoutez le code suivant pour initialiser le fichier :
« `php
<?php
// Ce fichier contient nos shortcodes personnalisés.
?>
« `
Étape 2 : intégrez le fichier dans votre thème
Maintenant que vous avez créé votre fichier de shortcodes, il faut l’inclure dans le fichier `functions.php` de votre thème. Ouvrez `functions.php` et ajoutez la ligne suivante à la fin du fichier :
« `php
include(‘custom-shortcodes.php’);
« `
Cela permettra à WordPress de charger votre fichier de shortcodes lorsque le thème est activé.
Étape 3 : créez la fonction de votre shortcode
Passons maintenant à la création de la fonction pour votre shortcode. Voici un exemple de fonction simple qui affiche un lien vers votre page de contact :
« `php
function contact_link() {
return ‘<a href= »https://mon-site.com/contact »>Contactez-moi !</a>’;
}
« `
Ajoutez cette fonction dans votre fichier `custom-shortcodes.php`. Ensuite, vous devez enregistrer ce shortcode en utilisant la fonction `add_shortcode()` :
« `php
add_shortcode(‘contact’, ‘contact_link’);
« `
Avec cela, chaque fois que vous insérerez `[contact]` dans votre contenu, il affichera le lien « Contactez-moi ! ».
Étape 4 : testez votre shortcode
Maintenant que vous avez créé votre shortcode, il est temps de le tester. Allez dans l’éditeur d’articles ou de pages WordPress et insérez `[contact]` dans le contenu. Enregistrez et prévisualisez votre article pour voir si le lien apparaît comme prévu.
Étape 5 : ajoutez des paramètres à votre shortcode
Vous pouvez également enrichir votre shortcode en ajoutant des paramètres. Par exemple, si vous souhaitez permettre aux utilisateurs de personnaliser le texte du lien, vous pouvez modifier votre fonction comme suit :
« `php
function contact_link($atts) {
$atts = shortcode_atts(array(
‘text’ => ‘Contactez-moi !’,
), $atts);
return ‘<a href= »https://mon-site.com/contact »>’ . esc_html($atts[‘text’]) . ‘</a>’;
}
add_shortcode(‘contact’, ‘contact_link’);
« `
Dans cet exemple, vous pouvez maintenant utiliser `[contact text= »Écrivez-moi ! »]` pour changer le texte du lien. Cela offre plus de flexibilité à vos utilisateurs.
Étape 6 : créez un shortcode englobant (closing shortcode)
créez-un-shortcode-englobant
Les shortcodes englobants vous permettent d’ajouter du contenu entre les balises du shortcode. Par exemple, si vous voulez créer un shortcode qui enveloppe un texte dans une div, voici comment procéder :
« `php
function my_div_shortcode($atts, $content = null) {
return ‘<div class= »my-div »>’ . do_shortcode($content) . ‘</div>’;
}
add_shortcode(‘mydiv’, ‘my_div_shortcode’);
« `
Avec ce shortcode, vous pourrez utiliser `[mydiv]Votre contenu ici[/mydiv]` pour envelopper du contenu dans une div avec une classe CSS spécifique.
Voilà ! Vous avez maintenant tous les outils nécessaires pour créer vos propres shortcodes dans WordPress. Commencez par des shortcodes simples et, au fur et à mesure que vous vous familiarisez avec la syntaxe et le fonctionnement, n’hésitez pas à ajouter des fonctionnalités plus complexes. WordPress est un outil puissant, et avec vos nouveaux shortcodes, vous serez en mesure de tirer le meilleur parti de votre site internet.