4 méthodes simples (3 sans code)

L'en-tête est le premier élément de votre site Web que la plupart des visiteurs voient. En règle générale, c'est là que le logo et le menu de votre site sont placés, et cela fait partie intégrante de chaque page. Si vous ne savez pas comment modifier l'en-tête WordPress, vous aurez du mal ️ à faire une bonne première impression.

WordPress vous permet de modifier l'en-tête de votre site de plusieurs manières. Presque tous les thèmes sont livrés avec une conception d'en-tête unique, que vous pouvez personnaliser manuellement. Alternativement, vous pouvez utiliser un éventail d'outils fournis par la plus grande communauté WordPress.

Dans cet article, nous allons vous montrer quatre façons de modifier l'en-tête WordPress , avec et sans plugins. Mettons-nous au travail!

Table des matières:

1. Modifier l'en-tête à l'aide du Customizer
2. Utiliser l'édition complète du site (et un thème compatible)
3. Modifier l'en-tête à l'aide d'un constructeur de page WordPress
4. Ajouter un code personnalisé à l'en-tête à l'aide d'un plugin

1. Modifiez l'en-tête à l'aide du Customizer

Le WordPress Customizer est un outil intégré qui vous permet de modifier les éléments globaux de votre site Web. Vous pouvez utiliser l'outil de personnalisation pour modifier l'en-tête, le pied de page, la typographie, les menus et d'autres aspects clés de votre site.

Pour accéder au Customizer, rendez-vous sur votre tableau de bord et cliquez sur Apparence > Personnaliser . Le Customizer affichera un menu d'options à gauche et un aperçu de votre site Web à droite :

Notez que si vous ne voyez pas l'option WordPress Customizer dans votre tableau de bord, vous utilisez peut-être un thème activé par bloc. Pour modifier l'en-tête de ce type de thème, vous devez utiliser l'édition complète du site, que nous aborderons dans la section suivante.

Dans le Customizer, vous devriez voir une option liée à votre en-tête. Parfois, cela peut être visible tout de suite, comme dans l'exemple ci-dessus. D'autres fois, vous devrez peut-être accéder à un sous-menu. Par exemple, certains thèmes placent les options d'en-tête dans les options de mise en page ou quelque chose de similaire.

Une fois que vous avez trouvé les options d'en-tête de votre thème, les choix que vous voyez maintenant dépendront du thème que vous utilisez. Par exemple, notre thème Neve inclut des options pour changer votre logo, la couleur de l'en-tête et quel menu s'affiche dans cette section :

Neve propose également une sélection d'éléments que vous pouvez ajouter à l'en-tête à l'aide de la fonctionnalité glisser-déposer. Sélectionnez l'un des éléments sous Composants disponibles et faites-le glisser dans les lignes d'en-tête au bas de l'outil de personnalisation. Neve vous permet d'ajouter jusqu'à trois lignes d'éléments pour un en-tête et de placer les éléments dans n'importe quelle position :

Lorsque vous êtes satisfait de la configuration de votre en-tête, enregistrez les modifications apportées à votre thème en cliquant sur le bouton Publier en haut du Customizer.

Notez que toutes les modifications que vous apportez à l'aide de l'outil de personnalisation ne s'appliqueront qu'à votre thème actif. Si vous changez de thème, vous devrez à nouveau modifier l'en-tête WordPress.

2. Utilisez l'édition complète du site (et un thème compatible)

L'édition complète du site est une fonctionnalité plus récente qui vous permet d'éditer des modèles de thème à l'aide de l'éditeur de blocs. Cela ne fonctionne que pour les thèmes activés par bloc, il peut donc être disponible ou non sur votre site.

Pour voir si votre thème prend en charge l'édition complète du site, ouvrez le menu Apparence et recherchez l'option Éditeur :

Sélectionnez cela l'option et l'éditeur de blocs s'ouvrira. Cependant, vous modifierez vos modèles de thème plutôt que vos pages ou publications individuelles.

Par défaut, l'éditeur s'ouvrira sur le modèle de page d'accueil, qui devrait inclure un élément Header :

Notez que certains blocs n'apparaîtront que comme espaces réservés lorsque vous utilisez l'édition complète du site. C'est parce que cet outil n'est pas destiné à éditer des blocs individuels, mais des mises en page entières.

Lors de la modification de l'en-tête, vous obtenez un contrôle total sur les blocs et les éléments à inclure. Si vous ouvrez l'outil d'affichage en liste , vous pouvez voir une répartition des blocs que l'en-tête contient actuellement :

À ce stade, vous pouvez choisir d'ajouter ou de supprimer des blocs de l'en-tête. Pour supprimer ou modifier un bloc existant, sélectionnez-le et utilisez le menu contextuel qui apparaît à l'écran lorsque vous le faites :

Lorsque vous sélectionnez un bloc, vous pouvez également le modifier à l'aide de l' outil Bloc menu des paramètres sur le côté droit de l'écran. Ce menu contient généralement des options de style, et elles varient en fonction du bloc que vous modifiez :

Pour ajouter un nouveau bloc, sélectionnez l'élément En- tête et recherchez l'icône du signe plus . Ce bouton ouvrira un menu qui vous permettra de sélectionner le bloc à ajouter :

Une autre fonctionnalité utile de l'éditeur de site complet est que vous pouvez modifier visuellement les menus. Pour cela, il suffit de sélectionner un menu à l'aide du bloc Navigation . Vous verrez l'option d'ajouter de nouveaux liens, de créer un nouveau menu et de permuter entre les liens existants :

Lorsque vous êtes satisfait des modifications apportées à votre en-tête, cliquez sur Enregistrer . Cela enregistrera les modifications apportées au modèle d'en-tête du thème et elles seront automatiquement répercutées sur votre site Web.

3. Modifiez l'en-tête à l'aide d'un constructeur de page WordPress

Certains plugins de création de pages WordPress offrent des options pour modifier l'en-tête WordPress. Par exemple, Elementor Pro inclut un outil Theme Builder auquel vous pouvez accéder avec une licence premium.

Si vous n'avez pas accès à Elementor Pro, vous pouvez utiliser une extension tierce gratuite, telle que le plugin Elementor Header & Footer Builder sur WordPress.org.

Nous allons cependant vous montrer comment le faire en utilisant Elementor Pro et sa fonction Theme Builder.

En pratique, le générateur de thèmes Elementor fonctionne de la même manière que l'édition complète du site.

Pour accéder au générateur de thèmes, accédez à Modèles > Générateur de thèmes . Sélectionnez les options d'en- tête sous SITE PARTS et recherchez les modèles existants à droite. Il ne devrait y avoir qu'un seul modèle d'en-tête, et vous pouvez cliquer sur le bouton Modifier à côté :

Cela lancera l'éditeur Elementor. À partir de là, vous pouvez choisir de créer l'en-tête à l'aide de blocs Elementor ou d'importer des modèles prêts à l'emploi. Si vous cliquez sur l'icône de dossier dans le corps de l'éditeur, vous pouvez voir à quels modèles d'en-tête vous avez accès :

Si vous utilisez Elementor, nous vous recommandons de tirer parti de ces modèles. Cela vous permet d'expérimenter plusieurs styles d'en-tête, que vous pouvez modifier en ajoutant ou en personnalisant des modules :

Si vous n'êtes pas familier avec l'utilisation d'Elementor, ce constructeur de page vous permet de sélectionner des modules à l'aide du menu de gauche. Vous pouvez faire glisser ces modules sur votre page, qui apparaît dans un aperçu sur le côté droit de l'écran.

Lorsque vous utilisez le générateur de thèmes, vous ne modifiez qu'un modèle de thème spécifique. Cependant, vous pouvez toujours utiliser la gamme complète de modules et d'options de configuration proposés par Elementor.

Une fois que vous avez terminé de modifier le modèle d'en-tête, enregistrez-le à l'aide du bouton Publier . Ensuite, Elementor vous demandera de choisir sur quelles pages le template doit s'afficher :

À moins que vous ne payiez déjà pour une licence Elementor premium, l'outil Theme Builder peut ne pas justifier l'achat à lui seul. Il fait exactement ce que fait l'édition complète du site, mais à un coût supérieur. La principale différence est que vous pouvez utiliser le plus large éventail de modules d'Elementor, et si vous utilisez déjà Elementor, il sera plus facile de vous assurer que la conception de votre en-tête est cohérente avec le reste de votre site.

4. Ajoutez un code personnalisé à l'en-tête à l'aide d'un plugin

En règle générale, l'utilisation de plugins est le moyen le plus simple d'implémenter des personnalisations dans WordPress. Cependant, ce n'est généralement pas le cas avec les en-têtes. Si vous voulez un plugin qui vous permette de modifier visuellement les en-têtes, vous devrez utiliser un constructeur de page. La plupart des constructeurs de pages qui offrent cette fonctionnalité sont payants, comme nous l'avons vu dans la section précédente.

Les plugins gratuits qui vous permettent de personnaliser l'en-tête n'offrent généralement qu'un moyen plus simple d'y ajouter du code personnalisé. L'alternative consiste à modifier manuellement vos fichiers de thème à l'aide d'un thème enfant, ce qui peut être intimidant (et risqué) à moins que vous n'ayez une expérience en développement Web.

Un exemple fantastique d'un tel plugin est Header Footer Code Manager. Cet outil vous permet d'ajouter des extraits HTML, CSS et JavaScript à l'en-tête et/ou au pied de page, et de choisir sur quelles pages ces extraits seront chargés :

Une fois le plug-in actif, accédez à la page HFCM > Ajouter de nouveaux extraits dans le tableau de bord. Ici, vous pouvez sélectionner le type d'extrait que vous souhaitez ajouter, où il doit être affiché et si vous souhaitez l'ajouter à l'en-tête ou au pied de page :

Si vous envisagez d'ajouter de nouveaux éléments à l'en-tête, vous devrez utiliser HTML. Pour modifier le style de l'en-tête et des éléments qu'il contient, vous souhaiterez utiliser des extraits CSS.

Le principal inconvénient de cette approche est que vous devez vérifier le code d'en-tête pour voir quelles classes et quels identifiants il utilise, afin de leur ajouter du CSS. Cela peut prendre du temps lorsque vous ajoutez de nouveaux extraits de code, vérifiez si les modifications fonctionnent et modifiez le code jusqu'à ce que vous soyez satisfait des résultats.

Personnalisez l'en-tête WordPress aujourd'hui

Avez-vous des questions sur la façon de modifier votre en-tête dans WordPress ? Parlons d'eux dans la section des commentaires ci-dessous!