Thème pour Wordpress : Header

Construction du fichier d'en-tête pour le site (header.php).

Le titre de page

Puisque le header est partagé par la page d'accueil, d'article, de catégorie ou autre type de page, le titre doit être conditionné au type ce qui se fait par une liste de conditions en PHP. 

<title>
<?php 
if(is_404())                { _e('Page not found', ''); } 
elseif (is_home())      { bloginfo('description'); echo " - "; bloginfo('name'); } 
elseif (is_category()) { echo  single_cat_title(); }
elseif (is_date())       { _e('Archives', ''); echo " of "; bloginfo('name'); }
elseif (is_search())    { _e('Search results', ''); } 
else the_title(); 
?>
</title>

Les cas suivants sont pris en compte:

La méta description n'est pas prise en compte nativement par Wordpress. Elle dépend de chaque article. Il faut une extension comme All in seo pour la générer.

Les metas

Elles concernent le type de document, les feuilles de style, le nom des fichiers RSS. Les informations correspondantes sont donnée par le panel d''administration (par le choix du thème et dans les options), et comme on le voit dans le source de header.php, elle sont intégrées par des instructions PHP.

Exemple:

<link rel="stylesheet" type="text/css" media="screen,projection"
   href="<?php bloginfo('stylesheet_url'); ?>" />

Le haut de page

<body  class="hfeed">

<div id="header">
<div id="logo"  onclick="location.href='<?php echo get_settings('home'); ?>/';"></div>
<div id="navbar"> 
   <span id="navcat">
    <?php wp_list_categories('title_li=&sort_column=name&hierarchical=1') ?>
    </span>
    <span id="navpage"><a href="about">About</a></span>
</div>

La balise body est ouverte dans le fichier header.php et close dans le fichier footer.php.

L'en-tête dans notre démonstration est composée d'un logo et d'une barre de navigation.
Elle ne contient pas le titre du site dans une balise H1 comme on le voit souvent dans les thèmes, ce qui est une aberration sur le plan du référencement (les défauts des premiers thèmes sont repris dans tous les autres qui ne font que les réutiliser et les modifier).

Catégories dans la barre de navigation

Nous avons choisi de placer la liste des catégories dans la barre de navigation ce qui convient tant qu'elles ne sont pas trop nombreuses.

Cela se fait facilement avec la fonction wp_list_categories et des règles CSS. En effet la fonction les affiche sous forme de liste verticale avec puces. Mais le descripteur CSS de l'id navcat la transforme en liste horizontale simple.
Le paramètre title_li= sans valeur élimine l'en-tête de catégories.

Sur la droite on place un lien sur la page statique "Au sujet de" ou "Le site" qui décrit le but du site et les termes et conditions d'utilisation.

La bannière

L'essentiel du graphisme dans le thème Cryonie est dans l'en-tête de page. Celui-ci a la structure suivante: 

<div id="header">
   <div id="logoback"></div> 
   <div id="logo"></div>		
   <div id="navbar"> 
       <span id="navcat"></span>
       <span id="navpage"></span>
   </div>
</div>

La balise header englobe l'en-tête entière du site. On lui donne en fond un dégradé de gris. Celui-ci a la hauteur de l'en-tête moins la hauteur de la barre de navigation qui a son propre fond.

Les balises logoback et logo sont superposées par la feuille de style.

La balise logoback contient l'image de fond du logo, grâce à un effet de fondu de l'opaque vers le transparent, réalisé avec The Gimp, elle se fond progressivement avec le fond de l'en-tête.

Le logo est superposé à l'image de fond grâce à l'attribut z-index qui est de niveau trois, donc supérieur à celui de l'image de fond qui est de niveau 2 (et le fond de l'en-tête de niveau 1).

La barre de navigation utilise aussi un dégradé de gris sur blanc qui l'on réalise très facilement avec l'outil de dégradé de The Gimp.

L'inconvénient de ce choix graphique est que les images de logo et de fond doivent être au format de fichier GIF ou PNG pour disposer de la transparence, et ont une taille plus importante que des fichiers JPG.

On peut modifier évidemment le thème pour utiliser un choix graphique différent.

Voir aussi Image fondue avec l'arrière plan par The Gimp.

Documentation utile

Les composants d'une page, prédéfinis fournis par Wordpress et comment les affecter dans l'interface.