Comment personnaliser les en-têtes dans WordPress: Guide du débutant

Vous cherchez un moyen facile de personnaliser l’en-tête WordPress?

Parce que votre en-tête se trouve en haut de chaque page, il joue un rôle essentiel dans l’image de marque de votre site Web, aidant vos visiteurs à naviguer et promouvant votre contenu le plus important.

Cependant, pour tirer le meilleur parti de l’en-tête de votre site, vous avez besoin d’un moyen de le modifier, ce que de nombreux thèmes n’offrent pas.

Dans cet article, nous allons partager différentes tactiques que vous pouvez utiliser pour personnaliser l’en-tête dans WordPress en utilisant à la fois de simples interfaces de glisser-déposer et votre propre code.

L’option la plus simple consiste à utiliser le thème Astra et son générateur d’en-têtes par glisser-déposer, mais nous partagerons également d’autres tactiques qui fonctionneront avec n’importe quel thème WordPress.

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

L’en-tête WordPress est la partie de votre site qui apparaît en haut de chaque page. Typiquement, il comprend au moins deux éléments au strict minimum:

• Logo/ identité du site
• Menu(s) de navigation)

Par exemple, voici à quoi ressemble l’en-tête sur le blog Astra. Vous pouvez voir qu’il comprend le logo Astra, ainsi que deux menus de navigation distincts:

Selon vos besoins, vous pouvez également inclure d’autres éléments tels que des icônes de médias sociaux, une boîte de recherche, des promotions, votre numéro de téléphone et d’autres informations.

Si jamais vous avez besoin de voir comment cela fonctionne, l’en-tête WordPress est contenu dans l’en-tête.fichier php dans votre thème WordPress.

Comment personnaliser l’en-tête WordPress Avec Astra

Si vous voulez un contrôle total sur votre en-tête WordPress, le thème gratuit Astra vous offre un moyen de glisser-déposer sans code pour personnaliser entièrement votre en-tête WordPress.

Vous pourrez voir vos modifications immédiatement sur un aperçu en direct de votre site Web et vous pourrez facilement ajouter différents types de contenu, tels que des boutons, des icônes sociales, une boîte de recherche, etc.

Pour commencer, vous devrez installer et activer le thème Astra. Vous pouvez également importer l’un des centaines de sites de démonstration prédéfinis pour être rapidement opérationnel. Si vous avez besoin d’un coup de main pour l’une de ces étapes, nous avons de nombreux guides pour vous aider:

• Comment installer Astra
• Comment importer des sites de démarrage

Une fois que votre site de base est prêt à fonctionner, voici comment personnaliser votre en-tête à l’aide d’Astra.

1. Ouvrez le générateur d’en-têtes Astra

Pour commencer, allez dans Apparence → Personnaliser dans votre tableau de bord WordPress pour lancer le personnalisateur WordPress natif. Ensuite, sélectionnez l’option Générateur d’en-tête:

Une fois que vous avez lancé le générateur d’en-têtes, vous verrez un nouvel ensemble d’options vous permettant de contrôler la disposition de votre en-tête:

2. Ajoutez et organisez le contenu de l’en–tête

Maintenant pour la partie amusante – ajouter du contenu. Vous pouvez voir que vous avez trois lignes dans le générateur d’en-tête. Chaque ligne contrôle le contenu d’une partie différente de l’en-tête:

1. Au–dessus de l’en-tête
2. En-tête principal – c’est là que vous placerez votre contenu « principal ».
3. En-dessous de l’en-tête

Vous voudrez absolument inclure du contenu dans l’en-tête principal, puis vous avez la possibilité d’ajouter du contenu au-dessus ou en dessous selon vos besoins.

Pour ajouter du contenu, vous pouvez cliquer à l’endroit où vous souhaitez ajouter du contenu. Cela ouvrira un ensemble d’options:

• Menu principal
• Menu secondaire
• Logo
• Bouton
• Recherche
• Social
• HTML 1
• HTML 2

Notez que, lorsque vous ajoutez du contenu, vous verrez moins d’options. Par exemple, vous ne pouvez ajouter votre logo qu’une seule fois, de sorte que cette option disparaîtra une fois que vous aurez déjà ajouté un logo à votre en-tête:

Une fois que vous avez ajouté du contenu, vous pouvez cliquer sur ce contenu pour ouvrir ses paramètres. Par exemple, si vous ajoutez un bouton, vous pourrez contrôler le texte et le lien du bouton.

Vous pouvez également ouvrir les paramètres de conception pour personnaliser davantage les choses:

Si vous souhaitez réorganiser votre contenu ou le déplacer vers une ligne différente, il vous suffit de le glisser-déposer:

3. Personnaliser la disposition de l’en-tête

Ci-dessus, nous vous avons montré comment personnaliser les éléments individuels à l’intérieur de votre en-tête. Vous avez également plusieurs options pour personnaliser votre en-tête dans son ensemble.

Tout d’abord, vous pouvez accéder à l’onglet Conception du générateur d’en-tête principal pour contrôler la largeur et l’espacement de votre en-tête. Vous pouvez également cliquer sur l’icône d’engrenage de chaque ligne d’en-tête pour personnaliser sa hauteur et son design:

4. Expérimentez différents types d’en-têtes

Selon que vous utilisez la version gratuite d’Astra ou d’Astra Pro, vous aurez également accès à d’autres types d’en-têtes, tels que les en-têtes transparents (gratuits) et les en-têtes collants (Pro).

Vous pouvez utiliser le même générateur d’en-tête et de pied de page ci-dessus pour concevoir votre en-tête transparent ou collant. Vous verrez ces options sous la section Types d’en-tête. Vous pouvez cliquer dessus pour développer les paramètres et concevoir ces différents types d’en-tête:

Trois autres façons de personnaliser l’en-tête WordPress

Bien que le générateur d’en-tête par glisser-déposer d’Astra offre le moyen le plus simple de personnaliser l’en-tête WordPress, il existe également d’autres tactiques que vous pouvez utiliser, quel que soit le thème que vous utilisez.

Voici quelques-unes des meilleures stratégies

1. Utilisez les paramètres de personnalisation de votre thème

La plupart des thèmes WordPress vous permettent de contrôler l’en-tête de votre site dans le personnalisateur WordPress natif. Il est peu probable que vous obteniez le niveau de détail qu’Astra vous donne, mais vous aurez quelques options pour contrôler l’apparence et les fonctions de votre en-tête.

Ces options varient en fonction de votre thème, mais vous pouvez généralement les ouvrir en cliquant sur l’icône en forme de crayon bleu à côté des éléments de votre en-tête. Par exemple, dans le nouveau thème par défaut Twenty Twenty-One, vous pouvez voir que vous êtes en mesure de personnaliser votre:

• Logo
• Titre du site
• Menu

Si vous avez besoin d’aide supplémentaire, vous pouvez consulter la documentation de votre développeur de thème.

2. Utilisez Elementor et un plugin d’en-tête personnalisé gratuit

Si vous n’êtes pas familier avec Elementor, c’est un outil de conception visuel par glisser-déposer que vous pouvez utiliser pour créer du contenu sur votre site. Avec le plugin WordPress gratuit d’en–tête Elementor, Footer & Blocks Template custom header, vous pouvez utiliser la version gratuite d’Elementor pour concevoir votre propre en-tête personnalisé WordPress.

Ce plugin fonctionne parfaitement avec le thème gratuit Astra, ainsi que tout autre thème WordPress que vous pourriez utiliser.

Pour commencer, installez et activez le plugin gratuit de WordPress.org . Vous devrez également installer la version gratuite d’Elementor si vous ne l’avez pas déjà fait.

Une fois que vous avez fait cela, allez dans Apparence → Pied de page d’en-tête & Blocs et cliquez sur Ajouter un nouveau:

Donnez un nom à votre modèle et choisissez En-tête sous Type de modèle. Vous pouvez également utiliser les options Afficher sur ou Rôles d’utilisateur pour cibler votre en-tête sur un contenu/des utilisateurs spécifiques.

Ensuite, Publiez votre en-tête et cliquez sur Modifier avec Elementor pour ouvrir le générateur visuel:

Maintenant, vous pouvez personnaliser entièrement votre en-tête à l’aide de l’interface visuelle glisser-déposer d’Elementor. Le plugin vous donne également un nouvel en-tête, un pied de page & Bloque les widgets que vous pouvez utiliser pour ajouter des éléments importants du site, comme le logo de votre site ou un menu de navigation:

Pour en savoir plus sur l’utilisation d’Elementor, consultez notre tutoriel complet d’Elementor ou notre revue d’Elementor.

3. Utilisez le code personnalisé (Avancé)

Enfin, si vous êtes un utilisateur avancé, vous pouvez également personnaliser l’en-tête WordPress en utilisant votre propre code. Pour ce faire, vous aurez besoin d’au moins une connaissance pratique de HTML, PHP et CSS, ce n’est donc pas une option pour les utilisateurs non techniques.

Si vous ne connaissez pas ces langages de codage, vous voudrez vous en tenir à l’une des méthodes précédentes de cette liste.

Il y a deux parties à l’utilisation du code pour personnaliser votre en-tête:

• HTML /PHP – cela contrôle le contenu réel de votre en-tête.
• CSS – contrôle le style de votre en-tête.

Comme nous l’avons mentionné précédemment, le contenu de l’en-tête de votre site réside dans l’en-tête.fichier php. Donc, pour personnaliser le contenu de votre en-tête, vous devrez travailler directement avec ce fichier. Ou, certains thèmes, tels que Astra, offrent également des crochets que vous pouvez utiliser pour ajouter du contenu à l’en-tête.

Dans le guide des crochets visuels Astra, vous pouvez voir que vous avez un certain nombre d’options pour personnaliser l’en-tête:

Si vous souhaitez modifier l’en-tête de votre thème.fichier php directement, vous devez utiliser un thème enfant pour vous assurer de ne pas écraser vos modifications lorsque vous mettez à jour votre thème.

D’autre part, si vous utilisez des hooks, vous n’avez pas besoin d’utiliser un thème enfant tant que vous utilisez un plugin comme des Hooks Astra ou des extraits de code. Si vous ajoutez vos hooks directement aux fonctions de votre thème.fichier php, vous devriez toujours utiliser un thème enfant, cependant.

Avec Astra Pro, vous avez également la possibilité d’ajouter des crochets à l’aide de la fonctionnalité de mise en page personnalisée d’Astra Pro.

La particularité des mises en page personnalisées d’Astra Pro est que vous pouvez utiliser des règles d’affichage pour contrôler exactement quand les modifications s’affichent. Par exemple, vous pouvez ajouter du contenu personnalisé à votre en-tête qui n’apparaît que pour les utilisateurs connectés.

Voici comment personnaliser le contenu de votre en–tête – mais qu’en est-il du style?

Pour personnaliser le style de votre en-tête, vous pouvez modifier le style.fichier css directement si vous utilisez un thème enfant. Vous pouvez également utiliser la zone CSS supplémentaire du personnalisateur WordPress pour ajouter vos propres styles personnalisés à l’en-tête.

Personnalisez Votre En-tête WordPress Dès aujourd’hui

Votre en-tête WordPress joue un rôle essentiel dans le succès de votre site. Il aide à marquer votre site Web, à guider vos visiteurs vers du contenu clé, à promouvoir des informations importantes ou des profils sociaux, et bien plus encore.

Le moyen le plus simple de prendre le contrôle total de l’en-tête de votre site est d’utiliser le thème gratuit Astra. Avec Astra, vous avez accès à un générateur d’en-têtes visuel par glisser-déposer. Vous n’avez pas besoin de code ou de plugins externes – vous aurez le contrôle à 100% de votre en-tête directement à l’intérieur du personnalisateur WordPress.

Dans d’autres situations, vous pouvez également utiliser les paramètres de personnalisation d’un thème différent, le plugin de modèle Elementor–Header, Footer &Blocks, ou votre propre code si vous avez les connaissances techniques.