Créer un thème WordPress – 6 – L’en-tête de page

Cette fois ci, on commence le code, le vrai, le dur 😛 ! Rassurez-vous, encore une fois rien de compliqué. Je prendrai le temps qu'il faut pour vous expliquer chaque étape du code.

Nous allons commencer dans l'ordre avec l'en-tête de page, donc le fichier header.php, qui une des parties les plus simples dans un thème WordPress.

head

Si vous vous rappelez bien du découpage des fichiers, vous savez qu'on ne place pas seulement notre div#en-tete-page dans ce fichier, mais bien tout le haut de la page, y compris le doctype, ou encore la section head, sur laquelle nous allons nous concentrer dans un premier temps.

Que mettre dans le head ?

Dans cette section, on trouve toutes les méta-informations sur le site, c'est à dire des informations liées au contenu mais qui n'en font pas partie à proprement parler. Nous allons donc y trouver des infos sur la langue utilisée sur le site, sur l'auteur, sur l'encodage des fichiers, un titre de page, ou encore tous les liens vers les feuilles de styles, les scripts ou les flux Rss.

L'avantage ici, c'est que WordPress va faire quasiment tout le sale boulot pour nous, à travers quelques fonctions Php. Si vous avez déjà utilisé WordPress, vous savez que l'on peut définir beaucoup de paramètres comme le langage, l'encodage etc. Nous allons donc récupérer ces paramètres grâce à ces fonctions.

Pour vous les expliquer, je vais vous donner un code commenté plutôt que plein de petits morceaux entrecoupés d'explications; ça me paraît plus simple à suivre. Voici donc le code de la section head :

<!DOCTYPE html>

<!--
     La fonction language_attributes( ) ajoute un attribut 'dir' (sens de lecture) et 'lang' (langage d'écriture) à la balise html.
     Elle utilise les paramètres que l'administrateur a définis pour leur donner une valeur.
     Le paramètre 'xhtml' lui dit que l'on utilise le langage XHtml et qu'elle doit formater les attributs pour ce langage.
-->
<html <?php language_attributes( 'xhtml' ); ?>>
     <head>
          <!--
               Cette balise meta définit l'encodage des caractères sur la page.
               Pour récupérer l'encodage défini par l'administrateur, on utilise une fonction très importante dans WordPress : bloginfo( ).
               Cette fonction affiche une valeur associée à une chaîne passée en paramètre.
               Pour compléter notre balise, on va avoir besoin du type de langage utilisé ('html_type') et du jeu de caractères ('charset').
          -->
          <meta http-equiv="content-type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php bloginfo( 'charset' ); ?>" />

          <title>
               <?php
                    /**
                     *   On souhaite afficher ici un titre de la forme 'Accueil | Nom du blog', ou 'Nom d'article | Nom du blog', etc
                     */

                    if ( is_home( )) {
                         /**
                          *   Si on est sur la page d'accueil, ce qu'on sait grâce à is_home( ), on l'affiche.
                          */
                         echo 'Accueil | ';
                    } else {
                         /**
                          *   Comme son nom l'indique, cette fonction affiche le titre de la page.
                          *   Si c'est un article, son titre, si c'est une catégorie, son nom, etc.
                          *   Le premier paramètre est une chaîne à afficher avant ou après le titre.
                          *   Le deuxième indique que la fonction doit afficher le titre.
                          *   Le troisième qu'on veut afficher la chaîne passée en premier paramètre à droite du titre.
                          */
                         wp_title( ' | ', true, 'right' );
                    }

                    /**
                     *   On utilise une nouvelle fois la fonction bloginfo( ) pour récupérer le nom du blog.
                     */
                    bloginfo( 'name' );
               ?>
          </title>

          <!--
               Il faut maintenant faire le lien avec la feuille de style, les flux Rss et l'adresse de pingback.
               Encore une fois, on utilise la fonction bloginfo( ) qui nous donne décidément tout ce que l'on veut.
          -->
          <link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
          <link rel="alternate" type="application/rss+xml" href="<?php bloginfo( 'rss2_url' ); ?>" title="derniers articles" />
          <link rel="alternate" type="application/rss+xml" href="<?php bloginfo( 'comments_rss2_url' ) ?>" title="derniers commentaires" />
          <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

          <!--
               Et voici la dernière étape : laisser WordPress ajouter tout son bazar :).
               J'entends par là tout les scripts utilisés par les plugins etc.
               Heureusement, la fonction wp_head( ) fait tout ça pour nous !
          -->
          <?php wp_head( ); ?>
     </head>

En cadeau, si vous voulez en savoir plus, je vous offre généreusement la documentation des fonctions utilisées 🙂 :

body

Voilà ! Maintenant que l'on a correctement rempli la section head, on va enfin pouvoir écrire du code sympa, du code qui se voit ! Même principe ici : un jouli code tout commenté pour vous !

<!--
     La fonction body_class( ) ajoute des attributs class à la balise body suivant la situation.
     Par exemple, elle ajoute la classe 'single' quand un article est affiché.
     Cette fonction n'est pas utile pour tout le monde, voyez si votre design peut en tirer parti...
-->
<body <?php body_class( ); ?>>
     <div id="en-tete-page">
          <!--
               La partie 'banniere' va simplement contenir le nom et la description du blog.
               Encore une fois, on utilise bloginfo( ) pour récupérer ces informations.
          -->
          <div id="banniere">
               <h1><a href="<?php bloginfo( 'home' ); ?>" title="accueil"><?php bloginfo( 'name' ); ?></a></h1>
               <p><?php bloginfo( 'description' ); ?></p>
          </div>

          <!--
               Ce menu est utilisé par les personnes qui naviguent par tabulations,
               ou à travers des navigateurs en mode texte.
               Il propose juste des liens vers les grandes sections du blog.
               Si vous ne souhaitez pas faire apparaître ce menu, vous pouvez le cacher avec Css,
               mais il est préférable de le laisser dans le code pour des questions d'accessibilité.
          -->
          <div id="acces">
               <ul>
                    <li><a href="#menu">Aller au menu</a></li>
                    <li><a href="#contenu">Aller au contenu</a></li>
                    <li><a href="#sidebar">Aller à la barre latérale</a></li>
                    <li><a href="#pied-page">Aller au pied de page</a></li>
               </ul>
          </div>

          <!--
               Le menu principal de navigation.
          -->
          <div id="menu">
               <?php
                    /**
                     *   Si WordPress supporte les menus personnalisés, on en propose un.
                     *   Dans le cas contraire, on affiche la liste des pages plus un lien vers la page d'accueil.
                     *   Si vous n'utilisez ce thème qu'avec WordPress 3.x, vous pouvez supprimer le test
                     *   et n'utiliser que wp_nav_menu.
                     *   Si vous voulez seulement une liste des pages du site, n'utilisez que wp_page_menu( ).
                     */
                    if ( current_theme_supports( 'menus' )) {
                         wp_nav_menu( array( 'menu' => 'principal' ));
                    } else {
                         wp_page_menu( array( 'show_home' => 'Accueil', 'sort_column' => 'menu_order' ));
                    }
               ?>
          </div>
     </div>

     <!--
          Début de la page.
     -->
     <div id="page">

Nouvelles fonctions utilisées :

Si vous utilisez wp_nav_menu( ), vous allez devoir le signaler à WordPress. Pour ce faire, il faut effectuer un petit ajout au fichier functions.php, vous savez, cette sorte de fichier de configuration de votre thème.

<?php
     if ( function_exists( 'register_nav_menu' )) {
          register_nav_menu( 'principal', 'Menu principal' );
     }
?>

Encore une fois, si vous êtes sûr de n'utiliser que WordPress 3.x, vous pouvez supprimer le test et utiliser directement register_nav_menu( ).

Après tout ça, affichez votre blog et vous allez voir une magnifique en-tête 😛 ! Sans aucun style... Mais admettez-le, c'est déjà bien !

Allez, maintenant que vous commencez à comprendre les rouages de WordPress, passons à l'étape supérieure !

Sommaire du tutoriel

  1. Introduction
  2. Installation
  3. L'architecture des fichiers
  4. Informations sur le thème
  5. La mise en page générale
  6. L'en-tête de page (on y est !)
  7. Les articles
  8. Articles et pages seuls
  9. Les commentaires
  10. La barre latérale
  11. Le pied de page

Commentaires

  • Bonjour,
    Trés bon article!
    Merci bien pour cette initiative et bon courage.

  • Bonjour,
    Malgré vos explications, je n’arrive pas à mettre l’image entête sur toute la longueur de la page et je voudrais supprimer les ascenseurs du bas et à droite.
    Pouvez-vous m’indiquer la solution SVP ?
    Merci par avance
    Cordialement

    • Bonjour,
      je serai ravi de pouvoir vous aider, mais j’avoue que je n’arrive pas vraiment à cerner votre problème…
      Les commentaires du blog ne sont peut-être pas non plus le meilleur moyen de s’entraider.
      Je pense que vous devriez poster votre problème sur un forum pour en parler facilement, n’hésitez pas à m’envoyer un lien pour que je vous y réponde 😉

  • Merci pour ce tuto, ca aide beaucoup surtout pour un débutant comme moi 🙂

  • Excellente idée, le « code commenté » ! J’apprends vite !

    Astuce :
    Copier et coller le texte dans Notepad++ : les commentaires apparaissent en vert !

  • Bonjour Félix, tout d’abord merci pour ce tutoriel. Le code commenté est un vrai plus. Toutefois, j’ai rencontré une erreur de parsing ligne 109

    Parse error: syntax error, unexpected ‘=’, expecting ‘)’ (…)header.php on line 109

    Ce qui correspond à la fonction menu. J’ai bien créer la fonction dans le fichier functions.php

    Si je remplace ton code par celui ci :
    'primary', 'menu_class' => 'principal' ) ); ?>

    Je ne rencontre aucun problème, mais ce qui m’inquiète c’est que je suis le seul visiblement à rencontrer ce problème. j’ai pourtant fait un copier/coller de ton code.

    Une idée ??

    Steve

Répondre à tito Annuler la réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *