1 - Création du fichier header.php
<!DOCTYPE html>
<html language_attributes(); >
<head>
<meta charset=« <?php bloginfo(‘charset’); ?> »>
<meta name=« viewport » content=« width=device-width, initial-scale=1.0 »>
<title> wp_title(‘|’, true, ‘right’); </title>
wp_head(); </head>
<body body_class(); >
<header>
<!– C’est ici que vous allez insérer votre code d’en-tête
Logo, menu de navigation, bannière, etc. –>
</header>
Le fichier header.php que nous venons de créer est un élément essentiel de votre thème WordPress personnalisé. Pour l’utiliser dans vos modèles de page, vous pouvez ajouter la ligne suivante :
<?php get_header(); ?>
à vos fichiers de modèle (comme « single.php », « page.php », etc.) à l’endroit où vous souhaitez inclure l’en-tête :
2 - Personnalisation du fichier header.php
1 - Ajout de la fonction register
Dans votre fichier functions.php ajoutez le code suivant pour enregistrer un menu de navigation personnalisé.
function theme_register_nav_menu() {
register_nav_menu(‘menu-header, ‘Menu principal’);
// ‘menu-header‘ est le nom du menu,
‘Menu principal’ est la description
}
add_action(‘after_setup_theme’, ‘theme_register_nav_menu’);
2 - Ajout de la fonction wp_nav_menu
Pour afficher le menu que vous avez enregistré dans votre modèle, vous pouvez utiliser la fonction wp_nav_menu() dans votre fichier header.php (ou tout autre modèle où vous souhaitez afficher le menu).
<?php
wp_nav_menu(array(
‘theme_location’ => ‘menu-header’,
// // Utilisez le même nom que celui que vous avez enregistré précédemment
‘menu_class’ => ‘menu-class’,
// On ajoute une classe CSS pour le menu
));
?>
Pour afficher le menu que vous avez enregistré dans votre modèle, vous pouvez utiliser la fonction wp_nav_menu() dans votre fichier header.php (ou tout autre modèle où vous souhaitez afficher le menu). Puis dans l’administrateur, ajoutez votre menu à l’emplacement ‘Menu principal’ .
3 - Personnalisation du header et du CSS
Voici un exemple de code pour votre header :
Et voici un exemple de code CSS :
Le rendu :
En suivant ce tutoriel, vous avez appris comment créer un fichier header.php personnalisé pour votre thème WordPress. Vous avez découvert comment organiser votre contenu, ajouter des éléments de navigation et personnaliser l’apparence de votre en-tête en utilisant du code CSS.
Il est important de noter que les possibilités sont infinies lorsqu’il s’agit de personnaliser votre en-tête. Vous pouvez jouer avec les couleurs, les polices, les images de fond, et bien plus encore. N’hésitez pas à expérimenter pour créer un en-tête qui correspond parfaitement à l’image que vous souhaitez projeter pour votre site WordPress.
Maintenant que vous avez terminé la création de votre en-tête, je vous invite à passer à la prochaine étape de ce tutoriel : la création du footer (pied de page). Le footer est une autre partie essentielle de votre site web où vous pouvez afficher des informations importantes comme les coordonnées de contact, les liens vers les réseaux sociaux, ou tout autre contenu pertinent pour vos visiteurs.
Rendez-vous à la prochaine étape pour continuer à personnaliser votre thème WordPress et à rendre votre site unique et attrayant.