TL;DR : Comment personnaliser mon en-tête WordPress sans casser mon thème
L'en-tête de votre WordPress est la première chose que les visiteurs voient, et la plupart des thèmes vous donnent beaucoup moins de contrôle que ce à quoi vous pourriez vous attendre. Voici les quatre méthodes que j'utilise :
- Constructeur de thèmes SeedProd : Contrôle total par glisser-déposer de chaque élément de l'en-tête, fonctionne avec n'importe quel thème et conserve vos modifications lors des mises à jour ou des changements de thème.
- Personnaliseur de thème WordPress (ou Éditeur de site) : Idéal pour les modifications de base du logo, du titre et du menu sur les thèmes classiques. Les thèmes FSE modernes utilisent plutôt Apparence » Éditeur.
- Plugin Insérer les en-têtes et pieds de page : Idéal pour ajouter des scripts ou des extraits de code simples à la zone d'en-tête sans toucher aux fichiers du thème.
- Modifications CSS et header.php : Pour les utilisateurs avancés uniquement. Les modifications CSS sont sûres ; la modification directe de header.php nécessite un thème enfant pour survivre aux mises à jour.
Votre thème WordPress a choisi votre mise en page d'en-tête. Pas vous.
J'ai modifié des en-têtes sur des dizaines de sites WordPress au fil des ans, et c'est ce qui frustre le plus les gens. Que vous essayiez d'ajouter un logo, de changer votre navigation ou d'ajouter un bouton d'appel à l'action, votre en-tête donne le ton de l'ensemble de votre site. Avec la bonne approche, vous pouvez même afficher différents en-têtes sur différentes pages, ce que la plupart des thèmes WordPress ne peuvent pas faire par eux-mêmes.
Dans ce guide, je vais vous expliquer comment modifier votre en-tête WordPress en utilisant quatre méthodes, du constructeur visuel à la personnalisation CSS.
Résumé rapide : Comment modifier votre en-tête WordPress
- Modifier l'en-tête avec un constructeur visuel (sans code)
- Modifier l'en-tête à l'aide du personnalisateur de thème WordPress
- Utiliser un plugin d'en-tête pour des modifications simples
- Modifier manuellement le code (avancé)
Qu'est-ce que l'en-tête WordPress ?
L'en-tête WordPress est la section en haut de chaque page de votre site. Il comprend généralement votre logo, votre menu de navigation et les appels à l'action tels qu'un numéro de téléphone ou un bouton d'inscription.
Par exemple, voici à quoi ressemble l'en-tête sur le site Web SeedProd.
Comme vous pouvez le voir, il contient le logo SeedProd, un menu de navigation et un bouton d'appel à l'action pour commencer avec SeedProd.
Si votre site Web a d'autres besoins, vous pouvez ajouter des éléments supplémentaires à l'en-tête de votre site WordPress. Comme SeedProd, vous pourriez ajouter des boutons d'appel à l'action ou inclure une barre de recherche, des icônes de médias sociaux et d'autres contenus.
Vous pouvez trouver les détails de votre en-tête WordPress dans le fichier header.php de votre thème WordPress. Nous vous suggérons de modifier ce fichier uniquement si vous êtes un utilisateur avancé qui sait ce qu'il fait.
Que pouvez-vous changer dans un en-tête WordPress ?
L'en-tête est l'endroit où se font la plupart des premières impressions, et la plupart des thèmes WordPress ne vous donnent presque aucun contrôle dessus. Comprendre ce qui est réellement modifiable vous aide à choisir la bonne méthode ci-dessous.
La plupart des personnalisations d'en-tête entrent dans ces catégories :
- Logo et titre du site
- Accroche
- Menu de navigation
- Boutons d'appel à l'action (numéro de téléphone, « Commencer l'essai gratuit », « Nous contacter »)
- Barre de recherche
- Icônes de médias sociaux
- Couleur d'arrière-plan et polices
- Comportement fixe (en-tête qui reste visible lors du défilement)
- Mise en page mobile (menu hamburger, éléments empilés ou en ligne)
La méthode que vous choisissez détermine le nombre de ces éléments que vous pouvez réellement contrôler. Un personnaliseur de thème standard peut vous donner des options de logo et de slogan, mais rien d'autre. Le constructeur d'en-tête WordPress de SeedProd vous donne un contrôle total sur tous ces éléments.
1. Comment personnaliser les en-têtes dans WordPress avec SeedProd
Si vous voulez un contrôle total sur votre en-tête WordPress, SeedProd vous offre le plus de contrôle. C'est le meilleur plugin de création de thèmes WordPress qui vous permet de créer un modèle d'en-tête WordPress personnalisé sans écrire une seule ligne de code.
SeedProd est un constructeur de sites Web WordPress par glisser-déposer qui vous permet de construire un site Web WordPress complet et un thème personnalisé sans toucher au code.
Le constructeur de thèmes de SeedProd est indépendant du thème. Il remplace entièrement votre thème WordPress actif, de sorte que les modifications que vous apportez ne sont jamais perdues lorsque vous mettez à jour ou changez de thème.
La création d'un en-tête personnalisé pour votre site Web WordPress ne prend que quelques clics, et vous pouvez ajouter des éléments d'en-tête populaires par glisser-déposer.
Cela dit, voici les étapes pour modifier votre en-tête WordPress avec SeedProd.
Étape 1. Installer le plugin SeedProd Theme Builder
Le constructeur de thèmes SeedProd fonctionne avec n'importe quel thème WordPress, vous n'avez donc pas besoin de supprimer votre configuration existante au préalable.
Tout d'abord, installez et activez SeedProd sur votre site WordPress.
Pour obtenir de l'aide à ce sujet, consultez ce guide étape par étape sur comment installer un plugin WordPress.
Remarque : Vous aurez besoin au minimum du plan Pro ou Elite pour débloquer le constructeur de thèmes.
Après avoir activé le plugin, allez dans SeedProd » Paramètres pour saisir votre clé de licence de plugin. Vous la trouverez sous votre compte sur le site Web de SeedProd.
Une fois que vous avez saisi votre clé de licence et cliqué sur Vérifier la clé, vous êtes prêt à créer un en-tête WordPress personnalisé à l'aide de SeedProd.
Étape 2. Choisir un modèle de thème de démarrage
Pour modifier votre en-tête avec SeedProd, vous allez d'abord créer un thème personnalisé. Ne vous inquiétez pas, c'est plus simple que cela en a l'air.
Allez dans SeedProd » Theme Builder. Vous verrez vos fichiers de modèles de thème actuels listés sur cette page.
Comme nous n'avons pas encore commencé, vous ne verrez qu'un modèle CSS global.
Vous avez deux options pour commencer :
- Utiliser l'un des thèmes SeedProd prêts à l'emploi comme point de départ
- Créer manuellement des modèles de thème à partir de zéro
Je recommande de commencer avec un thème existant. SeedProd génère automatiquement tous les fichiers de modèles, y compris les modèles d'en-tête, de pied de page et de page. Ce sont des thèmes complets de qualité professionnelle qui vous donnent une longueur d'avance.
Cliquez sur Thèmes et choisissez celui qui correspond le mieux aux besoins de votre site.
Après avoir choisi un thème, SeedProd crée automatiquement tous les fichiers de modèles. À partir de là, vous pouvez modifier chaque modèle individuellement dans l'éditeur par glisser-déposer.
Étape 3. Personnaliser la section En-tête
Pour modifier votre en-tête avec SeedProd, trouvez le modèle En-tête et cliquez sur Modifier la conception.
Cela ouvre le fichier de modèle dans le constructeur de thèmes de SeedProd. Vous verrez un aperçu en direct de votre modèle d'en-tête WordPress sur la droite, avec un panneau d'édition sur la gauche.
Pour modifier un élément de votre modèle d'en-tête, pointez et cliquez pour le modifier.
Selon l'élément sur lequel vous cliquez, vous verrez différentes options d'édition dans la colonne de gauche. Vous pouvez modifier les polices, les couleurs, l'arrière-plan, l'espacement, et plus encore.
Pour ajouter des éléments d'en-tête personnalisés, faites glisser les blocs SeedProd de la colonne de gauche dans votre modèle. Voici les types de blocs disponibles :
- Balises de modèle – Blocs qui génèrent des éléments de thème à partir de votre base de données WordPress, tels que les articles de blog, les commentaires et les images mises en avant.
- Blocs standard – Éléments de conception Web courants qui vous permettent d’ajouter des images, des boutons, du texte, des séparateurs, et plus encore.
- Blocs avancés – Blocs pour ajouter des formulaires de contact, des profils sociaux, des boutons de partage, des shortcodes WordPress, Google Maps, et plus encore.
- WooCommerce – Si vous gérez une boutique en ligne, utilisez ces blocs pour afficher les produits, les paniers d’achat et les pages de paiement personnalisées.
Utiliser des sections pour personnaliser votre en-tête WordPress
En plus des blocs individuels, vous pouvez également ajouter des sections complètes à votre modèle d’en-tête.
Basculez vers l’onglet Sections sous le panneau de conception.
Les sections sont des groupes de blocs pour différentes zones de la conception de votre site Web. Vous pouvez trouver des sections prêtes à l’emploi pour votre en-tête, votre pied de page, vos appels à l’action, vos fonctionnalités, et plus encore.
Cliquez sur n’importe quelle section d’en-tête pour l’ajouter à votre modèle, puis modifiez-la selon vos besoins.
Lorsque vous êtes satisfait de l’apparence de votre en-tête, cliquez sur Enregistrer dans le coin supérieur droit.
Répétez maintenant ce processus pour les autres modèles de votre thème afin de créer un thème WordPress entièrement personnalisé.
Étape 4. Publiez votre en-tête WordPress personnalisé
Lorsque vous êtes satisfait de votre modèle d’en-tête WordPress personnalisé, la dernière étape consiste à l’activer sur votre site.
Dans SeedProd, vous appliquez votre en-tête WordPress personnalisé avec une simple bascule.
Accédez à SeedProd » Theme Builder et basculez l’interrupteur à côté de « Activer le thème SeedProd » sur « Oui ».
SeedProd remplace votre conception existante par le nouveau thème et le nouvel en-tête WordPress.
Visitez votre site Web pour voir votre en-tête WordPress personnalisé en action.
Comment rendre votre en-tête WordPress fixe
Un en-tête fixe reste visible lorsque les visiteurs font défiler la page vers le bas, ce qui maintient votre navigation et vos CTA accessibles à tout moment. Que vous utilisiez SeedProd ou un thème standard, l’approche est la même : un petit extrait de CSS.
Ajoutez ceci au CSS additionnel de votre thème (allez dans Apparence » Personnaliser » CSS additionnel) ou, si vous utilisez SeedProd, collez-le dans SeedProd » Theme Builder » CSS global :
.site-header {
position: sticky;
top: 0;
z-index: 999;
}Le sélecteur .site-header varie selon le thème, vous devrez donc peut-être inspecter l’élément de votre en-tête pour trouver la classe correcte.
Créer plusieurs en-têtes personnalisés avec SeedProd
Vous pouvez également créer plusieurs en-têtes pour différentes sections de votre site Web.
Par exemple, vous pourriez vouloir un en-tête qui ne s’affiche que sur des catégories ou des pages de destination spécifiques. Pour ce faire, créez un nouveau modèle et modifiez les conditions d’affichage pour répondre à vos besoins.
En utilisant le constructeur de thèmes par glisser-déposer de SeedProd, vous pouvez créer n’importe quelle mise en page d’en-tête personnalisée dont votre site a besoin.
Bien que l’éditeur visuel de SeedProd offre le moyen le plus simple de modifier votre en-tête WordPress, il existe également d’autres méthodes qui valent la peine d’être connues.
2. Modifier les en-têtes WordPress avec le personnalisateur de thème
La plupart des thèmes WordPress vous donnent un certain contrôle sur l’en-tête de votre site dans le personnalisateur WordPress natif. Il ne vous donnera pas un contrôle approfondi, mais vous obtiendrez des options de base pour modifier l’apparence et le comportement de votre en-tête.
Les options disponibles dépendent de votre thème. Pour la plupart des thèmes classiques, accédez à Apparence » Personnaliser depuis votre administration WordPress. Cliquez ensuite sur Identité du site dans la colonne de gauche.
La plupart des thèmes vous permettent de personnaliser votre logo, le titre du site et le slogan depuis ce panneau.
Vous pouvez ensuite cliquer sur Menus pour modifier la disposition de votre menu de navigation.
Remarque : Si vous utilisez un thème basé sur des blocs (FSE) comme Twenty Twenty-Five (l’actuel par défaut), le personnalisateur classique n’est pas disponible. Accédez plutôt à Apparence » Éditeur pour modifier votre en-tête à l’aide de l’interface d’édition complète du site.
Avec l’éditeur de site, vous pouvez modifier votre en-tête WordPress avec l’éditeur de blocs, tout comme n’importe quel autre article ou page. Il offre plus de flexibilité que le personnalisateur classique, mais toujours moins de contrôle que le constructeur d’en-têtes WordPress dédié de SeedProd.
3. Personnaliser les en-têtes dans WordPress avec un plugin d’en-tête
Une autre façon simple de modifier l’en-tête dans WordPress est d’utiliser un simple plugin d’en-tête. C’est une bonne option si vous avez besoin d’ajouter des scripts ou du code à votre en-tête sans toucher directement aux fichiers de votre thème.
Bien qu’il existe des centaines de plugins parmi lesquels choisir, le plugin gratuit Insert Headers and Footers est l’option la plus populaire.
Après avoir activé le plugin sur votre site Web, trouvez-le sous Paramètres » Insérer les en-têtes et les pieds de page.
À partir de là, vous pouvez coller tout code que vous souhaitez ajouter à l’en-tête de votre site Web.
Tous les scripts que vous ajoutez ici sont automatiquement inclus dans la balise d’en-tête de votre site WordPress. Cliquez sur Enregistrer pour sauvegarder vos modifications.
4. Personnaliser le code d’en-tête WordPress (Avancé)
Si vous êtes un utilisateur avancé, vous pouvez modifier directement votre en-tête WordPress en utilisant HTML, PHP et CSS. Cette méthode ne convient pas aux débutants.
Important : Si vous prévoyez de modifier header.php directement, faites-le dans un thème enfant. Sinon, vos modifications seront écrasées lors de la mise à jour de votre thème. L’approche CSS seule ci-dessous n’a pas ce problème.
Pour modifier le code de votre en-tête, accédez à Apparence » Éditeur de thème et ouvrez le fichier Style.css.
À partir de là, faites défiler jusqu’à la section En-tête du site et ajoutez ou supprimez du code pour ajuster le style.
Vous pouvez également modifier votre fichier header.php pour des modifications structurelles et fonctionnelles. Par exemple, si vous souhaitez ajouter un numéro de téléphone ou restructurer la disposition de l’en-tête, cela se trouve dans header.php plutôt que dans le CSS.
Ces modifications s’appliquent à l’ensemble du site. Si vous souhaitez que votre en-tête mobile ait un aspect différent, voici comment gérer cela séparément.
Comment personnaliser votre en-tête WordPress sur mobile
Les en-têtes de bureau et mobiles nécessitent souvent des dispositions différentes. Un menu de navigation qui est propre sur un écran de 1440 px peut devenir un désordre encombré sur mobile, et la plupart des thèmes ne vous donnent pas de moyen visuel de résoudre ce problème.
Voici les trois façons de gérer la personnalisation de l’en-tête mobile dans WordPress :
- Mode d’aperçu réactif de SeedProd : Dans l’éditeur d’en-tête de SeedProd, cliquez sur l’icône mobile en bas de l’écran pour prévisualiser et modifier votre en-tête en taille mobile. Vous pouvez masquer des éléments, ajuster l’espacement et réorganiser des blocs spécifiquement pour le mobile sans affecter la mise en page de bureau.
- Requêtes de médias CSS : Pour les sites basés sur un thème, ajoutez des règles CSS réactives pour cibler les éléments d’en-tête à des points d’arrêt spécifiques. Par exemple, pour masquer un slogan sur mobile :
@media (max-width: 768px) { .site-description { display: none; } } - Paramètres du menu mobile intégrés à votre thème : La plupart des thèmes gèrent automatiquement le menu hamburger, mais vérifiez Apparence » Personnaliser » Mobile (ou un panneau similaire) pour toute option d’en-tête spécifique au mobile incluse dans votre thème.
Le problème le plus courant que j’ai constaté est le conflit entre les styles d’en-tête de bureau et mobile après une modification CSS. Si cela se produit, vérifiez si votre règle CSS a un point d’arrêt réactif, ou si vous modifiez le bon sélecteur pour le mobile.
Questions fréquemment posées sur l’en-tête WordPress
Comment modifier mon en-tête WordPress sans casser mon thème ?
L’approche la plus sûre consiste à utiliser le constructeur de thème de SeedProd, qui remplace entièrement votre thème actif plutôt que de le modifier. Cela signifie que votre en-tête personnalisé n’est jamais menacé lors de la mise à jour ou du changement de thème. Si vous préférez conserver votre thème, tenez-vous-en aux modifications CSS via Apparence » Personnaliser » CSS additionnel et évitez de modifier directement header.php. Si vous devez modifier header.php, utilisez toujours d’abord un thème enfant.
Quelle est la différence entre la modification d’en-tête de WordPress.com et WordPress.org ?
WordPress.org (auto-hébergé) vous donne un contrôle total sur votre en-tête grâce à la personnalisation du thème, aux plugins et à la modification directe des fichiers. WordPress.com est un service hébergé avec plus de restrictions. Sur WordPress.com, vous modifiez votre en-tête via Site » Éditeur, et vos options dépendent de votre plan. Les méthodes de cet article s’appliquent uniquement aux sites WordPress.org auto-hébergés.
Comment rendre mon en-tête WordPress fixe ?
Les configurations de SeedProd et les thèmes standards utilisent la même approche CSS. Ajoutez position: sticky; top: 0; z-index: 999; à la classe CSS de votre élément d’en-tête. Pour les utilisateurs de SeedProd, collez-le dans SeedProd » Theme Builder » CSS global. Pour les thèmes standards, allez dans Apparence » Personnaliser » CSS additionnel. La classe exacte varie selon le thème, alors inspectez votre élément d’en-tête pour trouver le bon sélecteur.
Puis-je afficher un en-tête différent sur des pages spécifiques dans WordPress ?
Oui, avec SeedProd, vous pouvez créer plusieurs modèles d’en-tête et attribuer chacun d’eux à des pages, catégories ou types de publication spécifiques à l’aide de conditions d’affichage. Ceci est intégré au constructeur de thème et ne nécessite aucun codage. Avec un thème WordPress standard, l’affichage d’en-têtes différents sur différentes pages nécessite du PHP personnalisé ou un plugin comme Conditional Headers.
Personnalisez votre en-tête WordPress dès aujourd'hui
Nous espérons que cet article vous a aidé à apprendre comment modifier les en-têtes dans WordPress.
La manière la plus simple d'obtenir un contrôle total sur la configuration de votre en-tête personnalisé WordPress est avec SeedProd. Il offre un constructeur d'en-tête WordPress visuel, par glisser-déposer, vous n'avez pas besoin de modifier de code ou de fichiers de thème, et vous pouvez apporter toutes les modifications directement dans le tableau de bord WordPress.
Vous pourriez également aimer ce guide sur la façon de modifier le pied de page dans WordPress.
Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.
