Modifier l’en-tête de votre site WordPress sans plugins

On dit qu’il est important de faire une bonne première impression. Lorsque les visiteurs arrivent sur votre site Internet, la première impression commence en haut – à l’en-tête de la page.

Les développeurs de thèmes WordPress ne sont pas tenus d’inclure un modèle d’en-tête, mais il est rare qu’un site n’en ait pas. Depuis l’aube du web, le terme « en-tête » désigne un bloc de code HTML contenant les éléments essentiels que les visiteurs s’attendent à trouver en haut des pages. Cela comprend souvent :

• L’image de marque : Il peut s’agir du nom du site et, fréquemment, d’un logo. L’utilisation de couleurs, d’images ou de vidéos dans l’en-tête peut renforcer cette image de marque.
• La navigation principale : Si votre site web comporte plus d’une page, les visiteurs chercheront probablement un menu de navigation vers le haut de chaque page.
• Navigation secondaire : La navigation secondaire pourrait être n’importe quel lien indépendant de l’emplacement actuel d’un utilisateur dans la hiérarchie du menu primaire. Pensez à un bouton de « connexion » et à des icônes reliant aux comptes de réseaux sociaux ou à un panier d’achat.
• Recherche : Si votre site web prend en charge la recherche, la boîte de saisie de la recherche n’a pas besoin d’être dans l’en-tête, mais les visiteurs ne la chercheront certainement pas dans le pied de page.

Le CMS WordPress peut générer dynamiquement des composants comme les en-têtes en combinant le balisage des modèles de thèmes avec le contenu trouvé dans une base de données – comme les liens vers un logo et les entrées de menu – et les injecter dans chaque page.

L’écosystème des thèmes WordPress offre une riche sélection de designs pour presque tous les sites web. Avec des dizaines de milliers de thèmes à choisir sur différentes places de marché, choisir le meilleur pour ton objectif peut être décourageant.

Mais lorsque vous aurez finalement choisi et installé un thème, vous devrez personnaliser au moins certains composants – comme l’en-tête – pour imprimer votre marque sur le site et vous l’approprier.

Voyons comment procéder.

Blocs vs classique : L’histoire de deux thèmes

La façon dont vous personnalisez l’en-tête de ton site WordPress est déterminée par la façon dont son thème a été construit (et, parfois, par l’ampleur de la personnalisation que tu souhaites effectuer). Il existe trois façons de modifier l’en-tête d’un site natif de WordPress :

• En utilisant l’éditeur de site : WordPress 5.0 a introduit un éditeur de blocs pour le contenu des sites web, connu sous le nom de Gutenberg. Avec la sortie de WordPress 5.9, le concept de bloc s’est étendu aux thèmes et est devenu une option robuste pour l’édition complète du site. L’éditeur de site et la possibilité de construire les différentes parties d’un thème de site web avec des composants basés sur HTML ont apporté une flexibilité sans précédent à la personnalisation native de WordPress.
• Utiliser la personnalisation de WordPress : Nous n’essayons pas de vous faire sentir vieux, mais les thèmes qui ne peuvent être modifiés qu’en utilisant la personnalisation, autrefois révolutionnaire, et les widgets associés sont appelés thèmes « classiques ». Malgré ce nom à consonance rétro, de nouveaux thèmes de style classique sont toujours publiés, venant s’ajouter aux milliers de thèmes déjà présents sur le marché. Comparés aux thèmes Site Editor et Block, les thèmes Customizer et Classic offrent moins d’options pour la personnalisation de l’en-tête.
• Modifier directement les fichiers du thème : Vous devrez (ou quelqu’un à qui vous demanderez de l’aide) avoir quelques connaissances de base en PHP pour modifier le code des fichiers de thèmes WordPress classiques, mais c’est une solution lorsque la personnalisation, ne peut pas te fournir ce dont vous avez pour l’en-tête de votre site.

Ce que nous ne couvrons pas ici, c’est la personnalisation de l’en-tête dans les constructeurs de pages WordPress tiers comme Divi ou toute autre extension conçue spécifiquement pour s’attaquer aux en-têtes (et aux pieds de page) des sites web. Ces extensions pourraient valoir la peine d’être explorées si votre seule option nécessite de modifier directement les fichiers du thème et que vous voulez éviter la programmation PHP.

Comment modifier l’en-tête d’un thème en bloc ?

Si vous avez utilisé Gutenberg pour créer du contenu, vous savez que WordPress est livré avec une grande collection de blocs que vous pouvez placer sur les pages pour composer n’importe quoi, des titres, paragraphes et listes aux médias, à la navigation et aux formulaires. Il existe une classe de blocs qui effectuent des tâches comme les widgets dans les thèmes classiques, notamment la génération de liens vers les derniers articles et commentaires, l’affichage d’un nuage d’étiquettes ou l’insertion d’un calendrier.

Plusieurs blocs peuvent être combinés, stylisés et enregistrés en tant que modèles. Vous pouvez également ajouter ces composants aux parties d’un thème WordPress qui aident à définir la mise en page, y compris les en-têtes.

Comme les blocs individuels, les parties de modèles peuvent être définies dans des fichiers HTML. Les thèmes à blocs sont faciles à personnaliser car les informations décrivant ces modifications sont enregistrées dans la base de données de WordPress et appliquées aux différents composants lorsqu’une page est générée.

Ainsi, lorsque nous parlons de « modifier » un en-tête dans un thème de bloc, nous parlons rarement de modifier un fichier stocké dans un répertoire de thème WordPress.

Sous le capot : L’en-tête d’un thème en bloc

L’inspection du code HTML derrière une partie de modèle comme l’en-tête permet d’expliquer ce qui se passe lorsque vous personnalisez un thème.

Nous utilisons le thème Seedlet pour ce tutoriel parce qu’il est disponible sous forme de Seedlet (Blocks) et de l’ancien Seedlet (Classic). Seedlet (Blocks) utilise le thème Blockbase comme parent, et voici tout le contenu du fichier header.html dans les répertoires du thème Seedlet :

<!-- wp:pattern {"slug":"blockbase/header-centered"} /-->
<!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

La plus grande partie de la magie des blocs WordPress se produit dans les commentaires HTML. Les commentaires peuvent transmettre des informations de style et d’autres directives pendant la construction de la page. Le code HTML ci-dessus ajoute un espacement vertical à notre en-tête par défaut, mais l’action principale est la demande d’inclusion d’une composition dans le thème Blockbase qui (une fois que .html est ajouté) se trouve dans le fichier header-centered.html.

Le répertoire des parties de modèle dans le thème Blockbase comprend ces fichiers liés à un en-tête :

header-centered.html
header-default.html
header-linear.html
header-minimal.html
header-rounded-logo.html
header-wide.html

À titre d’exemple, le fichier header-rounded-logo.html comprend un commentaire HTML qui ajoute une classe CSS pour le détourage circulaire de l’image du logo. Si cette approche nous tenait à cœur, nous pourrions modifier notre fichier Seedlet header.html pour inclure header-rounded-logo.html au lieu de header-centered.html. Mais nous n’avons pas besoin de le faire parce que nous pouvons appliquer cette partie de modèle dans l’éditeur de site WordPress et laisser les fichiers de thème sur le disque dur intacts.

Utilisation de l’éditeur de site pour personnaliser un en-tête

Avec un thème bloc actif sur notre site Web, nous pouvons accéder à l’Éditeur de site dans le panneau d’administration de WordPress en sélectionnant Apparence > Éditeur:

La vue initiale dans l’éditeur de site est une mise en page complète qui comprendra l’en-tête, le pied de page et toutes les autres parties du modèle déjà ajoutées par le développeur du thème. Nous pouvons cliquer sur la zone de l’en-tête pour commencer immédiatement à modifier.

Ci-dessous, notre en-tête comprend un espace réservé pour un logo et affiche déjà le nom du site et la navigation principale (qui se compose maintenant uniquement de « À propos de nous » et de « Page d’exemple »). Si nous ajoutons un slogan aux informations de base de notre site, il apparaîtra également ici.

Ces éléments d’identité du site apparaissent déjà dans notre en-tête car la partie du modèle header-centered.html mentionnée ci-dessus inclut ces commentaires :

<!-- wp:site-logo {"align":"center","width":128} /-->
<!-- wp:site-title {"textAlign":"center","style":{"spacing":{"padding":{"top":"30px","bottom":"20px"}}}} /-->
<!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->

La navigation principale est générée par ce commentaire :

<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"center","orientation":"horizontal"}} /-->

Ajoutons notre logo :

1. Sélectionnez l’espace réservé du logo.
2. Cliquez sur le bouton Ajouter un média.
3. Choisissez votre logo dans la médiathèque de WordPress ou téléversez-le.

Personnaliser l’en-tête d’un site web en y ajoutant un logo est une tâche si courante que même la plupart des thèmes WordPress classiques simplifient le travail dans la personnalisation. Ajoutons donc un bloc qui n’est pas déjà anticipé dans le modèle : un menu secondaire près du haut de la page avec l’entrée : Boutique.

Tout d’abord, nous basculons l’affichage de l’insertion de bloc en cliquant sur l’icône de basculement située dans le coin supérieur gauche de l’éditeur de site :

Lorsque l’outil d’insertion de blocs est actif :

1. Trouvez le bloc de navigation (vous pouvez le rechercher).
2. Faites glisser le bloc jusqu’à la marge supérieure de l’en-tête.

Maintenant, nous modifions le bloc de navigation en créant un lien personnalisé (détaché de la navigation principale) qui affiche le texte Boutique et comporte l’URL de notre sous-domaine de commerce électronique :

Par défaut, tout ce qui se trouve dans cette partie du modèle d’en-tête est centré sur la page. Nous voulons que le lien de la boutique flotte à droite. Pour cela :

1. Cliquez sur le nouveau bloc de navigation.
2. Cliquez sur l’icône Modifier la justification des éléments dans la barre d’outils.
3. Sélectionnez Justifier les éléments à droite.

Voici l’en-tête terminé :

Comment modifier l’en-tête d’un thème classique avec la personnalisation ?

Lorsque la première version de la personnalisation de thème a été publiée en 2012, en même temps que WordPress 3.4, il s’agissait d’un bond en avant pour aider les administrateurs à modifier l’aspect et la convivialité de leurs sites web sans coder.

La personnalisation a été considérablement améliorée depuis, mais une chose reste vraie : le développeur d’un thème détermine ce qui peut ou ne peut pas être personnalisé à l’aide de l’outil. Cela contraste avec la liberté dont disposent les propriétaires de sites avec l’Éditeur de site basé sur des blocs.

Utilisation de la personnalisation de WordPress

Lorsqu’un thème classique prenant en charge la personnalisation est actif sur un site, vous pouvez y accéder dans le panneau d’administration de WordPress en sélectionnant Apparence > Personnaliser.

Dans le menu principal de la personnalisation, nous sélectionnons Identité du site pour atteindre les composants personnalisables de l’en-tête :

Dans la section Identité du site de ce thème, nous pouvons ajouter ou modifier un logo et éditer le titre du site et toute accroche. (Le titre du site et le slogan sont initialement renseignés par les entrées de la page Réglages généraux du panneau d’administration).

Ce thème place également la navigation principale du site dans l’en-tête. Il y a également un emplacement pour la navigation vers le bas dans le pied de page et pour un menu de liens vers les réseaux sociaux. La personnalisation vous permet de choisir le menu que vous voulez attribuer à chacun de ces emplacements, mais les emplacements eux-mêmes sont essentiellement fixes.

Après avoir cliqué sur le bouton Sélectionner un logo mis en évidence ci-dessus, nous pouvons choisir un logo dans la médiathèque de WordPress ou en téléverser un nouveau.

Ci-dessous, avec un logo en place, la personnalisation nous permet de supprimer l’image ou de la remplacer par une autre :

Sous le capot : Que peut personnaliser la personnalisation ?

Alors, comment la personnalisation détermine-t-elle si nous pouvons téléverser un logo et où il doit être placé une fois que nous l’avons fait ?

Cela commence par cette entrée dans le script functions.php du thème :

/**
* Add support for core custom logo.
*
* @link https://codex.wordpress.org/Theme_Logo
*/
add_theme_support(
    'custom-logo',
    array(
        'height' => 240,
        'width'           => 240,
        'flex-width'  => false,
        'flex-height' => false,
     )
);

Ce bloc de code active le bouton Sélectionner un logo dans l’onglet Identité du site de la personnalisation, ainsi que son lien vers les fonctions de la médiathèque.

Ensuite, dans le code PHP utilisé pour construire l’en-tête du site, ce court extrait de code est ajouté à l’endroit où le logo doit apparaître :

<div class="site-logo"><?php the_custom_logo(); ?></div>

Le résultat :

Modifier un en-tête WordPress en modifiant les fichiers du thème

Ci-dessus, lorsque nous avons personnalisé l’en-tête d’un thème de blocs à l’aide de l’éditeur de site, nous avons ajouté un menu secondaire avec un lien Boutique. Nous étions libres de placer ce bloc de navigation où nous voulions dans notre en-tête. Notre version classique du thème n’a pas d’emplacement réservé pour un tel menu, nous devrons donc modifier le code PHP lié à l’en-tête pour effectuer le changement.

Nous pourrions simplement ouvrir le fichier de thème approprié et ajouter manuellement le code HTML pour notre menu secondaire, mais ce serait manquer de perspicacité. Plus tard, nous pourrions vouloir mettre à jour le texte de notre lien d’achat (Acheter maintenant ?), changer son URL ou ajouter un autre élément à ce menu (Se connecter ?).

Nous voulons ajouter une nouvelle navigation à l’en-tête qui soit enregistrée dans la personnalisation, ce qui permettra de modifier le contenu du menu secondaire dans l’éditeur de menu de WordPress sans avoir à retourner dans le code du thème.

Avant de commencer : Sauvegardez

Fouiller dans le code PHP de ton thème WordPress classique pour personnaliser l’en-tête de votre site est souvent décrit comme l’édition du fichier header.php. C’est le cas dans de nombreux thèmes, mais d’autres peuvent combiner plusieurs fichiers pour construire un seul en-tête.

Avant d’apporter des modifications aux fichiers du thème, faites des sauvegardes. Voici comment faire des sauvegardes et comment les restaurer.

Même avec des sauvegardes, vous pouvez rencontrer des problèmes lorsqu’une mise à jour d’un thème tiers écrase vos modifications. Vos modifications pourraient disparaître du site jusqu’à ce que vous puissiez restaurer vos fichiers de thème modifiés à partir d’une sauvegarde. C’est pourquoi nous vous recommandons vivement de créer un thème enfant uniquement pour vos fichiers modifiés et de tester les mises à jour sur un site WordPress de staging.

Modifier un en-tête WordPress dans un thème classique

Notre exemple de thème classique a un emplacement réservé dans l’en-tête pour la navigation principale. Dans la personnalisation, nous pouvons sélectionner le menu WordPress que nous voulons attribuer à cet emplacement. Dans notre cas, ce menu est nommé « Menu principal ».

Il y a également des emplacements dans le thème pour la navigation dans le pied de page et les liens sociaux, mais vous pouvez ci-dessous qu’ils ne sont pas activés pour le moment :

Si nous jetons un coup d’œil au script functions.php du thème, nous voyons où ces emplacements de menu sont référencés pour la première fois :

// This theme uses wp_nav_menu() 
register_nav_menus(
    array(
        'primary' => __( 'Primary Navigation', 'seedlet' ),
        'footer'  => __( 'Footer Navigation', 'seedlet' ),
        'social'  => __( 'Social Links Navigation', 'seedlet' ),
    )
);

Ci-dessous, nous ajoutons à ce bloc une entrée pour notre nouveau menu « Navigation secondaire » :

// This theme uses wp_nav_menu() 
register_nav_menus(
    array(
        'primary' => __( 'Primary Navigation', 'seedlet' ),
        'secondary' => __( 'Secondary Navigation', 'seedlet' ),
        'footer'  => __( 'Footer Navigation', 'seedlet' ),
        'social'  => __( 'Social Links Navigation', 'seedlet' ),
    )
);

Lorsque nous retournons dans la personnalisation, la nouvelle option Navigation secondaire apparaît dans la zone Emplacements du menu :

Nous pouvons donner un nom à notre menu (Menu secondaire) et commencer à y ajouter des liens. Comme nous l’avons fait avec l’éditeur de site dans le thème basé sur les blocs, nous allons créer une entrée pour Shop.

Dans le fichier de thème de l’en-tête, nous avons ajouté un code qui confirme que le menu de navigation secondaire existe et qu’il a au moins une entrée dans la liste des liens. Nous analysons ensuite le contenu du menu et l’affichons :

<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
<div id="secondary-navigation" class="secondary-navigation" role="navigation">
<?php
// Get menu slug
$location_name = 'secondary;
$locations         = get_nav_menu_locations();
$menu_id           = $locations[ $location_name ];
$menu_obj          = wp_get_nav_menu_object( $menu_id );
wp_nav_menu(
    array(
        'theme_location'  => 'secondary',
        'menu_class'          => 'menu-wrapper',
        'container_class' => 'secondary-menu-container',
        'items_wrap'          => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    )
);
?>
</div><!-- #secondary-navigation -->
<?php endif; ?>        
<div class="menu-button-container">
<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
    <button id="secondary-open-menu" class="button open">
        <span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
        <span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>
    </button>
<?php endif; ?>
</div>

Maintenant, notre en-tête inclut notre lien Shop (surligné en rouge ci-dessous) à l’emplacement que nous préférons pour la navigation secondaire.

Avec cette approche, nous pouvons modifier le texte d’ancrage utilisé pour notre lien Shop – ou même ajouter des éléments de menu supplémentaires à la navigation secondaire – simplement en modifiant notre menu Navigation secondaire dans le tableau de bord d’administration de WordPress.

Résumé

Si vous voulez modifier l’en-tête de ton site WordPress sans avoir recours à des extensions tierces ou à des constructeurs de pages, les thèmes basés sur des blocs offrent une flexibilité presque illimitée en combinaison avec l’Éditeur de site. L’éditeur de site vous permet de placer une variété de blocs à peu près n’importe où sur une mise en page. Les modifications que vous apportez aux définitions des blocs et à leur style sont stockées dans la base de données de WordPress, ce qui évite d’avoir à modifier les fichiers du thème sur le disque.

La personnalisation,, que nous utilisons depuis plus de dix ans pour gérer les thèmes classiques, permet de modifier les éléments que le développeur du thème a identifiés et enregistrés comme « personnalisables ». Les modifications que vous souhaitez apporter et qui sortent de ce cadre peuvent nécessiter l’édition des fichiers du thème et – presque à coup sûr – une compréhension de base du langage de script PHP.

Vous cherchez une meilleure façon de créer des sites WordPress ? Jetez un coup d’œil à DevKinsta, basé sur Docker, une suite de développement local gratuite utilisée par 60,000+ développeurs, concepteurs web et indépendants.

Steve Bonisteel Kinsta

Steve Bonisteel est un rédacteur technique chez Kinsta qui a commencé sa carrière d'écrivain en tant que journaliste de presse écrite, chassant les ambulances et les camions de pompiers. Il couvre les technologies similaires à l'Internet depuis la fin des années 1990.