Une bannière d’annonce au-dessus du header sans toucher au thème

Un client de vente en ligne m’a écrit un vendredi après-midi : « Il nous faut une bannière Black Friday au-dessus du site, à retirer dès lundi matin. » Le site tournait sur un thème bloc maison, sans aucun plugin de bannière installé, et l’idée d’ajouter une dépendance pour trois jours d’affichage ne m’enthousiasmait pas.

La solution la plus propre en éditeur de site consiste à créer une template part dédiée, injectée juste avant le header, et à la conditionner avec une valeur simple qu’on peut basculer sans toucher au code. Voici la méthode que j’ai retenue, reproductible sur n’importe quel thème bloc depuis WordPress 5.9.

Créer la template part de bannière

Dans l’éditeur de site, on ajoute une nouvelle zone de template part nommée announcement-bar, avec l’aire uncategorized puisque WordPress ne propose pas d’aire dédiée aux bandeaux. Le contenu reste minimal : un bloc Groupe en pleine largeur, un fond de couleur défini via theme.json, et un paragraphe centré.

<!-- wp:group {"align":"full","backgroundColor":"contrast","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-contrast-background-color has-background">
  <!-- wp:paragraph {"align":"center"} -->
  <p class="has-text-align-center">Livraison offerte jusqu'à dimanche minuit — code <strong>VENDREDI23</strong></p>
  <!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

Cette template part se sauvegarde comme n’importe quel autre fichier html du dossier parts du thème, sous le nom announcement-bar.html. Elle n’apparaît nulle part tant qu’on ne l’appelle pas depuis un template.

L’insérer au-dessus du header, conditionnellement

Le piège classique consiste à glisser le bloc Template Part directement dans l’éditeur de site, sur chaque template concerné. Cela fonctionne, mais oblige à revenir modifier chaque gabarit pour retirer la bannière plus tard. Je préfère accrocher l’affichage à un hook côté PHP, dans functions.php, avec une condition qu’on peut désactiver en changeant une seule valeur.

add_filter( 'render_block', function( $block_content, $block ) {
    if ( 'core/template-part' !== $block['blockName'] ) {
        return $block_content;
    }
    if ( 'header' !== ( $block['attrs']['slug'] ?? '' ) ) {
        return $block_content;
    }
    if ( ! get_theme_mod( 'show_announcement_bar', false ) ) {
        return $block_content;
    }
    $banner = get_template_part( 'announcement-bar' );
    return $banner . $block_content;
}, 10, 2 );

Cette approche a un défaut : get_template_part() ne renvoie rien par défaut, elle affiche directement. Sur ce projet précis, j’ai préféré une variante plus simple et plus lisible pour l’équipe qui reprendrait le thème plus tard : un bloc conditionnel directement dans le template header.html, entouré d’un commentaire de bloc qui documente comment le désactiver.

La variante « option WordPress » pour l’équipe marketing

Comme l’équipe marketing du client voulait pouvoir couper la bannière elle-même sans écrire de ticket, j’ai exposé un simple réglage via le Customizer, avec add_setting et add_control. La condition PHP devient alors une lecture de get_theme_mod, ce qui évite d’installer ACF pour un seul booléen.

• Un réglage show_announcement_bar exposé dans le Customizer, section « Bandeau d’annonce ».
• Un texte modifiable dans le même panneau, pour changer le message sans toucher à l’éditeur de site.
• Une date de fin optionnelle, comparée à current_time( 'timestamp' ), pour un retrait automatique.

Prévoir la désactivation automatique

Le vrai confort de cette solution, c’est la date de fin. Plutôt que de compter sur quelqu’un pour se souvenir de décocher une case le lundi matin, j’ajoute une comparaison de date directement dans le filtre : passé un certain horodatage, la bannière disparaît d’elle-même, sans intervention.

$end = get_theme_mod( 'announcement_bar_end', '' );
if ( $end && strtotime( $end ) < current_time( 'timestamp' ) ) {
    return $block_content;
}

Sur ce projet, la bannière a disparu automatiquement le lundi à 00h01, sans que personne n’ait eu à s’en soucier. Le client a redemandé exactement la même mécanique deux mois plus tard pour Noël, en changeant simplement le texte et la date.

Une bannière temporaire ne doit jamais dépendre d’une action manuelle pour disparaître. Si elle dépend d’un humain, elle restera en ligne bien après la date prévue — c’est une règle que j’applique systématiquement depuis ce projet.

Variantes utiles

Cette base se décline facilement selon les besoins du client :

• Bannière fermable : ajouter un petit script inline stockant la fermeture dans sessionStorage, pour ne pas la réafficher à chaque page vue pendant la session.
• Plusieurs bannières en rotation : stocker un tableau de messages en option et en tirer un aléatoirement à chaque chargement, utile pour un client multi-boutiques.
• Bannière liée à un article : conditionner l’affichage à la présence d’un article épinglé dans une catégorie « promotions », pour une gestion 100 % éditoriale sans code.

En résumé

Une bannière d’annonce n’a pas besoin d’un plugin dédié dès lors que le thème est déjà en blocs. Une template part isolée, une condition d’affichage lisible et une date de fin automatique suffisent largement pour couvrir la quasi-totalité des demandes de ce type, et l’équipe qui reprendra le projet dans six mois comprendra la mécanique en quelques minutes.