Pour mettre en place l’en-tête et le pied de page de votre thème WordPress, vous pouvez suivre ces étapes :
- Créez un fichier appelé header.php dans le répertoire de votre thème. Ce fichier contiendra le code HTML et les éléments de l’en-tête de votre site. Par exemple, vous pouvez inclure le logo, le menu de navigation, les balises meta, etc.
- Créez un fichier appelé footer.php dans le répertoire de votre thème. Ce fichier contiendra le code HTML et les éléments du pied de page de votre site. Par exemple, vous pouvez inclure les informations de copyright, les liens de navigation supplémentaires, etc.
- Maintenant, vous pouvez inclure l’en-tête et le pied de page dans le fichier index.php (ou dans d’autres fichiers de modèle) en utilisant les fonctions
get_header()etget_footer().
Voici un exemple de structure de base pour le fichier header.php :
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<header>
<!-- Votre contenu d'en-tête ici -->
</header>Le code ci-dessus inclut les balises <html>, <head> et ouvre la balise <body>.
Les fonctions language_attributes() et bloginfo('charset') permettent d’ajouter les attributs de langue (cette valeur est définie dans Réglages > Général, puis Langue du site) et de jeu de caractères (par défaut, ce sera UTF-8).
La fonction bloginfo() permet d’obtenir de nombreuses informations concernant le site web. Voir la documentation officielle.
La fonction wp_head() est utilisée pour inclure les scripts, les styles et autres éléments nécessaires à l’en-tête (les extensions peuvent se greffer sur cette fonction pour déclarer le chargement de leurs propres scripts et styles).
La fonction body_class() permet d’obtenir le nom des classes CSS à intégrer en fonction des pages visitées.
| Classe CSS | Description |
|---|---|
| home | Page d’accueil |
| blog | Par défaut, la page d’accueil affiche les derniers articles |
| logged-in | Dans le cas d’un utilisateur connecté |
| admin-bar | Si la barre d’administration du site doit être affichée |
La fonction wp_body_class() présente depuis WordPress 5.2 permet maintenant aux extensions d’ajouter du code au début de la balise HTML <body>.
Attention ! La barre d’administration décale l’affichage du site web de 32 px.
Voici un exemple de structure de base pour le fichier footer.php :
<footer>
<!-- Votre contenu de pied de page ici -->
</footer>
<?php wp_footer(); ?>
</body>
</html>Le code ci-dessus ferme la balise <footer> et inclut la fonction wp_footer(), qui est utilisée pour inclure les scripts et les éléments nécessaires au pied de page.
Astuce : en termes de performances, il peut parfois être conseillé de charger vos fichiers de script JS en pied de page (ces derniers n’étant exécutés que lorsque la page est complétement chargée).
Voici un exemple de structure de base pour le fichier index.php :
<?php
get_header();
?>
<div id="content">
<!-- Votre contenu de page ici -->
</div>
<?php
get_footer();
?>Si la manipulation a fonctionné, vous devriez voir apparaître la barre d’administration noire en haut de page, ainsi que le titre du site web dans l’onglet de votre navigateur web.
Si vous inspectez le code source, vous devriez voir apparaître plus de HTML !
Ajouter un logo statique
Vous pouvez faire un petit test complémentaire en ajoutant un répertoire img à l’intérieur du dossier de votre thème et positionner un fichier SVG ou PNG qui correspondra à votre logo.
Conseil : travaillez de préférence avec un format SVG (vectorialisé) qui ne pixelisera pas lors d’un redimensionnement.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<header class="header">
<!-- Votre contenu d'en-tête ici -->
<a href="<?php echo home_url( '/' ); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.svg" alt="Logo">
</a>
</header>La fonction home_url() permet de rendre cliquable le logo et de renvoyer vers la page d’accueil du site web.
La fonction get_template_directory_uri() permet d’obtenir le chemin absolu vers le fichier image correspondant au logo.
Ceci donnera comme résultat : https://{monsite.fr}/wp-content/themes/{montheme}/img/logo.svg
