Thématique : Extensions | Niveau : Intermédiaire
Objectif de cette astuce
Comprendre où placer du code PHP personnalisé selon le contexte, créer une micro-extension WordPress fonctionnelle avec un shortcode paramétrable, et connaître l’alternative Code Snippets pour les utilisateurs moins à l’aise avec les fichiers serveur.
Pourquoi créer sa propre extension ?
Pour des besoins simples et récurrents — afficher un encart d’information, un bouton personnalisé, une date automatique — il n’est pas nécessaire d’installer une extension tierce. Créer une micro-extension maison ou utiliser Code Snippets permet de répondre à ces besoins de façon plus légère, plus maîtrisée et sans dépendance externe.
C’est aussi l’occasion de comprendre comment WordPress fonctionne en coulisses : les hooks, les shortcodes, et la structure d’un plugin.
Étape 1 — Choisir où placer le code
Avant d’écrire une seule ligne, il faut décider où ce code va vivre. Ce choix détermine ce qui arrive au code en cas de changement de thème.
Trois options existent.
Le fichier functions.php du thème enfant est adapté aux personnalisations directement liées à l’apparence — modifier la taille des extraits, ajouter le support des miniatures, enregistrer des zones de widgets. Si le thème change, ce code disparaît avec lui. C’est pourquoi on parle toujours du thème enfant et jamais du thème parent — les mises à jour du thème parent écraseraient tout code ajouté dans son functions.php.
La micro-extension maison est un fichier PHP placé dans /wp-content/plugins/. Elle s’active et se désactive indépendamment du thème, survit à tout changement de thème, et isole proprement le code dans un endroit prévu à cet effet. C’est la bonne solution pour tout ce qui doit fonctionner indépendamment du thème — shortcodes, fonctions métier, personnalisations globales.
Code Snippets est une extension gratuite (900 000+ installations) qui propose une interface graphique pour ajouter des bouts de code PHP, CSS ou JavaScript directement depuis le tableau de bord, sans passer par FTP ni un éditeur de fichiers. Chaque snippet peut être activé et désactivé individuellement, et le code survit à un changement de thème. C’est la solution idéale pour les utilisateurs peu à l’aise avec les fichiers serveur.
La règle de décision est simple : si le code est lié à l’apparence du thème actif, il va dans functions.php du thème enfant. Si le code doit survivre à un changement de thème, il va dans une micro-extension ou dans Code Snippets.
Étape 2 — Créer la structure de la micro-extension
Une micro-extension WordPress se résume à un dossier contenant un seul fichier PHP, placé dans /wp-content/plugins/.
Créer le dossier mon-plugin-info dans /wp-content/plugins/, puis créer à l’intérieur le fichier mon-plugin-info.php. Par convention, le dossier et le fichier principal portent le même nom.
Le fichier contient quatre éléments essentiels.
L’en-tête de déclaration est un bloc de commentaires PHP que WordPress lit pour identifier l’extension et l’afficher dans Extensions → Extensions installées. Seule la ligne Plugin Name est obligatoire. Les autres champs (Description, Version, Author) sont recommandés pour la maintenabilité.
La protection d’accès direct — if ( ! defined( 'ABSPATH' ) ) exit; — empêche d’accéder directement au fichier PHP via une URL. Cette ligne doit figurer dans tout fichier de plugin sans exception.
Le hook add_action branche une fonction au cycle de chargement de WordPress. WordPress fonctionne par points d’accroche auxquels on connecte ses propres fonctions. add_action( 'init', 'ma_fonction' ) exécute ma_fonction() au démarrage de WordPress, avant l’affichage de la page.
Le préfixe unique sur toutes les fonctions évite les conflits de noms. Si deux extensions définissent une fonction avec le même nom, WordPress génère une erreur fatale. Préfixer avec les initiales du plugin — ici mpi_ pour Mon Plugin Info — rend les conflits quasi impossibles.
Une fois le fichier créé et uploadé via FTP ou le gestionnaire de fichiers de l’hébergeur, l’extension apparaît dans Extensions → Extensions installées et peut être activée.
Étape 3 — Le shortcode [info]
L’extension crée un shortcode [info] qui affiche une bannière d’information personnalisable, utilisable dans n’importe quelle page ou article de l’éditeur Gutenberg.
Le shortcode accepte deux attributs : texte pour le message à afficher, et couleur pour choisir parmi quatre variantes visuelles — bleu, vert, orange ou rouge. Si aucun attribut n’est précisé, des valeurs par défaut s’appliquent automatiquement.
La fonction shortcode_atts() est la façon correcte de gérer les attributs d’un shortcode. Elle fusionne les attributs passés par l’utilisateur avec un tableau de valeurs par défaut. Si l’utilisateur écrit [info couleur="vert"] sans préciser de texte, le texte par défaut est utilisé automatiquement.
Le tableau de couleurs associe chaque valeur autorisée de l’attribut couleur à ses styles CSS correspondants. Si une valeur inconnue est passée — couleur="violet" par exemple — l’opérateur ternaire retombe sur la couleur bleu par défaut plutôt que de provoquer une erreur.
esc_html() et esc_attr() sont les fonctions d’échappement de WordPress. esc_html() neutralise les caractères spéciaux HTML dans le texte affiché — cela empêche l’injection de code malveillant si un utilisateur tente d’insérer du HTML ou du JavaScript dans l’attribut texte. esc_attr() fait de même pour les valeurs placées dans des attributs HTML. Ces fonctions doivent être appliquées systématiquement sur toute valeur issue de l’utilisateur avant de l’afficher.
return et jamais echo — c’est une règle fondamentale des shortcodes WordPress. Un shortcode doit retourner son HTML, ne pas l’afficher directement. Utiliser echo à la place de return provoque un affichage en dehors du contexte prévu par WordPress et casse la mise en page.
Une fois l’extension activée, le shortcode s’utilise dans l’éditeur via le bloc Shortcode ou directement en tapant /shortcode :
[info texte="Notre bureau est fermé du 24 au 26 décembre." couleur="bleu"]
[info texte="Livraison offerte dès 50 euros d'achat." couleur="vert"]
[info texte="Cet article est en rupture de stock." couleur="orange"]
[info texte="Ce produit a été retiré de la vente." couleur="rouge"]Étape 4 — Alternative : Code Snippets
Pour les utilisateurs qui préfèrent ne pas manipuler de fichiers via FTP, Code Snippets offre exactement le même résultat depuis le tableau de bord.
Après installation et activation de l’extension Code Snippets (Extensions → Ajouter → rechercher “Code Snippets”), un nouveau menu Snippets apparaît dans la barre latérale. Cliquer sur Ajouter nouveau, choisir le type PHP, donner un nom descriptif au snippet, coller le code de la fonction et du add_action, puis activer.
L’avantage principal est de pouvoir désactiver un snippet individuellement sans supprimer le code — utile pour tester ou désactiver temporairement une fonctionnalité.
La limite est la dépendance à une extension tierce : si Code Snippets est désactivé ou supprimé, tous les snippets cessent de fonctionner. Pour du code critique, une vraie micro-extension reste plus robuste.
Étape 5 — Résultat dans l’éditeur
Dans l’éditeur Gutenberg, le shortcode s’insère via le bloc Shortcode. Il apparaît sous forme de texte dans l’éditeur et se transforme en bannière colorée sur le front-end du site, dans le rendu public de la page.
Code complet de l’extension
Pour référence, voici le fichier complet mon-plugin-info.php à placer dans /wp-content/plugins/mon-plugin-info/ :
php
<?php
/**
* Plugin Name: Mon Plugin Info
* Description: Shortcode [info] pour afficher une banniere d'information personnalisable
* Version: 1.0.0
* Author: Votre Nom
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
add_action( 'init', 'mpi_enregistrer_shortcode' );
function mpi_enregistrer_shortcode() {
add_shortcode( 'info', 'mpi_shortcode_info' );
}
function mpi_shortcode_info( $atts ) {
$atts = shortcode_atts(
array(
'texte' => 'Information importante.',
'couleur' => 'bleu',
),
$atts,
'info'
);
$couleurs = array(
'bleu' => 'background:#e3f2fd;color:#0d47a1;border-color:#2271b1;',
'vert' => 'background:#e8f5e9;color:#1b5e20;border-color:#2e7d32;',
'orange' => 'background:#fff3e0;color:#e65100;border-color:#f59e0b;',
'rouge' => 'background:#fef2f2;color:#c62828;border-color:#d63638;',
);
$style = isset( $couleurs[ $atts['couleur'] ] )
? $couleurs[ $atts['couleur'] ]
: $couleurs['bleu'];
$html = '<div style="'
. esc_attr( $style )
. 'padding:12px 16px;border-left:4px solid;border-radius:4px;margin:16px 0;">'
. esc_html( $atts['texte'] )
. '</div>';
return $html;
}Ce qu’il faut retenir
Créer une micro-extension pour des besoins simples est plus propre qu’accumuler des extensions tierces pour chaque petite personnalisation. La structure d’un plugin WordPress se résume à un fichier PHP avec un en-tête de déclaration, une protection d’accès direct, et des fonctions préfixées branchées sur des hooks. Les règles à ne jamais oublier : préfixer toutes les fonctions, échapper toutes les sorties avec esc_html() et esc_attr(), et toujours return dans un shortcode. Pour les utilisateurs peu à l’aise avec FTP, Code Snippets offre le même résultat depuis l’interface WordPress.