Fixed header :  création d’un en-tête fixe pour thème WordPress FSE

L’intégration d’un en-tête fixe à l’échelle du site est une solution fréquemment retenue pour la création la refonte d’un site web. Le système de templates de WordPress offre une solution simple pour proposer aux utilisateurs du CMS la possibilité de choisir un modèle de « sticky header » sur tout ou partie des contenus proposés sur le site.

Dans cet article, je vous propose de créer un template-part d’en-tête simple à l’aide des blocs de groupe, de logo, de tagline et de navigation. Nous modifierons ensuite notre balisage afin de forcer son positionnement « fixe » en haut de la page WordPress.

À ce stade, la spécification des sous-modèles template-parts de WordPress ne permet pas de respecter totalement le principe DRY (dont repeat yourself) bien connu des développeurs web. Nous utiliserons donc un template-part d’en-tête préalablement défini afin de l’intégrer dans un groupe enveloppant au sein de chaque template appelant.

C’est ce bloc de groupe qui nous permettra de de positionner notre en-tête au sein de notre page ou article WordPress.

Template part header.html, creation de l’en-tête

Nous commençons donc par créer notre modèle d’en-tête simple. Ce template-part étant voué à bénéficier d’une enveloppe plein largeur, nous pouvons logiquement contraindre son contenu en l’englobant dans un groupe bénéficiant d’un « layout » de type « constrained ».

Ce premier bloc de groupe nous sert de « ligne » horizontale accueillant respectivement :

• un sous-groupe de 2^e niveau pour le logo et le slogan ;
• un bloc de navigation.

< !--wp :group {“layout” : {“type”: “constrained” } -->
<div class=”wp-block-group”>
            <!-- wp:group { "className":"cdw-header-brand","layout": {"type":"flex", "orientation":"vertical"}} -->
            <div class=”wp-block-group cdw-header-brand”>
                        <!-- wp:site-logo {“isLink”: true, “width”: 150, “shouldSyncIcon”: false } -->
                        <!-- wp:site-tagline /-->
            </div>
            <!-- /wp:group -->
            <!—wp:navigation /-->
</div>

<!-- /wp:group -->

N.B. notez l’orientation verticale fournie à notre groupe de classe « cdw-header-brand » qui nous permet de superposer les blocs enfants sans effort.

Rappel, le contenu d’un template-part n’inclut pas sa balise d’enveloppe. Celle-ci est définie au sein du bloc wp:template-part appelant, via la propriété « tagName ». C’est donc dans notre modèle de page, de Custom Post Type ou d’article, que nous devons définir notre en-tête fixe.

Création d’une enveloppe fixe pour le modèle d’en-tête de WordPress

La création d’une en-tête fixe sur votre site WordPress passe donc par l’intégration d’une balise de groupe <div>, positionnée en haut de la page via une stylisation CSS :

De façon assez intuitive, nous modifions donc notre modèle principal afin d’envelopper le template-part du header, et d’assigner à ce groupe enveloppant une valeur « sticky » à l’attribut « position », et « 0px » à l’attribut « top ».

Nous en profitions pour définir un background (un fond) pour l’ en-tête fixe de notre thème WordPress.

Ces 3 intégration sont ici directement réalisée via la l’élément « style » de nos propriétés JSON :

<!-- wp:group { "className":"cdw-sticky", "style": { "position": { "type":"sticky","top":"0px" }, "color": { "background": "#ffffffdd" }, "layout":{"type":"default"} } } -->
<div class="wp-block-group has-background cdw-sticky" style="background-color:#ffffffdd;">
    <!-- wp:template-part {"slug": "header", "tagName": "header", "className": "site-header main-header cdw-header"} /-->
</div>
<!-- /wp:group -->

Ce balisage générera l’intégration d’une class « .is-position-sticky » qui sera ciblée via les styles globaux de WordPress :

.wp-container-2 {
            top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
            position: sticky;
            z-index: 10;
};

On trouve ici les 3 ingrédients d’un en-tête fixe qui seront déclarés au niveau inline de notre document HTML :

1. Un positionnement « sticky » ;
2. Une définition de la valeur « top » d’un positionnement CSS classique ;
3. Une propriété « z-index » permettant à notre en-tête de rester visible en restant « au-dessus » du flux HTML normal.

N.B. la variable CSS « var(–wp-admin-bar—position-offset, 0px) permet de prendre en compte de façon dynamique la présence de la barre d’administration de WordPresslorsque l’utilisateur est connecté à son site.

N.B. la déclaration de la couleur de fond de notre en-tête fixe permet à l’utilisateur WordPress d’adapter ce background en fonction de ses propres besoins graphiques.

Touche finale : définition d’une ombre portée à une en-tête fixe de thème WordPress FSE

Nous allons utiliser la classe CSS « .cdw-sticky » ajoutée à notre groupe d’en-tête fixe pour définir une ombre portée permettant d’améliorer sa lisibilité.

Cette intégration est réalisée dans une sous-section « styles » : { « blocks » : { « core/group » } } de notre fichier theme.json :

"styles": {
        "blocks":{
            "core/group" : {
                "css" : "&.cdw-sticky {box-shadow: 0 10px 25px #00000022 !important;}"
            }
        }
}

Bien que relativement simple, la création d’un en-tête fixe sur les thèmes FSE de WordPress ne permet actuellement ni de respecter le principe de développement DRY, ni de fournir à l’utilisateur WordPress une interface simplifiée lui permettant de modifier et réutiliser intuitivement son header. Nous devrons donc nous efforcer de développer pour lui un bloc spécifique lui fournissant une interface complète de gestion et de stylisation de son bloc FSE. Je vous montre tout ça bientôt ;-).