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

Voulez-vous afficher un en-tête personnalisé pour votre site Web 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 pour 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 des pages spécifiques.

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

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

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

Par exemple, voici notre zone d'en-tête sur WPBeginner que des millions de lecteurs voient 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 visiteurs. Vous pouvez créer un lien vers vos pages les plus populaires, afficher des icônes sociales ou votre numéro de téléphone professionnel et afficher des boutons d'appel à l'action pour davantage de conversions.

Cela dit, voyons comment personnaliser facilement votre en-tête WordPress. Vous pouvez utiliser les liens suivants pour accéder à la section que vous souhaitez lire.

• Personnaliser l'en-tête à l'aide du personnalisateur de thème WordPress
• Personnaliser l'en-tête à l'aide de l'éditeur de site complet WordPress
• Créer des en-têtes et des mises en page personnalisés avec SeedProd
• Ajout d'un en-tête personnalisé pour chaque catégorie
• Ajouter une zone de widget à 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 Web (avancé)

Personnaliser l'en-tête à l'aide du personnalisateur de thème WordPress

De nombreux thèmes WordPress populaires vous permettent d'utiliser le personnalisateur de thème WordPress pour apporter des modifications à la zone d'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 prennent pas en charge.

Vous devriez 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 sous la section "Couleur", mais cela varie d'un thème à l'autre. Voici quelques exemples.

Certains thèmes, comme Twenty Twenty-One, n'offrent aucune option de personnalisation d'en-tête. Dans ce cas, nous vous recommandons d'utiliser un plugin de création de thème par glisser-déposer 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 de thème. Par exemple, vous pourrez peut-être modifier le style de police, la mise en page, les couleurs de votre en-tête et bien plus encore. Mais vous êtes limité à ce que le développeur de 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 a une option dédiée "Header Builder" dans le panneau sur votre gauche. Vous trouverez ici différents paramètres pour modifier l'apparence et le style de l'en-tête. Vous pouvez créer un en-tête personnalisé en ajoutant des blocs, comme lors de la modification d'un article de blog ou d'une page dans l'éditeur de contenu WordPress.

Pour commencer, survolez simplement une zone vide dans l'en-tête et cliquez sur l'icône « + » pour ajouter un bloc d'en-tête.

Ensuite, 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, etc.

De plus, le générateur d'en-tête vous permet également de faire glisser et de déposer les blocs et de les placer au-dessus ou en 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 et logo du site, vous aurez la possibilité de télécharger un titre et un logo de site, de modifier la largeur du logo, d'afficher un slogan de site, etc.

En plus de cela, vous pouvez également modifier la couleur d'arrière-plan de l'en-tête ou ajouter une image d'arrière-plan à afficher dans l'en-tête.

Lorsque vous avez terminé 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.

Personnaliser l'en-tête à l'aide de l'éditeur de site complet WordPress

WordPress a ajouté l'édition complète du site à WordPress dans la version 5.9. Si votre thème prend en charge la nouvelle fonctionnalité, il remplace le personnalisateur de thème. 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 accédant à Apparence » Éditeur . Cela lancera l'éditeur de site complet, qui ressemble à l'éditeur de blocs que vous utilisez pour écrire des articles 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 devient « En-tête de page ».

Maintenant, lorsque vous cliquez sur l'icône "Paramètres" dans la barre d'outils, vous verrez des options pour personnaliser la disposition, la couleur, la bordure et les dimensions de l'en-tête.

Par exemple, nous allons changer la couleur d'arrière-plan de l'en-tête. Tout d'abord, vous devez cliquer sur la section "Couleur" pour la développer. Après cela, vous devez cliquer sur l'option "Arrière-plan".

Une fenêtre contextuelle apparaîtra vous permettant 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 sera immédiatement modifié.

Vous pouvez trouver plus d'options de personnalisation en cliquant sur l'icône "Styles" en haut à droite de la page. Cela vous permettra de 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 personnalisation de votre thème WordPress.

Créer des en-têtes et des mises en page personnalisés avec SeedProd

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

SeedProd est le meilleur plugin de création de thème WordPress qui vous permet de créer facilement un thème WordPress personnalisé sans écrire de 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ête personnalisés pour différentes pages et sections de votre site Web.

Remarque : Vous pouvez utiliser la version gratuite de SeedProd pour créer des pages de destination 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ête sur tout le 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 simplifie la personnalisation de votre en-tête.

Tout ce que vous avez à faire est de cliquer sur le lien "Modifier le design" situé sous l'en-tête.

Cela ouvrira l'en-tête dans l'éditeur glisser-déposer de SeedProd.

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

Il existe des blocs pour les balises de modèle comme un logo de site, l'un 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 générateur 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 Web. Cela inclut les en-têtes, les pieds de page, les fonctionnalités, les témoignages, les appels à l'action, etc.

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

Après cela, choisissez une section d'en-tête que vous souhaitez utiliser pour votre site Web. SeedProd propose plusieurs modèles de section que vous pouvez utiliser.

Ensuite, allez-y et personnalisez la section d'en-tête.

Une fois que vous êtes satisfait de votre en-tête personnalisé, assurez-vous de cliquer sur le bouton "Enregistrer" pour enregistrer vos modifications.

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

Accédez simplement à la page SeedProd » Theme Builder de votre tableau de bord WordPress et cliquez sur le bouton à côté de l'option « Activer le thème SeedProd » sur Oui.

Une fois que vous avez activé l'option, SeedProd remplacera votre thème WordPress par défaut par un nouveau thème et un en-tête personnalisés.

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

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

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

Le générateur de thèmes vous permet d'ajouter des en-têtes personnalisés pour chaque page de votre site Web WordPress. De cette façon, vous pouvez afficher un en-tête personnalisé pour différentes catégories, balises, types de publication, types de page, etc.

Pour commencer, vous devrez vous rendre sur SeedProd » Theme Builder depuis votre tableau de bord WordPress et cliquer sur le bouton « Ajouter un nouveau modèle de thème ».

Une nouvelle fenêtre contextuelle apparaîtra dans laquelle vous devrez entrer les détails du modèle de thème.

Allez-y et entrez un nom pour votre modèle de thème. Après cela, choisissez "En-tête" comme type de modèle dans le menu déroulant. Vous pouvez laisser le champ 'Priorité' vide.

Ensuite, vous devrez entrer les conditions d'affichage de votre en-tête personnalisé. Par exemple, nous avons utilisé les conditions où il s'affichera sur tous les articles et pages de la catégorie tutoriels.

N'oubliez pas de cliquer sur le bouton "Enregistrer" lorsque vous avez terminé.

Après cela, vous pouvez continuer et modifier l'en-tête personnalisé à l'aide du générateur de thème par glisser-déposer SeedProd.

Lorsque vous avez terminé de modifier l'en-tête personnalisé, cliquez simplement sur le bouton "Enregistrer" en haut.

Vous pouvez voir plus d'idées sur la façon de personnaliser votre en-tête à l'aide de SeedProd dans notre guide du débutant sur la façon de créer facilement un thème WordPress personnalisé à l'aide du générateur de thème SeedProd.

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

La plupart des sites Web affichent le même en-tête sur tous les articles, 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 à vos fichiers de thème, mais vous aurez plus de contrôle en utilisant un générateur de thème.

Nous vous avons montré plus tôt comment personnaliser votre en-tête à l'aide du plugin de création 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 en utilisant une logique conditionnelle.

Pour créer un nouvel en-tête, vous devez accéder à SeedProd » Theme Builder et cliquer sur le bouton orange « Ajouter un nouveau modèle de thème ». Alternativement, vous pouvez dupliquer votre en-tête actuel et l'utiliser comme point de départ.

Une fenêtre contextuelle s'affichera dans laquelle vous pourrez donner un nom au modèle de thème et sélectionner "En-tête" dans le menu déroulant Type.

Vous devez également entrer une priorité. Ceci est utilisé si plus d'un en-tête remplit les conditions pour une certaine page, et l'en-tête avec la plus grande priorité sera affiché. L'en-tête par défaut a une priorité de 0, alors assurez-vous d'entrer 1 ou plus.

Après cela, vous devrez configurer une ou plusieurs conditions. Cela permet à SeedProd de savoir quand afficher un certain en-tête. Vous sélectionnez simplement les conditions dans les menus déroulants.

Dans les deux premiers menus, vous devez sélectionner 'Include' puis 'Has Category'. Dans le dernier champ, vous devez saisir le nom de la catégorie dans laquelle vous souhaitez afficher l'en-tête.

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. Lorsque vous avez terminé, assurez-vous de cliquer sur le bouton "Enregistrer" pour enregistrer le nouvel en-tête.

Vous pouvez maintenant personnaliser la conception de chaque nouvel en-tête à l'aide de l'éditeur glisser-déposer de SeedProd, comme nous vous l'avons montré précédemment.

Pour en savoir plus, y compris comment 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 barre latérale personnalisés pour chaque catégorie.

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

Si vous créez un thème personnalisé à partir de zéro en utilisant du code, vous cherchez peut-être à ajouter un widget WordPress à votre en-tête pour capter l'attention de vos visiteurs. Les widgets vous permettent d'ajouter facilement des blocs de contenu à des sections spécifiques de votre thème, mais tous les thèmes ne comprennent 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 à l'aide du générateur de thème SeedProd. Mais que se passe-t-il 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 WordPress. Par exemple, Astra ajoute une option appelée "Header Builder" qui vous permet de personnaliser complètement l'en-tête, y compris l'ajout de widgets.

Si votre thème WordPress n'a pas actuellement de zone de widget 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 code plug-in d'extraits.

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 enregistre une nouvelle barre latérale ou une zone prête pour le widget pour votre thème.

Si vous allez dans Apparence » Widgets , vous verrez alors une nouvelle zone de widget intitulée « Zone de widget d'en-tête personnalisé ». Maintenant, vous pouvez 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 widget que vous avez créée précédemment à votre en-tête afin que les widgets soient affichés sur votre site Web.

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; ?>

Selon votre thème, vous devrez peut-être également ajouter du CSS à WordPress pour contrôler l'affichage de la zone du widget.

Pour plus de détails, consultez notre guide sur la façon d'ajouter un widget WordPress à l'en-tête de votre site Web.

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 consiste à ajouter des images aléatoires à la section d'en-tête.

L'affichage d'images qui changent de manière aléatoire permet de capter l'attention de vos visiteurs et de rendre votre contenu plus attrayant.

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

Ensuite, allez-y et sélectionnez l'option "Randomiser les en-têtes téléchargés au hasard".

Si vous souhaitez plus de contrôle et de flexibilité pour afficher des images aléatoires dans la section d'en-tête, vous pouvez également utiliser un plugin WordPress.

Pour plus de détails, consultez notre guide sur la façon d'ajouter des images d'en-tête aléatoires à votre blog WordPress.

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

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

Vous pouvez trouver les fichiers d'en-tête de votre thème en allant dans Apparence » Éditeur de fichiers de thème depuis le panneau d'administration de WordPress. Dans les fichiers de thème "style.css", vous pouvez faire défiler jusqu'à la section d'en-tête du site et ajouter ou supprimer du code.

Remarque : Nous vous déconseillons de modifier directement les fichiers de thème, car la moindre erreur peut casser votre site Web et gâcher la conception.

Un moyen plus simple d'ajouter du code personnalisé pour modifier l'en-tête de votre site consiste à utiliser le plug-in Insérer des en-têtes et des pieds de page.

Tout d'abord, installez et activez le plugin Insert Headers and Footers. Pour plus de détails, veuillez consulter notre guide sur la façon d'installer un plugin WordPress.

Lors de l'activation, vous pouvez accéder à Paramètres » Insérer des en-têtes et des pieds de page à partir de votre tableau de bord WordPress. Ensuite, entrez le code personnalisé dans la section "Scripts dans l'en-tête".

Après avoir saisi le code, enregistrez vos modifications.

Pour plus de détails, vous pouvez consulter notre guide sur la façon d'ajouter du 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 également apprendre à choisir le meilleur logiciel de conception Web ou consulter notre liste de plugins indispensables pour développer votre site.

Si vous avez aimé cet article, veuillez vous abonner à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.