Formation « Développer un thème WordPress sur mesure »

L’en-tête et le pied de page

Lecture : 5 minutes • 37

L’en-tête et le pied de page d’un site sont les éléments qui ne changent en général jamais d’une page à une autre. Afin d’éviter toute répétition de code, on va les envoyer dans leur propre fichier.

Dans le cours précédent, on a tout mis dans index.php, mais comme on s’apprête à le voir, il va y avoir au final plusieurs fichiers en fonction des cas de figures.

Par exemple, à terme, on appellera single.php pour afficher un article, et page.php pour afficher le contenu d’une page.

Pourtant sur le site, l’en-tête et le pied de page ne devraient pas changer d’une page à l’autre.

En programmation, l’un des concepts les plus importants est DRY : Don’t Repeat Yourself.

Séparer l’en-tête et le pied de page du reste

On va donc isoler le haut et le bas du site dans des fichiers à part afin d’éviter toute répétition de code dans la suite de la formation.

Je vous invite alors à créer 2 nouveaux fichiers à la racine de votre thème :

  • header.php : où l’on mettra la base du HTML et le haut du site ;
  • footer.php : où l’on mettra le bas du site et les balises fermantes de notre page.

Dans header on vient placer ce code :

PHP
header.php

Puis dans footer :

PHP
footer.php

C’est le strict minimum nécessaire pour le moment et on pourra agrémenter à terme en fonction des besoins.

Du coup, on va pouvoir modifier index.php et appeler nos nouveaux fichiers grâce à 2 fonctions fournies nativement par WordPress :

PHP
index.php

Testez, vérifiez le code source de la page afin de vérifier si votre en-tête et pied de page sont bien correctement appelés :

Rendu du site avec les fichiers header et footer séparés
En haut, la barre d’administration fait son apparition. Dans le code, plein de nouveau HTML

Si la manipulation a bien fonctionné, vous devriez voir apparaitre la barre d’administration WordPress (en noir en haut du site) et le titre dans l’onglet du navigateur. Concernant le code de la page via l’inspecteur, on remarque qu’il y a bien plus de HTML que ce qu’on en a écrit ! C’est dû aux fonctions que l’on vient d’ajouter et que l’on va analyser juste après.

Conseil

À l’avenir, vous n’êtes pas obligé de vous arrêter après le <body> : le but c’est aussi d’y mettre le HTML du haut du site (logo, menu…) .


De manière générale, on utilisera les fonctions get_header() et get_footer() sur tous les templates de page que l’on créera par la suite avec WordPress.

Découverte de nouvelles fonctions WordPress

Je reviens sur le code que l’on a écrit plus haut. Comme vous avez pu le remarquer on a ajouté quelques fonctions de WordPress dans notre HTML.

Dans le header

PHP
header.php

Tout d’abord, on remarque la fonction language_attributes() qui permet de définir automatiquement la langue du document. Cette valeur est basée sur le réglage WordPress dans Réglages > Général > Langue du site.

Vient ensuite la fonction bloginfo('charset') qui permet de définir l’encodage du site. Par défaut c’est UTF-8 et c’est très bien comme ça : votre site prendra en charge les caractères spéciaux, accents, caractères non-latins…

Cette fonction nous permettra de récupérer d’autres informations utiles pour notre site.

Le saviez-vous ?

La fonction bloginfo est une très vieille fonction de WordPress, à l’époque où ce dernier était encore considéré comme une plateforme de blogging.

Je continue pour tomber sur une fonction wp_head() qui a une importance capitale : c’est par cette fonction que WordPress, votre thème et les extensions vont pouvoir venir déclarer le chargement des scripts et des styles. On verra un peu plus tard comment en tirer parti.

Attention

Cette fonction est essentielle au bon fonctionnement de votre thème alors ne l’oubliez pas !

D’ailleurs c’est via cette fonction que WordPress va venir écrire la balise <title> que l’on a activé dans le functions.php dans le cours précédent.

Ensuite, la fonction body_class() nous permet d’obtenir des noms de classe CSS en fonction de la page visitée, ce qui pourra nous faciliter la création de nos styles.

Lorsque l’on observe le code HTML généré on obtient alors :

HTML

La langue est définie sur fr-FR, l’encodage sur UTF-8, et dans les body classes on peut voir :

  • home car on est sur la page d’accueil ;
  • blog car par défaut la page d’accueil de WordPress affiche les derniers articles (on pourra changer ce réglage) ;
  • logged-in car on est un utilisateur connecté ;
  • admin-bar car la barre d’administration est affichée en haut du site.

Cette dernière classe nous sera très utile si on veut faire un menu fixe en position absolue ou fixe : la barre d’admin va décaler le site de 32px vers le bas (sa propre hauteur). On pourra donc appliquer un style de ce genre pour compenser :

CSS
styles.css

La classe home vous permettra d’appliquer des styles différents des autres pages par exemple. On reverra ça plus tard, mais au moins vous avez compris leur utilité. D’ailleurs rien ne vous oblige à utiliser la fonction body_class(). Mais si vous le faites, pensez à ne pas réutiliser ces noms de classe proposés par WordPress afin d’éviter des conflits de styles.

Enfin, la fonction wp_body_open() a été ajoutée dans WordPress 5.2 afin de permettre à des extensions d’écrire du code au début du body. C’est utile notamment pour Yoast qui vient y placer le Google Tag Manager et autres codes de scripts.

Pour finir, on retrouve simplement dans le pied de page une fonction wp_footer() :

PHP
footer.php

Il a exactement le même rôle que wp_head() : afficher des scripts (et styles) mais cette fois en bas de page.

Le saviez-vous ?

En terme de performances, il est plus intéressant de charger en priorité les fichiers CSS (donc en haut de page) et reléguer les scripts en bas de page. Le JS n’est en réalité exécuté seulement lorsque la page est « prête » pour le navigateur, donc inutile de les charger trop tôt.

Pour conclure, ne confondez pas get_header() qui permet d’appeler le fichier d’en-tête et wp_head() qui permet de récupérer les scripts et styles.

Ajouter un logo en haut du site

On va profiter du fichier header.php pour ajouter la partie haute du site, qui ne bougera jamais d’une page à l’autre.

Pour l’instant on va ajouter simplement un logo. Plus tard on mettra également un menu.

Le fichier header.php affiche désormais le logo en haut du site
Ça prend forme, petit à petit !

Tout d’abord on va créer un dossier /img/ à la racine du thème, et poser notre logo au format SVG à l’intérieur (ou format PNG, comme vous voulez).

Conseil

Travaillez toujours dans la mesure du possible avec des SVG pour les logos, icônes et illustrations sur votre site. Le format vectoriel est moins lourd pour ce genre d’images et surtout ne pixelise pas.

Ajoutez ensuite le code suivant dans le body :

PHP
header.php

Vous n’aurez pas le logo centré car on n’a pas encore ajouté de CSS, mais vous devriez pouvoir cliquer dessus, ce qui vous ramène à l’accueil du site grâce à la fonction home_url().

On utilise la fonction get_template_directory_uri() afin d’obtenir l’adresse absolue (c’est-à-dire complète) du logo. Sans ça, votre image ne s’affichera pas.

En regardant le code (clic droit, afficher le code source de la page) on voit bien l’url vers l’accueil ainsi que l’url de mon image :

HTML

On peut bien sûr étoffer à volonté cet en-tête et c’est d’ailleurs ce que l’on fera à terme.


Maintenant que l’on a bien séparé l’en-tête et le pied de page du reste du site, on va pouvoir continuer. Avant de rendre notre site dynamique, il va nous falloir de la matière. Dans le prochain cours on va générer du faux contenu en un clic.

37

Questions, réponses et commentaires

  1. Romain

    Le 11 septembre 2019

    Bonjour,
    Dans cet exemple le logo est uploadé directement dans un dossier img sans passer par la bibliothèque Media de WordPress. En dehors du confort utilisateur (pour le client) y’a-t-il une raison de préférer cette façon ou est-ce une mauvaise pratique ?
    Merci et bravo pour ce cours.
    (J’attends la suite :))

    1. Maxime BJ

      Le 12 septembre 2019

      Oui en effet pour mes clients j’avais pour habitude de mettre un logo svg qui n’était pas administrable (après tout la plupart du temps, ils n’ont pas besoin de cette fonctionnalité). Mais si tu veux le faire bien il faut rendre le logo administrable depuis l’outil de personnalisation WordPress qui dispose d’une option pour le logo et l’icône du site (favicon). Pour le mettre en place, c’est facile : https://developer.wordpress.org/themes/functionality/custom-logo/

  2. Ken

    Le 31 janvier 2020

    Merci pour ces tutos jusque là!!! Vivement tes cours en prenium!!

  3. Ken

    Le 31 janvier 2020

    Bonjour Maxime!

    Peut être question bête mais comment as tu généré le fichier HTML ?

    Merci de ta réponse!

    1. Maxime BJ

      Le 23 mars 2021

      C’est WordPress qui s’occupe de ça ! C’est son rôle après tout !

  4. briceA

    Le 23 février 2020

    bonjours

    J’ai un problème, quand j’appelle mon logo dans mon header celui-ci ne s’affiche pas, il y a bien une zone avec la taille du logo qui s’affiche à l’écran et quand je clique dessus ça me redirige bien vers la page d’accueil.

    1. Maxime BJ

      Le 24 février 2020

      Est-ce que tu es sûr de ton URL ? Le nom de fichier n’a pas de caractères spéciaux ?

      1. Uzzi

        Le 28 juillet 2022

        Bonsoir Maxime !
        J’ai même problème. Et pourtant dans mon cas tout est correcte.

        1. Maxime BJ

          Le 28 juillet 2022

          Il faut vérifier dans l’inspecteur du navigateur s’il n’indique pas une erreur 404 sur le logo ! Si c’est le cas, c’est que l’URL n’est pas bonne.

  5. Denis

    Le 26 mars 2020

    Bonjour,
    Pour avoir galéré pas mal à essayer de comprendre pourquoi j’avais le mot logo en lien mais pas l’image ?
    Réponse : j’ai téléchargé un fichier image sur google indiqué svg en nom d’extension. Mais il ne s’affichait pas du fait que le fichier enregistré n’avait pas l’extension svg !!! L’extension était en png…

    1. Maxime BJ

      Le 26 mars 2020

      Oui en effet il est important de respecter le type de l’image, car le navigateur ne se laisse pas avoir. Si ce n’est pas le cas, demande à ton système d’exploitation de toujours afficher l’extension des fichiers dans l’explorateur.

  6. Eugeneboss

    Le 6 mai 2020

    Merci pour tuto. Avez vous un forum ?
    Merci d,avance de me repondre.

    1. Maxime BJ

      Le 6 mai 2020

      Non, Mais il existe des communautés WordPress. Je les présente ici.

  7. Jena

    Le 30 mai 2020

    Bonjour j’aimerais savoir comment on peut faire pour créer deux header différents dans wordpress (c’est à dire, que le header de ma page d’accueil est différent des autres pages)

    1. Maxime BJ

      Le 31 mai 2020

      Tu peux créer un second header qui s’appellerait header-home.php et dans ta page d’accueil, tu écriras get_header( 'home' );

  8. kader

    Le 10 mai 2021

    Bonjour pour le header et le footer je ne vois rien c’est normal ?

    1. Maxime BJ

      Le 10 mai 2021

      Si tu as bien suivi le cours à la lettre, ce n’est pas normal en effet.

  9. Steven LM

    Le 27 mai 2021

    Bonjour Maxime,
    J’ai suivi à la lettre le cours.

    Concernant le logo vectorielle, je vois sur ton screen qu’il est responsive.
    Comment as-tu fait ?

    Merci pour ces cours en tout cas, ça me motive à me lancer dans mes propres thèmes !

    Cordialement,

    1. Maxime BJ

      Le 27 mai 2021

      Dans tout projet web, tu dois indiquer ceci en début de CSS :
      img {
      max-width: 100%;
      height: auto;
      }
      Ainsi, toutes les images seront responsive naturellement.

  10. Thomas

    Le 19 janvier 2022

    Bonjour et merci pour cette formation !
    Faut-il faire appel au fichier style.css dans le header.php ? Cette méthode est-elle correcte ?

    1. Maxime BJ

      Le 19 janvier 2022

      Il ne faut pas charger les styles et les scripts en dur. Comme il y a des extensions qui sont chargées, il pourrait y avoir des soucis d’ordre. WordPress a mis en place un système pour centraliser l’enregistrement des scripts et des styles, et j’en parle plus loin dans la formation. Tu peux consulter ce cours pour en savoir plus : https://capitainewp.io/formations/developper-theme-wordpress/charger-les-scripts-et-les-styles

  11. carvalho brian

    Le 23 janvier 2022

    Bonjour et merci pour la formation
    Petit probleme pour moi le CSS ne charge pas enfin j’ai mon logo mais j’ai la marge je pense de 32px qui n’est pas coller a la navbar et vu les commentaires le style.css ne doit pas etre mis en dur.
    Pouvez vous m’aider ?

    1. Maxime BJ

      Le 24 janvier 2022

      Oui tout à fait, c’est dans le cours « Charger les scripts et les styles » que l’on va voir comment charger correctement sa feuille de style. Je t’invite donc à continuer la lecture de la formation, on va pas tarder à aborder le sujet.

      1. carvalho brian

        Le 24 janvier 2022

        Tres bien merci

  12. pascalb67200

    Le 3 avril 2022

    Bonjour

    Problème(s) rencontré(s) :
    j ai créer une page avec une galerie nextgen diaporama.(5 photos)

    j ai recopié le code html (2X) dans le header.php

    ca fonctionne très bien quand on affiche la page d’accueil mais j ai 1 soucis:
    soit le header s’affiche correctement avec diaporama
    soit les 5 photos s’affiche l’une en dessous de l’autre (au premier plan de la page ) cf image2

    qu’ai je pu faire de faux ?

    je vous remercie d’avance de votre aide et du temps que vous y passerez.

    pascal

    1. Maxime BJ

      Le 4 avril 2022

      Salut Pascal. Je doute que le header soit le bon endroit pour insérer une galerie. Je ne pourrais hélas pas plus t’aider car insérer une galerie via une extension n’est pas le but de cette formation. Au contraire d’ailleurs, on veut justement se passer au maximum d’extensions. Je t’invite à consulter la documentation de l’extension directement, tu y trouveras sûrement ta réponse.

  13. Jean-Loup

    Le 30 août 2022

    Bonjour,

    J’ai bien créé mon header et mon footer qui s’affichent proprement mais un problème persiste.
    Tout mon contenu reste collé en haut de la page et reste derrière le header.
    J’ai beau appliqué du CSS mais il est soit pas pris en compte, soit le header est impacté également..
    Existe-t-il une façon de le faire avec WP ?
    Merci pour ta réponse i

    1. Maxime BJ

      Le 30 août 2022

      Je pense que c’est une problématique purement liée au CSS. Dans ce cours on a simplement appris à afficher le HTML de l’en-tête, du pied de page et du contenu. Il est probable qu’une balise (div?) soit mal fermée. C’est souvent ce qui créé les décalages dans la page. L’inspecteur de code du navigateur devrait t’aider.

  14. Damien

    Le 1 avril 2023

    Bonjour, question bete mais ou trouve t-on le logo ?

    1. Maxime BJ

      Le 3 avril 2023

      Je ne suis pas sûr de comprendre le sens de ta question. Tu peux placer le logo où tu veux dans le dossier du thème, et comme on le voit dans le cours, tu vas ensuite l’afficher grâce à la fonction get_template_directory_uri() suivi du chemin vers ce logo.

  15. Laurent

    Le 1 septembre 2023

    bonjour,

    est-il possible de réaliser un thème wordpress en full JS ou React ?

    1. Maxime BJ

      Le 1 septembre 2023

      Oui tout à fait, on parlera de headless. Je n’aborde pas cet aspect sur ce site, mais pour avoir essayé, ça marche bien. En gros, WordPress sera uniquement consommé à partir de son API, et tu installerais un framework comme NextJS ou GatsbyJS pour créer ton code React et générer les pages statiques.

  16. bog

    Le 3 septembre 2023

    Bonjour,
    nous ne voyons pas le menu hamburger.
    Comment l’ajouter ?

    1. Maxime BJ

      Le 3 septembre 2023

      Le burger menu est un montage purement en CSS, c’est pour ça qu’il n’est pas abordé ici. Le but est de cacher/afficher les éléments et changer les styles par rapport aux média queries. Il y a pas mal de tutos sur le net à ce sujet. Toi tu as juste besoin dans un premier temps de faire un menu classique avec WordPress et de l’afficher, puis ensuite c’est CSS qui fera la magie.

      1. bog

        Le 4 septembre 2023

        Oui mais faut quand même le lier header afin d’ouvrir les pages du menu…

        1. Maxime BJ

          Le 4 septembre 2023

          La fonction de menu WordPress va créer les URL des pages automatiquement, et générer tout le HTML pour ce menu. Si ton menu desktop fonctionne déjà, il ne te reste qu’à afficher du CSS.

      2. bog

        Le 3 septembre 2023

        Ok merci, il me reste plus qu’à…

Laisser un commentaire