Vous avez besoin d’un bouton «Télécharger» au milieu d’un article, mais votre thème affiche seulement un lien bleu souligné. Cela vous semble familier? Dans l’éditeur de blocs, un bouton s’ajoute en un clic, mais dans l’éditeur classique, dans les widgets et dans les thèmes sur mesure, vous devez écrire le HTML avec les classes à la main à chaque fois.

Copier le balisage d’un article à l’autre se termine de manière prévisible: vous oubliez une classe à un endroit, vous perdez rel="noopener" à un autre, et le bouton prend soudainement une teinte différente à un troisième. Plus votre site contient de contenu, plus chaque modification de style devient coûteuse.

La solution prend environ dix minutes. Vous trouverez ci-dessous un shortcode PHP [button] prêt à l’emploi, une palette OKLCH, la prise en charge du thème sombre via light-dark() et l’accessibilité WCAG 2.2. Tout a été testé dans les navigateurs actuels de 2026.

Comment ajouter un bouton via shortcode: plan d’action

💡 Aperçu rapide:

• Étape 1: Ajoutez la fonction PHP du bouton dans le fichier functions.php de votre thème enfant
• Étape 2: Enregistrez le tag [button] avec add_shortcode() sur le hook init
• Étape 3: Incluez le CSS avec tous les états: par défaut, survol, actif, focus
• Étape 4: Définissez les jeux de couleurs avec une seule ligne OKLCH par couleur
• Étape 5: Insérez [button url="..." color="blue"]Text[/button] dans un article et testez la navigation au clavier

Chaque étape ci-dessous inclut du code prêt à copier. Placez le code dans un thème enfant afin que la mise à jour du thème parent n’efface pas vos modifications. Si vous n’avez pas encore de thème enfant, créez-en un d’abord en utilisant le guide officiel WordPress sur les thèmes enfants; cela ne prend que quelques minutes.

Mais avant de copier, regardons ce qui a changé dans le style des boutons eux-mêmes. Ces dernières années, le CSS pour les boutons a été presque entièrement réécrit.

Ce qui a changé dans le CSS des boutons d’ici 2026

En bref: vous ne construisez plus les boutons avec des préfixes propriétaires et trois jeux de nuances de survol choisies à la main. Les propriétés personnalisées, l’imbrication native, le modèle de couleur OKLCH et la fonction light-dark() réduisent un bloc de style typique d’environ la moitié et éliminent les doublons.

Ces techniques s’appliquent à très grande échelle. Selon les données W3Techs de juillet 2026, WordPress propulse 41,5% de tous les sites web et détient 59,2% du marché des CMS. Tout motif issu de cet article peut être repris d’un projet à l’autre pendant des années.

Commençons par le côté serveur: tant que nous n’avons pas de fonction PHP, il n’y a rien à styliser.

Fonction PHP du bouton

La fonction accepte les attributs de l’éditeur et retourne un tag <a> prêt à l’emploi avec des classes, un lien et du texte. Les shortcodes sont apparus dans WordPress 2.5 et restent le moyen le plus rapide d’insérer du balisage arbitraire dans le contenu: add_shortcode() dans la référence officielle enregistre le tag, et une fonction de rappel assemble le HTML.

1
/**
2
 * Generates button HTML via the [button] shortcode.
3
 *
4
 * @param array|string $atts    Shortcode attributes.
5
 * @param string|null  $content Text inside the paired [button]...[/button] tag.
6
 * @return string Button HTML markup.
7
 */
8
function myprefix_button_shortcode( $atts, $content = null ) {
9
    $atts = shortcode_atts(
10
        array(
11
            'url'    => '',
12
            'title'  => '',
13
            'target' => '',
14
            'text'   => '',
15
            'color'  => 'green',
16
        ),
17
        $atts,
18
        'button'
19
    );
20
 
21
    // Button text: text attribute takes priority, then tag content
22
    $label = $atts['text'] ? $atts['text'] : $content;
23
 
24
    // URL provided: build <a>
25
    if ( $atts['url'] ) {
26
        $target_attr = ( 'blank' === $atts['target'] ) ? ' target="_blank" rel="noopener noreferrer"' : '';
27
        $title_attr  = $atts['title'] ? ' title="' . esc_attr( $atts['title'] ) . '"' : '';
28
 
29
        return sprintf(
30
            '<a href="%s" class="myprefix-button color-%s"%s%s>%s</a>',
31
            esc_url( $atts['url'] ),
32
            esc_attr( $atts['color'] ),
33
            $target_attr,
34
            $title_attr,
35
            do_shortcode( $label )
36
        );
37
    }
38
 
39
    // No URL: wrap in <span>
40
    return sprintf(
41
        '<span class="myprefix-button color-%s">%s</span>',
42
        esc_attr( $atts['color'] ),
43
        do_shortcode( $label )
44
    );
45
}

Notez trois détails. shortcode_atts() fusionne les attributs fournis avec les valeurs par défaut, de sorte qu’il n’y a ni extract() ni variables non déclarées dans la portée. Toutes les valeurs dynamiques passent par esc_url() et esc_attr(): WordPress n’échappe pas la sortie des shortcodes pour vous. Et do_shortcode() à l’intérieur du libellé permet d’imbriquer un shortcode dans un autre (par exemple, une icône à l’intérieur du bouton).

Enregistrement du shortcode et utilisation dans l’éditeur

L’enregistrement s’accroche à init: à ce stade, le cœur est entièrement chargé et d’autres extensions peuvent remplacer le tag via remove_shortcode() si nécessaire.

1
add_action( 'init', 'myprefix_register_button_shortcode' );
2
 
3
function myprefix_register_button_shortcode() {
4
    add_shortcode( 'button', 'myprefix_button_shortcode' );
5
}

Ouvrez maintenant un article et insérez le tag. Dans l’éditeur classique, placez-le directement dans le texte; dans l’éditeur de blocs, utilisez le bloc «Shortcode»:

1
[button url="https://example.com/download" target="blank" text="Download free"]
2
 
3
[button url="https://example.com" color="blue"]Learn more[/button]

La première variante est auto-fermante avec le texte dans un attribut. La seconde est par paire: le libellé se trouve entre les balises ouvrante et fermante. Le résultat est identique; choisissez la syntaxe la plus pratique pour vos auteurs.

Sans styles, le bouton ressemble encore à un lien ordinaire. La mécanique fonctionne déjà, cependant: la classe myprefix-button color-green est dans le balisage, et il ne reste plus qu’à la styliser.

Styles de base: propriétés personnalisées et imbrication

Toute l’apparence repose sur une seule variable, --btn-bg. color-mix() calcule les nuances pour le survol et l’état actif à partir de celle-ci, vous n’avez donc plus besoin de choisir des variantes plus sombres à la main. Les règles imbriquées fonctionnent nativement, sans Sass.

1
.myprefix-button {
2
    --btn-bg: oklch(58% 0.15 145);
3
    --btn-fg: #fff;
4
 
5
    display: inline-block;
6
    padding: 12px 24px;
7
    background: var(--btn-bg);
8
    color: var(--btn-fg);
9
    font-weight: 600;
10
    text-decoration: none;
11
    border-radius: 8px;
12
    cursor: pointer;
13
    transition: background 0.2s ease, translate 0.15s ease;
14
 
15
    &:hover {
16
        background: color-mix(in oklch, var(--btn-bg), black 12%);
17
        color: var(--btn-fg);
18
        text-decoration: none;
19
    }
20
 
21
    &:active {
22
        background: color-mix(in oklch, var(--btn-bg), black 20%);
23
        translate: 0 1px;
24
    }
25
 
26
    &:focus-visible {
27
        outline: 3px solid color-mix(in oklch, var(--btn-bg), white 30%);
28
        outline-offset: 2px;
29
    }
30
}

Le décalage translate: 0 1px sur l'état actif simule une pression physique de manière plus subtile que l'ancienne technique d'ombre interne. La propriété transition règle la fluidité, et la couleur du texte est explicitement répétée sur :hover afin que les styles du thème ne la surchargent pas.

Copiez ce bloc dans le fichier style.css de votre thème enfant ou dans la section «CSS additionnel» de l'outil de personnalisation. Passons maintenant à la partie intéressante: les jeux de couleurs.

Palette OKLCH: une nouvelle couleur en une ligne

Chaque jeu de couleurs tient désormais en une seule ligne: seule la variable change, et tous les états sont recalculés automatiquement.

1
.myprefix-button.color-blue   { --btn-bg: oklch(55% 0.17 255); }
2
.myprefix-button.color-red    { --btn-bg: oklch(55% 0.19 25); }
3
.myprefix-button.color-orange { --btn-bg: oklch(68% 0.16 60); }

Pourquoi OKLCH plutôt que le classique HEX? Dans la description de oklch() sur MDN, le premier paramètre correspond à la luminosité perçue: deux couleurs ayant le même premier chiffre paraissent aussi lumineuses l'une que l'autre. Les boutons bleu et rouge ci-dessus sont visuellement équivalents; le format HEX n'offre aucune garantie de ce type. Créer de nouveaux jeux de couleurs devient simple: il suffit de modifier le troisième paramètre (la teinte).

L'utilisation dans l'éditeur reste inchangée: color="red" active le jeu de couleurs rouge, color="orange" le orange. L'attribut par défaut demeure le vert, comme dans la fonction d'origine.

Accessibilité: ce qui pose le plus souvent problème

La réponse directe: un bouton a besoin d'un anneau de focus visible, d'une taille de cible suffisante et du respect des préférences d'animation. Il ne s'agit pas de cases à cocher dans une liste de conformité. Un audit de 17,2 millions de sites dans le Web Almanac 2025 a montré que 67% des sites suppriment l'indicateur de focus et que seulement 30% respectent les normes de contraste WCAG.

Le cadre légal s'est également renforcé: depuis le 28 juin 2025, l'Acte européen sur l'accessibilité s'applique, et les exigences d'accessibilité pour les produits numériques dans l'UE relèvent désormais d'une norme juridique et non plus d'une simple recommandation.

Le critère 2.5.8 Taille de la cible (Minimum) au niveau AA des WCAG 2.2 exige qu'une cible interactive mesure au moins 24 par 24 pixels CSS ou dispose d'un espace libre équivalent autour d'elle.

Notre bouton avec padding: 12px 24px satisfait largement ce minimum, mais deux règles méritent d'être ajoutées séparément:

1
.myprefix-button {
2
    min-block-size: 44px;
3
    align-content: center;
4
}
5
 
6
@media (prefers-reduced-motion: reduce) {
7
    .myprefix-button {
8
        transition: none;
9
    }
10
}

La première règle porte la hauteur à une zone tactile confortable sur mobile, où les appuis manqués sur de petites cibles sont particulièrement frustrants. La seconde désactive les animations pour les personnes qui l'ont demandé dans les paramètres de leur système. Nous avons déjà défini l'anneau de focus via :focus-visible: il apparaît lors de la navigation au clavier et ne gêne pas les utilisateurs de souris.

Thème sombre via light-dark()

Une seule fonction remplace l’intégralité de la media query prefers-color-scheme. Vous spécifiez deux valeurs (claire et sombre), et le navigateur choisit la bonne en fonction du thème actif. Selon MDN, la fonction light-dark() a le statut Baseline Newly available depuis mai 2024, ce qui signifie qu’elle fonctionne dans tous les navigateurs actuels.

1
:root {
2
    color-scheme: light dark;
3
}
4
 
5
.myprefix-button {
6
    --btn-bg: light-dark(oklch(58% 0.15 145), oklch(70% 0.13 145));
7
    --btn-fg: light-dark(#fff, oklch(22% 0.02 145));
8
}

La ligne color-scheme: light dark est obligatoire: sans elle, la fonction ne s’activera pas. Pour le thème sombre, le fond est rendu plus clair et le texte plus foncé: sur un canevas sombre, des boutons saturés et sombres s’enfoncent visuellement, une erreur fréquente. Une analyse détaillée de la thématisation avec tous les pièges est disponible dans l’article de web.dev sur les thèmes de couleur.

Si votre audience utilise d’anciens navigateurs d’entreprise, encapsulez les nouvelles fonctionnalités dans @supports et conservez du HEX simple comme solution de repli: le bouton se dégrade de manière élégante, en perdant seulement la précision des nuances.

Sécurité: trois lignes que l’on oublie

Commençons par l’essentiel: target="_blank" sans rel="noopener noreferrer" ouvre une vulnérabilité de type tabnabbing. La page vers laquelle pointe le bouton obtient l’accès à window.opener et peut remplacer l’onglet contenant votre site. Dans notre fonction, l’attribut est ajouté automatiquement, mais il est facile de le perdre lors de modifications.

L’échappement est tout aussi important. esc_url() bloque les protocoles dangereux comme javascript:, et esc_attr() empêche de sortir d’un attribut. Ces appels ne doivent jamais être supprimés par souci de concision dans un shortcode qui accepte des données provenant de l’éditeur.

Un dernier point: $content n’est volontairement pas passé par wp_kses_post() afin que les shortcodes imbriqués fonctionnent. Si, en revanche, vous autorisez l’insertion de boutons via des formulaires en front-end, enveloppez $label dans wp_kses_post() avant l’affichage.

Comment tester un bouton avant publication

Un test rapide prend quelques minutes et permet de détecter presque tous les problèmes que les utilisateurs signalent par la suite. Parcourez cette liste avant de placer le bouton dans des articles en production:

• Cliquez sur le bouton avec une souris et vérifiez que le lien s’ouvre dans le bon onglet.
• Naviguez dans la page avec la touche Tab: l’anneau de focus doit être évident au premier coup d’œil.
• Activez l’émulation du thème sombre dans les DevTools (panneau Rendering, option prefers-color-scheme) et vérifiez les deux variantes de fond.
• Activez l’émulation de prefers-reduced-motion dans le même panneau et confirmez que le bouton cesse de s’animer.
• Ouvrez la page en mode mobile et essayez d’appuyer sur le bouton avec le pouce.

Si tout est validé, le shortcode est prêt pour une utilisation à grande échelle. Prenez l’habitude de parcourir cette liste après chaque modification de style: les régressions sur les états de focus et le thème sombre sont invisibles tant que vous ne les cherchez pas spécifiquement. Les questions les plus fréquentes sur le comportement du shortcode sont rassemblées ci-dessous.

⁉️🤔 Foire aux questions

Ce shortcode fonctionne-t-il dans l’éditeur de blocs?

Oui, parfaitement. Insérez un bloc «Shortcode» et tapez [button ...] à l’intérieur. Le balisage est assemblé côté serveur lors du rendu de l’article, l’éditeur ne se préoccupe donc pas de la manière dont la balise est arrivée dans le contenu. Pour les éléments fréquemment utilisés, il devient pertinent à terme d’enregistrer un bloc natif via register_block_type(), mais cela constitue un projet distinct.

Que se passe-t-il si le navigateur d’un visiteur ne comprend pas oklch() ou light-dark()?

Enveloppez les valeurs modernes dans une directive @supports et conservez du HEX simple comme valeur par défaut. Un ancien navigateur appliquera la couleur de repli; un récent utilisera OKLCH. Le bouton reste fonctionnel dans les deux cas: la dégradation élégante n’affecte que la précision des nuances et l’automatisation du thème sombre, pas la fonctionnalité.

Pourquoi le shortcode apparaît-il sur la page sous forme de texte entre crochets?

Le plus souvent, la fonction n’est pas enregistrée: vérifiez que functions.php a été sauvegardé sans erreur de syntaxe et que le hook init s’est bien déclenché. Une seconde possibilité: vous avez inséré la balise dans un fichier de template, où un appel explicite echo do_shortcode( '[button ...]' ) est nécessaire. Activez WP_DEBUG et consultez le journal d’erreurs.

Comment ajouter une icône à l’intérieur du bouton?

La voie la plus rapide: un emoji directement dans le texte, par exemple text="📥 Download". Pour du SVG, passez l’URL du fichier comme attribut séparé et générez une balise <img> à l’intérieur du lien via le même sprintf. L’approche Dashicons fonctionne également: un pseudo-élément ::before associé à font-family: dashicons dans une classe dédiée.

Les préfixes vendeur pour border-radius et transition sont-ils encore nécessaires en 2026?

Non. Ces propriétés sont standardisées depuis longtemps et fonctionnent dans tous les navigateurs actuels sans préfixes. Vérifiez la prise en charge d’une fonctionnalité spécifique dans les tableaux MDN ou sur caniuse.com, qui indiquent également le statut Baseline précisant quand une fonctionnalité peut être utilisée sans solution de repli.

💎 Synthèse et conclusions

Pour un site qui n’a besoin que de quelques boutons standards, un shortcode sur mesure surpasse n’importe quelle extension: contrôle total du balisage, zéro script supplémentaire dans la file de chargement, et aucune dépendance à maintenir à jour. Un constructeur visuel avec des dizaines de styles prêts à l’emploi est moins souvent nécessaire qu’il n’y paraît, mais si vous en avez vraiment besoin, regardez du côté de MaxButtons dans le répertoire wordpress.org.

Conseil pratique: commencez l’implémentation par la ligne color-scheme: light dark dans :root et les variables via light-dark(). C’est la manière la plus économique d’obtenir un vrai thème sombre, et cela s’avère payant pour chaque élément d’interface ultérieur. Et un piège pour finir: ne testez pas le bouton uniquement à la souris. Naviguez dans la page avec la touche Tab et vérifiez que l’anneau de focus est visible; sinon, certains visiteurs ne trouveront tout simplement pas votre bouton.

Récupérez le code, collez-le dans votre thème enfant, et testez le bouton sur votre site dès aujourd’hui. Cela a-t-il fonctionné, ou avez-vous rencontré un conflit avec votre thème? Partagez votre expérience dans les commentaires, et nous résoudrons cela ensemble. Et abonnez-vous aux mises à jour du blog: d’autres analyses de shortcodes utiles arrivent.