Comment personnaliser votre en-tête WordPress (Guide du débutant)

Vous souhaitez afficher un en-tête personnalisé pour votre site WordPress ?

De nombreux thèmes WordPress sont livrés avec un en-tête intégré qui se trouve en haut de chaque page. Vous devrez peut-être le personnaliser pour ajouter des liens importants, des icônes sociales, une recherche de site ou d’autres éléments afin de faire une bonne première impression.

Dans cet article, nous vous montrerons comment personnaliser votre en-tête WordPress et même créer un en-tête entièrement personnalisé pour l’ensemble de votre site ou pour des pages spécifiques.

Qu’est-ce que l’en-tête dans WordPress ?

L’en-tête de votre site est la section supérieure de chaque page de votre site WordPress, et probablement la première chose que vos internautes verront.

Il affiche souvent le logo et le titre de votre site, les menus de navigation et d’autres éléments importants que vous souhaitez que les utilisateurs/utilisatrices voient en premier.

Par exemple, voici notre zone d’en-tête sur WPBeginner que des millions de lecteurs consultent chaque mois.

En personnalisant l’en-tête de votre site, vous pouvez lui donner un design unique et le rendre plus utile pour vos internautes. Vous pouvez créer des liens vers vos pages les plus populaires, afficher des icônes sociales ou le numéro de téléphone de votre entreprise, et afficher des boutons d’appel à l’action pour plus de conversions.

Ceci étant dit, voyons comment personnaliser facilement votre en-tête WordPress. Vous pouvez utiliser les liens sur ce pour sauter à la section que vous voulez lire.

• Personnaliser l’en-tête en utilisant l’Outil de personnalisation du thème WordPress
• Outil de personnalisation de l’en-tête à l’aide de l’éditeur WordPress Full Site Editor
• Créer un en-tête personnalisé et des mises en page avec SeedProd
• Ajout d’un en-tête personnalisé pour chaque catégorie
• Ajouter une zone de widgets à votre en-tête WordPress
• Ajouter des images d’en-tête aléatoires à votre blog WordPress
• Ajouter un code personnalisé à l’en-tête de votre site (avancé)

Personnaliser l’en-tête à l’aide de l’Outil de personnalisation du thème WordPress

De nombreux thèmes WordPress populaires vous permettent d’utiliser l’Outil de personnalisation du thème WordPress pour apporter des modifications à la zone de l’en-tête de votre mise en page WordPress. Cette fonctionnalité est parfois appelée  » en-tête personnalisé« , mais tous les thèmes ne la supportent pas.

Vous devez commencer par naviguer vers Apparence  » Personnaliser dans votre zone d’administration WordPress.

Votre thème peut ajouter une section  » En-tête  » au personnalisateur, ou ajouter des options d’en-tête dans la section  » Couleur « , mais cela varie d’un thème à l’autre. Voici quelques exemples.

Certains thèmes, comme Outil de personnalisation, n’offrent pas du tout d’options de personnalisation de l’en-tête. Dans ce cas, nous vous recommandons d’utiliser une extension de constructeur de thème drag & drop comme SeedProd que nous couvrons ci-dessous.

Le thème Twenty Sixteen vous permet d’ajouter une image d’arrière-plan à l’en-tête, et même d’ajouter des images d’en-tête aléatoires.

Certains thèmes WordPress gratuits et premium offrent encore plus d’options de personnalisation du thème. Par exemple, vous pouvez être en mesure de modifier le style de police de votre en-tête, sa mise en page, ses couleurs, et bien plus encore. Mais vous êtes limité à ce que le développeur/développeuse du thème vous permet de faire.

Par exemple, vous pouvez créer un en-tête personnalisé à l’aide du personnalisateur de thème avec le thème Astra.

Astra dispose d’une option dédiée au Constructeur d’en-tête dans le panneau de gauche. Vous y trouverez différents réglages pour modifier l’apparence et le style de l’en-tête. Vous pouvez construire un en-tête personnalisé en ajoutant des blocs, tout comme lorsque vous modifiez un article de blog ou une page dans l’éditeur de contenu de WordPress.

Pour commencer, il suffit de survoler une zone vide de l’en-tête et de cliquer sur l’icône  » +  » pour ajouter un bloc d’en-tête.

En-tête, vous pouvez sélectionner n’importe quel bloc que vous souhaitez ajouter à votre en-tête personnalisé. Par exemple, vous pouvez ajouter un bloc de widget, un bloc de compte, un bloc de recherche, et plus encore.

De plus, le Constructeur d’en-tête vous permet également de faire glisser les blocs et de les placer au-dessus ou au-dessous de l’en-tête.

Vous pouvez personnaliser davantage chaque bloc que vous ajoutez à l’en-tête.

Par exemple, en sélectionnant le bloc Titre du site et logo, vous aurez des options pour téléverser un titre et un logo, modifier la largeur du logo, afficher le slogan du site, etc.

En outre, vous pouvez également modifier la couleur d’arrière-plan de l’en-tête ou ajouter une image d’arrière-plan qui apparaîtra dans l’en-tête.

Lorsque vous avez fini de modifier l’en-tête personnalisé, cliquez simplement sur le bouton « Publier ».

Pour plus de détails, consultez notre guide ultime sur l’utilisation du personnalisateur de thème WordPress.

Outil de personnalisation de l’en-tête à l’aide de l’éditeur WordPress Full Site Editor

WordPress a ajouté l’édition de site complet à la version 5.9. Si votre thème supporte la nouvelle fonctionnalité, il remplace alors le client/cliente personnalisé. Cependant, à l’heure actuelle, seuls quelques thèmes fonctionnent avec l’éditeur de site complet.

Lorsque vous utilisez un thème compatible, vous pouvez personnaliser votre en-tête en naviguant vers Apparence  » Éditeur. Cela lancera l’éditeur de site complet, qui est exactement comme l’éditeur de blocs que vous utilisez pour écrire des publications et des pages WordPress.

Lorsque vous cliquez sur l’en-tête, vous remarquerez que le nom du modèle en haut de la page est modifié en « En-tête de page ».

En cliquant sur l’icône « Réglages » de la barre d’outils, vous verrez apparaître des options permettant de personnaliser la mise en page, la couleur, la bordure et les dimensions de l’en-tête.

À titre d’exemple, nous allons modifier la couleur d’arrière-plan de l’en-tête. Tout d’abord, vous devez cliquer sur la section « Couleur » pour la déplier. Ensuite, vous devez cliquer sur l’option « Arrière-plan ».

Une fenêtre surgissante vous permet de sélectionner une couleur unie ou un dégradé. Il y aura également un certain nombre de couleurs que vous pourrez sélectionner. Lorsque vous cliquez sur une couleur, l’arrière-plan de votre en-tête est immédiatement modifié.

Vous trouverez d’autres options de personnalisation en cliquant sur l’icône « Styles » en haut à droite de la page. Vous pourrez ainsi modifier la police, les couleurs et la mise en page de l’en-tête.

Pour en savoir plus sur le fonctionnement de l’éditeur de site complet, consultez notre guide du débutant sur la façon de personnaliser votre thème WordPress.

Outil de personnalisation des en-têtes et des mises en page avec SeedProd

Si vous souhaitez avoir un contrôle total sur vos en-têtes, pieds de page et colonnes latérales pour donner à votre site un design unique, nous vous recommandons d’utiliser SeedProd.

SeedProd est le meilleur plugin de construction de thème WordPress qui vous autorise à créer facilement un thème WordPress personnalisé sans écrire le moindre code. Cela inclut la création d’en-têtes, de pieds de page et de tout ce qui est nécessaire pour un thème WordPress attrayant.

Vous pouvez même créer plusieurs styles d’en-têtes personnalisés pour différentes pages et sections de votre site.

Note : Vous pouvez utiliser la version gratuite de SeedProd pour créer des pages d’atterrissage personnalisées, y compris des en-têtes personnalisés, mais vous aurez besoin de la version Pro pour créer des thèmes entièrement personnalisés qui incluent des mises en page d’en-têtes à l’échelle du site.

Tout d’abord, nous vous recommandons de suivre notre guide sur la façon de créer facilement un thème WordPress personnalisé sans aucun code. Une fois que vous avez fait cela, SeedProd facilite la personnalisation de votre en-tête.

Il vous suffit de cliquer sur le lien « Modifier le dessin ou modèle » qui se trouve sous l’en-tête.

Cela ouvrira l’en-tête dans l’éditeur/éditrices de SeedProd.

À partir de là, vous pouvez facilement personnaliser votre en-tête en ajoutant de nouveaux blocs.

Il existe des blocs pour les marqueurs de modèles tels que le logo du site, n’importe lequel de vos widgets WordPress, et des blocs avancés tels qu’un compte à rebours, un menu de navigation ou des boutons de partage social.

La meilleure partie est que vous pouvez personnaliser davantage chaque bloc à l’aide du constructeur de thème. Par exemple, vous pouvez modifier la taille et l’alignement de votre logo ou choisir les pages à afficher dans le menu de navigation. Il vous permet même d’ajouter une image dans l’en-tête.

Avec SeedProd, vous pouvez également ajouter une section complète au modèle d’en-tête de votre thème.

Les sections sont un groupe de blocs, et vous pouvez les utiliser pour différentes zones de votre site. Cela inclut les en-têtes, les pieds de page, les fonctionnalités, les témoignages, les appels à l’action, et plus encore.

Pour utiliser une section d’en-tête, passez d’abord à l’onglet « Sections » dans le panneau Conception.

Ensuite, choisissez une section d’en-tête que vous souhaitez utiliser pour votre site. SeedProd propose plusieurs modèles de sections que vous pouvez utiliser.

Ensuite, allez-y et personnalisez la section de l’en-tête.

Une fois que vous êtes satisfait de votre en-tête personnalisé, cliquez sur le bouton « Enregistrer » pour stocker vos modifications.

Vous êtes maintenant prêt à publier votre en-tête personnalisé.

Allez simplement sur la page  » Constructeur de Thème  » de SeedProd depuis votre Tableau de bord WordPress et cliquez sur le permuter à côté de l’option  » Enable SeedProd Theme  » (Activer le thème SeedProd) sur Oui.

Une fois l’option activée, SeedProd remplacera votre thème WordPress par défaut par un nouveau thème personnalisé et un en-tête.

Vous pouvez maintenant visiter votre site pour voir le nouvel en-tête personnalisé en action.

Créer des en-têtes personnalisés différents pour chaque page

Saviez-vous qu’en utilisant SeedProd, vous pouvez créer des en-têtes personnalisés pour différentes pages ?

Le constructeur de thème vous permet d’ajouter des en-têtes personnalisés pour chaque page de votre site WordPress. De cette façon, vous pouvez afficher un en-tête personnalisé pour différentes catégories, identifications, types de publications, types de pages, et plus encore.

Pour commencer, vous devrez vous rendre sur SeedProd  » Theme Constructeur depuis votre tableau de bord WordPress et cliquer sur le bouton  » Add New Theme Modèle « .

Une nouvelle fenêtre surgissante apparaît, dans laquelle vous devez saisir les détails du modèle de thème.

Saisissez un nom pour votre modèle de thème. Choisissez ensuite « En-tête » comme type de modèle dans le menu déroulant. Vous pouvez laisser le champ « Priorité » vide.

En-tête, vous devrez saisir les conditions d’affichage de votre en-tête personnalisé. Par exemple, nous avons utilisé les conditions où il s’affichera sur toutes les publications et pages qui sont dans la catégorie des tutoriels.

N’oubliez pas de cliquer sur le bouton « Enregistrer » lorsque vous avez terminé.

Après cela, vous pouvez aller de l’avant et modifier l’en-tête personnalisé en utilisant le constructeur de thème drag and drop SeedProd.

Lorsque vous avez fini de modifier l’en-tête personnalisé, cliquez simplement sur le bouton « Enregistrer » en haut de la page.

Vous pouvez voir plus d’idées sur la façon de personnaliser votre en-tête en utilisant SeedProd dans notre guide du débutant sur la façon de créer facilement un thème WordPress personnalisé en utilisant le constructeur de thème SeedProd.

Ajout d’un en-tête personnalisé pour chaque catégorie

La plupart des sites affichent le même en-tête sur toutes les publications, pages, catégories et pages d’archives. Cependant, vous pouvez afficher un en-tête différent pour chaque catégorie WordPress.

Cela peut être fait en ajoutant du code aux fichiers de votre thème, mais vous aurez plus de contrôle en utilisant un constructeur de thème.

Nous vous avons montré précédemment comment personnaliser votre en-tête à l’aide du plugin de construction de thème SeedProd. SeedProd vous permet également de créer plusieurs en-têtes personnalisés et de les afficher pour différentes catégories à l’aide d’une logique conditionnelle.

Pour créer un nouvel en-tête, vous devez naviguer dans SeedProd  » Theme Constructeur et cliquer sur le bouton orange  » Ajouter un nouveau modèle de thème « . Vous pouvez également dupliquer votre en-tête actuel et l’utiliser comme point de départ.

Une fenêtre surgissante s’affiche pour vous permettre de donner un nom au modèle de thème et de sélectionner « En-tête » dans le menu déroulant Type.

Vous devez également saisir une priorité. Celle-ci est utilisée si plusieurs en-têtes remplissent les conditions pour une page donnée, et l’en-tête ayant la plus grande priorité sera affiché. L’en-tête par défaut a une priorité de 0. Veillez donc à saisir une priorité de 1 ou plus.

Ensuite, vous devrez configurer une ou plusieurs conditions. Cela permet à SeedProd de savoir quand afficher un certain en-tête. Il vous suffit de sélectionner les conditions dans des menus déroulants.

Dans les deux premiers menus, vous devez sélectionner « Inclure », puis « A une catégorie ». Dans le dernier champ, vous devez saisir le nom de la catégorie dans laquelle vous souhaitez que l’en-tête soit affiché.

Vous pouvez facilement afficher le même en-tête pour plusieurs catégories en cliquant sur le bouton « Ajouter une condition » et en incluant une autre catégorie. Confirmez votre choix en cliquant sur le bouton « Enregistrer » pour enregistrer le nouvel en-tête.

Vous pouvez maintenant personnaliser le design de chaque nouvel en-tête en utilisant l’éditeur par glisser/déposer de SeedProd, comme nous vous l’avons affiché plus tôt.

Pour en savoir plus, notamment sur la façon de procéder à l’aide de code, consultez notre guide sur la façon d’ajouter un en-tête, un pied de page ou une colonne latérale personnalisés pour chaque catégorie.

Ajouter une zone de widgets à votre en-tête WordPress

Si vous construisez un thème personnalisé à partir de zéro en utilisant du code, alors vous pourriez chercher à ajouter un widget WordPress à votre en-tête pour attirer l’attention de vos internautes. Les widgets vous permettent d’ajouter facilement des blocs de contenu à des sections spécifiques de votre thème, mais tous les thèmes n’incluent pas une zone de widget d’en-tête.

Nous avons mentionné précédemment à quel point il est simple d’ajouter des widgets à votre en-tête en utilisant le constructeur de thème SeedProd. Mais que faire si vous souhaitez ajouter un widget à l’en-tête d’un thème WordPress normal ?

Certains thèmes, comme le thème Astra, vous permettent de le faire en utilisant le personnalisateur de thème de WordPress. Par exemple, Astra ajoute une option appelée  » Constructeur d’en-tête  » qui vous permet de personnaliser complètement l’en-tête, notamment en y ajoutant des widgets.

Si votre thème WordPress ne dispose pas actuellement d’une zone de widgets WordPress dans l’en-tête, vous devrez l’ajouter manuellement en ajoutant le code suivant à votre fichier functions.php, dans un plugin spécifique au site, ou en utilisant un plugin d’extraits de code.

Il s’agit d’une option plus avancée, car vous devrez savoir où placer le code et comment le styliser à l’aide de CSS.

function wpb_widgets_init() {
 
    register_sidebar( array(
        'name'          => 'Custom Header Widget Area',
        'id'            => 'custom-header-widget',
        'before_widget' => '<div class="chw-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="chw-title">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'wpb_widgets_init' );

Ce code inscrit une nouvelle colonne latérale ou une zone prête à accueillir des widgets pour votre thème.

Si vous allez dans Apparence  » Widgets, vous verrez une nouvelle zone de widgets libellée  » Zone de widgets personnalisés dans l’en-tête « . Vous pouvez maintenant ajouter vos widgets à cette nouvelle zone.

Enfin, vous devez ajouter du code au Modèle d’en-tête de votre thème, situé dans le fichier header.php de votre thème. Cela ajoutera la zone de widgets que vous avez créée plus tôt à votre en-tête afin que les widgets soient affichés sur votre site.

Vous devez copier cet extrait de code et le coller à l’endroit où vous souhaitez que le widget s’affiche.

<?php
 
if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
    <?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>
 
<?php endif; ?>

En fonction de votre thème, il se peut que vous deviez également ajouter du CSS à WordPress pour contrôler l’affichage de la zone du widget.

Pour plus de détails, consultez notre guide sur l ‘ajout d’un widget WordPress à l’en-tête de votre site.

Ajouter des images d’en-tête aléatoires à votre blog WordPress

Une autre façon de rendre vos en-têtes WordPress plus attrayants est d’ajouter des images aléatoires à la section de l’en-tête.

Afficher des images qui se modifient de manière aléatoire aide à capter l’attention de vos internautes et à rendre votre contenu plus attrayant.

Pour ajouter des images d’en-tête aléatoires à votre blog WordPress, vous pouvez utiliser l’Outil de personnalisation du thème et téléverser des images dans la section de l’en-tête. Cette option peut varier en fonction du thème WordPress que vous utilisez.

Sélectionné ensuite l’option « Randomize uploaded headers » (randomiser les en-têtes téléversés).

Si vous voulez plus de contrôle et de flexibilité pour afficher des images aléatoires dans la section de l’en-tête, alors vous pouvez également utiliser une extension WordPress.

Pour plus de détails, consultez notre guide sur l ‘ajout d’images d’en-tête aléatoires sur votre blog WordPress.

Ajouter du code à l’en-tête de votre site (avancé)

Enfin, si vous souhaitez ajouter un code personnalisé à la section de l’en-tête de votre site, vous pouvez le faire facilement à partir de votre Tableau de bord WordPress. Cette méthode est recommandée pour les utilisateurs/utilisatrices avancés et ne convient pas aux débutants car elle requiert de modifier le code et nécessite des connaissances techniques.

Vous pouvez trouver les fichiers d’en-tête de votre thème en allant dans Apparence  » Éditeurs/éditrices de fichiers de thème à partir du panneau d’administration de WordPress. Dans les fichiers de thème  » style.css « , vous pouvez défiler vers le bas jusqu’à la section de l’en-tête du site et ajouter ou retirer du code.

Note : Nous ne vous recommandons pas de modifier directement les fichiers du thème, car la moindre erreur peut casser votre site et en gâcher le design.

Un moyen plus facile d’ajouter du code personnalisé pour modifier l’en-tête de votre site est d’utiliser WPCode.

Tout d’abord, installez et activez l’extension gratuite WPCode. Pour plus de détails, veuillez consulter notre guide sur l’installation d’une extension WordPress.

Une fois activé, vous pouvez vous rendre dans Code Snippets  » Header & Footer depuis votre Tableau de bord WordPress. Saisissez ensuite le code personnalisé dans la section  » En-tête « .

Après avoir saisi/saisie le code, cliquez sur le bouton « Enregistrer les modifications ».

Pour plus de détails, vous pouvez consulter notre guide sur l’ajout de code d’en-tête et de pied de page dans WordPress.

Nous espérons que ce tutoriel vous a aidé à apprendre à personnaliser votre en-tête WordPress. Vous voudrez peut-être aussi apprendre comment choisir le meilleur logiciel de conception web, ou consulter notre liste de plugins incontournables pour faire grandir votre site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.