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:

Page d'erreur: Affichage d'un message d'erreur.
Page d'accueil: Description et non du site donnés dans le panel d'administration.
Liste par catégorie: Nom de la catégorie.
Archive par date: Affiche le mot "Archive", suivi du nom du site.
Résultat de recherche interne: Affiche "Search results".
Page d'article: Affiche le titre de l'article.

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.

Documentation utile

Composants et exemples d'utilisation.

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