ITSkillsCenter
WordPress

Tutoriel : Créer des shortcodes WordPress personnalisés

8 min de lecture

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, succes, 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');
#personnalisé #php #shortcodes
Besoin d'un site web ?

Confiez-nous la Création de Votre Site Web

Site vitrine, e-commerce ou application web — nous transformons votre vision en réalité digitale. Accompagnement personnalisé de A à Z.

À partir de 350.000 FCFA
Parlons de Votre Projet
Publicité

Articles Similaires