Les shortcodes : ajouter des fonctionnalités dans vos contenus
Un shortcode est un raccourci entre crochets — comme [galerie] ou [bouton url="/contact" texte="Nous contacter"] — que WordPress remplace automatiquement par du HTML généré par PHP. C’est le moyen le plus simple d’ajouter des éléments interactifs (boutons, alertes, grilles, onglets) dans vos articles et pages sans toucher au HTML à chaque fois.
Créer votre premier shortcode
Ajoutez ce code dans le functions.php de votre thème enfant ou dans un plugin personnalisé :
Shortcode simple : année en cours
// Usage : [annee]
function itsc_shortcode_annee() {
return date('Y');
}
add_shortcode('annee', 'itsc_shortcode_annee');
Écrivez « © [annee] MonSite » dans un article → affiche « © 2025 MonSite ». L’année se met à jour automatiquement chaque 1er janvier.
Shortcode avec attributs : bouton personnalisé
// Usage : [bouton url="/contact" texte="Nous contacter" couleur="bleu"]
function itsc_shortcode_bouton($atts) {
// Valeurs par défaut
$atts = shortcode_atts(array(
'url' => '#',
'texte' => 'Cliquez ici',
'couleur' => 'bleu',
'taille' => 'normal',
'cible' => '_self',
), $atts, 'bouton');
// Couleurs disponibles
$couleurs = array(
'bleu' => '#2563EB',
'vert' => '#059669',
'rouge' => '#DC2626',
'orange' => '#D97706',
'noir' => '#1F2937',
);
$bg = isset($couleurs[$atts['couleur']]) ? $couleurs[$atts['couleur']] : $couleurs['bleu'];
// Tailles
$padding = $atts['taille'] === 'grand' ? '16px 32px' : '12px 24px';
$font = $atts['taille'] === 'grand' ? '1.125rem' : '1rem';
return sprintf(
'<a href="%s" target="%s" rel="noopener" style="display:inline-block; background:%s; color:white; padding:%s; border-radius:8px; text-decoration:none; font-weight:600; font-size:%s; transition:opacity 0.2s;">%s</a>',
esc_url($atts['url']),
esc_attr($atts['cible']),
esc_attr($bg),
esc_attr($padding),
esc_attr($font),
esc_html($atts['texte'])
);
}
add_shortcode('bouton', 'itsc_shortcode_bouton');
Exemples d’utilisation :
[bouton url="/formation" texte="Voir la formation" couleur="vert" taille="grand"]
[bouton url="https://wa.me/221770000000" texte="WhatsApp" couleur="vert" cible="_blank"]
[bouton url="/devis" texte="Demander un devis"]
Shortcode avec contenu encapsulé
Les shortcodes peuvent aussi entourer du contenu :
Boîte d’alerte
// Usage : [alerte type="info"]Votre texte ici[/alerte]
function itsc_shortcode_alerte($atts, $content = null) {
$atts = shortcode_atts(array(
'type' => 'info', // info, succès, attention, erreur
), $atts, 'alerte');
$styles = array(
'info' => array('bg' => '#EFF6FF', 'border' => '#2563EB', 'icon' => 'ℹ️'),
'succes' => array('bg' => '#F0FDF4', 'border' => '#059669', 'icon' => '✅'),
'attention' => array('bg' => '#FFFBEB', 'border' => '#D97706', 'icon' => '⚠️'),
'erreur' => array('bg' => '#FEF2F2', 'border' => '#DC2626', 'icon' => '❌'),
);
$style = isset($styles[$atts['type']]) ? $styles[$atts['type']] : $styles['info'];
return sprintf(
'<div style="background:%s; border-left:4px solid %s; padding:16px 20px; border-radius:0 8px 8px 0; margin:24px 0;">
<span style="margin-right:8px;">%s</span>%s
</div>',
esc_attr($style['bg']),
esc_attr($style['border']),
$style['icon'],
wp_kses_post($content)
);
}
add_shortcode('alerte', 'itsc_shortcode_alerte');
Exemples :
[alerte type="info"]Cet article a été mis à jour en mars 2025.[/alerte]
[alerte type="attention"]Sauvegardez votre base de données avant toute modification.[/alerte]
[alerte type="succes"]Félicitations ! Votre site est maintenant en ligne.[/alerte]
[alerte type="erreur"]Ne modifiez jamais les fichiers du thème parent directement.[/alerte]
Shortcodes pratiques pour un site sénégalais
Prix en FCFA formaté
// Usage : [prix]25000[/prix] → 25 000 FCFA
function itsc_shortcode_prix($atts, $content = null) {
$montant = intval(strip_tags($content));
$formate = number_format($montant, 0, ',', ' ');
return '<span style="font-weight:700; color:#2563EB;">' . $formate . ' FCFA</span>';
}
add_shortcode('prix', 'itsc_shortcode_prix');
Bouton WhatsApp contextuel
// Usage : [whatsapp message="Je veux un devis pour un site web"]Demander un devis[/whatsapp]
function itsc_shortcode_whatsapp($atts, $content = null) {
$atts = shortcode_atts(array(
'numero' => '221770000000',
'message' => 'Bonjour, je vous contacte depuis votre site web.',
), $atts, 'whatsapp');
$url = 'https://wa.me/' . $atts['numero'] . '?text=' . rawurlencode($atts['message']);
$texte = $content ? $content : 'Contacter via WhatsApp';
return sprintf(
'<a href="%s" target="_blank" rel="noopener" style="display:inline-flex; align-items:center; gap:8px; background:#25D366; color:white; padding:12px 24px; border-radius:8px; text-decoration:none; font-weight:600;">💬 %s</a>',
esc_url($url),
esc_html($texte)
);
}
add_shortcode('whatsapp', 'itsc_shortcode_whatsapp');
Accordéon FAQ
// Usage : [faq question="Comment payer ?"]Vous pouvez payer par Wave ou Orange Money.[/faq]
function itsc_shortcode_faq($atts, $content = null) {
$atts = shortcode_atts(array(
'question' => 'Question',
), $atts, 'faq');
return sprintf(
'<details style="border:1px solid #E5E7EB; border-radius:8px; margin:8px 0; overflow:hidden;">
<summary style="padding:16px 20px; font-weight:600; cursor:pointer; list-style:none;">%s</summary>
<div style="padding:0 20px 16px; color:#4B5563; border-top:1px solid #F3F4F6;">%s</div>
</details>',
esc_html($atts['question']),
wp_kses_post($content)
);
}
add_shortcode('faq', 'itsc_shortcode_faq');
Grille de colonnes
// Usage : [colonnes nombre="3"]contenu[/colonnes]
function itsc_shortcode_colonnes($atts, $content = null) {
$atts = shortcode_atts(array(
'nombre' => '2',
'gap' => '24px',
), $atts, 'colonnes');
return sprintf(
'<div style="display:grid; grid-template-columns:repeat(%d, 1fr); gap:%s;">%s</div>',
absint($atts['nombre']),
esc_attr($atts['gap']),
do_shortcode($content) // Permet les shortcodes imbriqués
);
}
add_shortcode('colonnes', 'itsc_shortcode_colonnes');
// Colonne individuelle
// Usage : [colonne]contenu de la colonne[/colonne]
function itsc_shortcode_colonne($atts, $content = null) {
return '<div>' . wp_kses_post(do_shortcode($content)) . '</div>';
}
add_shortcode('colonne', 'itsc_shortcode_colonne');
Utilisation :
[colonnes nombre="3"]
[colonne]
<h3>Rapidité</h3>
<p>Site livré en 2 semaines</p>
[/colonne]
[colonne]
<h3>Qualité</h3>
<p>Code propre et performant</p>
[/colonne]
[colonne]
<h3>Support</h3>
<p>Assistance 7j/7 via WhatsApp</p>
[/colonne]
[/colonnes]
Carte de témoignage
// Usage : [temoignage nom="Fatou Diop" role="CEO, TechDakar" photo="url"]Texte...[/temoignage]
function itsc_shortcode_temoignage($atts, $content = null) {
$atts = shortcode_atts(array(
'nom' => '',
'role' => '',
'photo' => '',
), $atts, 'temoignage');
$photo_html = $atts['photo']
? sprintf('<img src="%s" alt="%s" style="width:48px; height:48px; border-radius:50%%; object-fit:cover;">', esc_url($atts['photo']), esc_attr($atts['nom']))
: '';
return sprintf(
'<div style="background:#F9FAFB; padding:24px; border-radius:12px; margin:24px 0;">
<p style="font-style:italic; color:#374151; margin-bottom:16px; line-height:1.6;">"%s"</p>
<div style="display:flex; align-items:center; gap:12px;">
%s
<div>
<strong style="display:block; color:#111827;">%s</strong>
<span style="font-size:0.875rem; color:#6B7280;">%s</span>
</div>
</div>
</div>',
wp_kses_post($content),
$photo_html,
esc_html($atts['nom']),
esc_html($atts['role'])
);
}
add_shortcode('temoignage', 'itsc_shortcode_temoignage');
Règles importantes pour les shortcodes
Toujours retourner, jamais afficher
// MAUVAIS : echo affiche le contenu au mauvais endroit
function mauvais_shortcode() {
echo '<p>Mon contenu</p>';
}
// BON : return place le contenu au bon endroit
function bon_shortcode() {
return '<p>Mon contenu</p>';
}
Toujours échapper les sorties
// MAUVAIS : injection XSS possible
return '<a href="' . $atts['url'] . '">' . $atts['texte'] . '</a>';
// BON : échappement sécurisé
return '<a href="' . esc_url($atts['url']) . '">' . esc_html($atts['texte']) . '</a>';
Utiliser un préfixe unique
Préfixez tous vos shortcodes pour éviter les conflits avec les plugins :
// MAUVAIS : risque de conflit avec un plugin
add_shortcode('button', 'mon_bouton');
// BON : préfixe unique
add_shortcode('itsc_button', 'itsc_bouton');
Permettre l’imbrication
Si votre shortcode encapsule du contenu qui peut contenir d’autres shortcodes, utilisez do_shortcode() :
function mon_wrapper($atts, $content = null) {
return '<div class="wrapper">' . do_shortcode($content) . '</div>';
}
Shortcodes vs Blocs Gutenberg
Les shortcodes sont antérieurs à Gutenberg. Aujourd’hui, pour les nouveaux développements :
- Shortcodes : Plus simples à créer, fonctionnent partout (éditeur classique, Gutenberg, widgets, templates PHP). Bons pour les éléments simples réutilisables
- Blocs Gutenberg : Meilleure expérience utilisateur (aperçu visuel dans l’éditeur, panneau de réglages), mais plus complexes à développer (nécessitent React/JSX)
Les shortcodes restent parfaitement valides et utiles. WordPress continuera à les supporter. Pour des éléments utilisés fréquemment par des non-développeurs, les blocs Gutenberg offrent une meilleure expérience. Pour des fonctionnalités techniques insérées occasionnellement, les shortcodes sont plus rapides à implémenter.
Organiser vos shortcodes
Quand vous avez plus de 3-4 shortcodes, créez un fichier dédié :
// functions.php
require_once get_stylesheet_directory() . '/inc/shortcodes.php';
// inc/shortcodes.php
// Tous vos shortcodes regroupés ici
function itsc_shortcode_annee() { /* ... */ }
function itsc_shortcode_bouton($atts) { /* ... */ }
function itsc_shortcode_alerte($atts, $content) { /* ... */ }
function itsc_shortcode_prix($atts, $content) { /* ... */ }
function itsc_shortcode_whatsapp($atts, $content) { /* ... */ }
add_shortcode('annee', 'itsc_shortcode_annee');
add_shortcode('bouton', 'itsc_shortcode_bouton');
add_shortcode('alerte', 'itsc_shortcode_alerte');
add_shortcode('prix', 'itsc_shortcode_prix');
add_shortcode('whatsapp', 'itsc_shortcode_whatsapp');
Faire concevoir un site web professionnel
Site vitrine ou e-commerce, livré clé en main avec domaine, hébergement, formation et support inclus.
À partir de 350 000 FCFA
Étape 1 : comprendre ce qu’est un shortcode et pourquoi en créer un
Un shortcode WordPress est un raccourci entre crochets, par exemple [ma_galerie id="3"], qui s’écrit dans l’éditeur Gutenberg ou Classic Editor et qui se transforme en HTML lors de l’affichage. C’est l’outil idéal pour insérer un bloc dynamique réutilisable sans demander à votre client à Dakar ou Abidjan de toucher au PHP.
Cas d’usage typiques pour un site itskillscenter ou une PME ouest-africaine : afficher le tarif de change EUR/FCFA actualisé (1 EUR = 655,957 FCFA), insérer un bouton WhatsApp Business cliquable, lister les derniers articles d’une catégorie, afficher un compteur de jours avant un événement, intégrer un formulaire de contact léger sans plugin lourd.
# Exemples de shortcodes existants à connaître
Galerie native WordPress
Légende d'image
Intégration vidéo YouTube
[contact-form-7 id="42"] Formulaire CF7Le bon résultat se reconnaît à : vous identifiez au moins trois blocs répétitifs sur votre site qui gagneraient à devenir des shortcodes. Si vous n’en trouvez pas, c’est que votre site est encore trop simple, revenez plus tard.
Étape 2 : préparer un plugin maison pour héberger vos shortcodes
Ne mettez jamais votre shortcode dans le functions.php du thème : il disparaîtra au prochain changement de thème ou à la première mise à jour. Créez un plugin minimaliste qui survivra à tout.
Connectez-vous en SSH ou FTP à votre hébergement (Hostinger, o2switch, OVH), placez-vous dans wp-content/plugins/ et créez un dossier itsc-shortcodes. À l’intérieur, créez un fichier itsc-shortcodes.php.
<?php
/**
* Plugin Name: ITSC Shortcodes
* Description: Shortcodes maison pour itskillscenter.io
* Version: 1.0.0
* Author: Votre Nom
* License: GPLv2 or later
*/
if ( ! defined( 'ABSPATH' ) ) { exit; }
// Les shortcodes seront déclarés ici.Activez le plugin depuis « Extensions » dans l’admin WordPress. Le marqueur de succès : le plugin apparaît dans la liste, sans erreur fatale. Si vous voyez un écran blanc, retirez le plugin par FTP et corrigez la syntaxe PHP avant de réactiver.
Étape 3 : créer un premier shortcode simple « bouton WhatsApp »
Pour un site itskillscenter ou une boutique à Plateau Abidjan, le bouton WhatsApp est un must. Créons un shortcode [wa_button] qui affiche un lien cliquable vers WhatsApp Business avec un message pré-rempli.
function itsc_wa_button( $atts ) {
$a = shortcode_atts( array(
'numero' => '221770000000',
'message' => 'Bonjour, je viens du site',
'texte' => 'Discuter sur WhatsApp',
), $atts );
$url = 'https://wa.me/' . urlencode( $a['numero'] )
. '?text=' . urlencode( $a['message'] );
return '<a href="' . esc_url( $url ) . '" class="itsc-wa" target="_blank" rel="noopener">'
. esc_html( $a['texte'] ) . '</a>';
}
add_shortcode( 'wa_button', 'itsc_wa_button' );Insérez dans un article : [wa_button numero="221770000000" message="Devis SaaS" texte="Demander un devis"]. Le bouton apparaît, le clic ouvre WhatsApp avec le message pré-rempli.
Vous saurez que tout fonctionne quand : le shortcode rend un lien cliquable, pas le texte brut entre crochets. Si vous voyez les crochets, c’est que le plugin n’est pas activé ou que le nom diffère, revérifiez.
Étape 4 : ajouter des attributs avec valeurs par défaut robustes
La fonction shortcode_atts() est le cœur de la robustesse. Elle fusionne les attributs passés par l’utilisateur avec les valeurs par défaut, vous évitant des bugs si l’utilisateur oublie un attribut.
Ajoutez systématiquement des valeurs par défaut sécurisées. Pour un shortcode tarif de change FCFA/EUR, par défaut affichez le taux fixe officiel : 1 EUR = 655,957 FCFA, garanti par la convention BCEAO depuis 1999.
function itsc_taux_fcfa( $atts ) {
$a = shortcode_atts( array(
'montant' => 100,
'devise' => 'EUR',
), $atts );
$taux = 655.957; // Parité fixe officielle EUR/XOF
$val = floatval( $a['montant'] );
if ( strtoupper( $a['devise'] ) === 'EUR' ) {
$resultat = number_format( $val * $taux, 0, ',', ' ' ) . ' FCFA';
} else {
$resultat = number_format( $val / $taux, 2, ',', ' ' ) . ' EUR';
}
return '<span class="itsc-taux">' . esc_html( $resultat ) . '</span>';
}
add_shortcode( 'taux_fcfa', 'itsc_taux_fcfa' );Usage : [taux_fcfa montant="50" devise="EUR"] renvoie « 32 798 FCFA ». Validation pratique : aucune erreur PHP même si l’utilisateur écrit [taux_fcfa] sans aucun attribut, grâce aux défauts.
Étape 5 : créer un shortcode avec contenu enveloppé (enclosing)
Certains shortcodes encadrent du contenu, comme [citation]Texte de la citation[/citation]. La fonction reçoit alors un deuxième paramètre, $content, qui contient le texte entre les balises.
function itsc_citation( $atts, $content = null ) {
$a = shortcode_atts( array(
'auteur' => 'Anonyme',
), $atts );
if ( null === $content ) { return ''; }
return '<blockquote class="itsc-quote">'
. wpautop( do_shortcode( $content ) )
. '<cite>— ' . esc_html( $a['auteur'] ) . '</cite>'
. '</blockquote>';
}
add_shortcode( 'citation', 'itsc_citation' );Usage : [citation auteur="Cheikh Anta Diop"]L'Afrique a une histoire.[/citation]. Le do_shortcode() imbriqué permet d’utiliser d’autres shortcodes à l’intérieur, par exemple un lien WhatsApp.
Le test concluant : le rendu produit une balise blockquote propre avec citation et auteur. Si l’auteur n’apparaît pas, vérifiez l’orthographe de l’attribut, sensible à la casse.
Étape 6 : récupérer dynamiquement des données via WP_Query
Un shortcode peut interroger la base de données pour afficher du contenu vivant. Exemple : lister les 5 derniers articles d’une catégorie « tutoriels ».
function itsc_derniers_articles( $atts ) {
$a = shortcode_atts( array(
'cat' => 'tutoriels',
'nombre' => 5,
), $atts );
$q = new WP_Query( array(
'category_name' => sanitize_title( $a['cat'] ),
'posts_per_page' => intval( $a['nombre'] ),
'no_found_rows' => true,
) );
if ( ! $q->have_posts() ) { return '<p>Aucun article.</p>'; }
$out = '<ul class="itsc-liste">';
while ( $q->have_posts() ) {
$q->the_post();
$out .= '<li><a href="' . esc_url( get_permalink() ) . '">'
. esc_html( get_the_title() ) . '</a></li>';
}
$out .= '</ul>';
wp_reset_postdata();
return $out;
}
add_shortcode( 'derniers_articles', 'itsc_derniers_articles' );Usage : [derniers_articles cat="wordpress" nombre="3"]. Le wp_reset_postdata() est obligatoire pour éviter de polluer la boucle principale du thème.
Validation pratique : la liste des articles s’affiche, les liens fonctionnent, et le contenu hors shortcode reste intact. Si la suite de la page se casse, vous avez oublié le reset.
Étape 7 : enregistrer le shortcode dans Gutenberg via un bloc dédié
Gutenberg offre un bloc « Shortcode » natif, mais l’expérience utilisateur reste rudimentaire. Pour un client confortable avec Gutenberg, encapsulez votre shortcode dans un bloc dédié via le hook register_block_type ou via le plugin Lazy Blocks.
Solution rapide sans JavaScript : créez une catégorie « Réutilisables » dans Gutenberg, créez un bloc réutilisable contenant le shortcode pré-rempli. Le client n’a qu’à le glisser-déposer.
# Tutoriel rapide pour le client (à intégrer en aide contextuelle)
1. Dans l'éditeur Gutenberg, cliquer sur "+"
2. Chercher "WA Button" dans les blocs réutilisables
3. Glisser dans la page
4. Modifier le numéro et le message
5. PublierLe marqueur de succès : le client crée un nouveau bouton WhatsApp en moins de 30 secondes sans demander d’aide. Si le client appelle pour comprendre, simplifiez les attributs ou ajoutez une vidéo Loom de 60 secondes.
Étape 8 : sécuriser le shortcode contre les injections
Tout shortcode qui accepte des entrées utilisateur est une porte d’entrée potentielle pour des injections. Trois règles d’or : esc_html() pour le texte affiché, esc_url() pour les liens, esc_attr() pour les attributs HTML, intval() ou sanitize_*() pour les valeurs typées.
# Mauvais (vulnérable XSS)
return '<a href="' . $a['url'] . '">' . $a['texte'] . '</a>';
# Bon (sécurisé)
return '<a href="' . esc_url( $a['url'] ) . '">'
. esc_html( $a['texte'] ) . '</a>';Si le shortcode peut être utilisé par des contributeurs externes, ajoutez une vérification de capacité : if ( ! current_user_can( 'edit_posts' ) ) return '';. Indicateur que tout est en place : un test avec une charge XSS ("><script>alert(1)</script>) ne déclenche aucune popup.
Étape 9 : ajouter du CSS et du JavaScript proprement
Évitez d’inclure du CSS inline dans la sortie du shortcode. Enqueue les assets uniquement quand le shortcode est présent dans la page, pour ne pas alourdir l’ensemble du site.
function itsc_enqueue_assets() {
global $post;
if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'wa_button' ) ) {
wp_enqueue_style(
'itsc-shortcodes',
plugin_dir_url( __FILE__ ) . 'assets/style.css',
array(),
'1.0.0'
);
}
}
add_action( 'wp_enqueue_scripts', 'itsc_enqueue_assets' );Créez le fichier wp-content/plugins/itsc-shortcodes/assets/style.css avec les règles minimales (couleur, padding, hover). Voir aussi notre guide de lancement SaaS à Dakar où la performance front est traitée en profondeur.
Le bon résultat se reconnaît à : un audit Lighthouse sur une page sans le shortcode ne charge ni le CSS ni le JS du plugin.
Étape 10 : déboguer et maintenir vos shortcodes dans la durée
Versionnez votre plugin avec Git, même en local. Tag chaque modification (1.0.0, 1.1.0, etc.) et tenez un CHANGELOG.md. Quand un client signale un bug, vous identifiez la version coupable en 30 secondes.
Activez WP_DEBUG_LOG dans wp-config.php pour capturer les erreurs PHP dans wp-content/debug.log. Surveillez ce fichier après chaque déploiement.
# Bloc à ajouter dans wp-config.php (jamais en production active)
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );
@ini_set( 'display_errors', 0 );Découvrez aussi comment facturer ces développements WordPress en freelance au Sénégal pour valoriser ce travail technique. Vous saurez que tout fonctionne quand : votre plugin tourne 6 mois sans intervention, et chaque évolution se fait via un commit Git tracé.