Cet article est une traduction du tutoriel How To Create a WordPress Them rédigé par Ian Stewart, l’auteur du framework WordPress Thematic disponible sur son site ThemeShaper. Avec son aimable autorisation et mes remerciements.

Passons maintenant aux choses sérieuses : constuire le template header.php et valider à l’aide d’un Doctype HTML. Il y aura pas mal de PHP dans cette leçon mais ne soyez pas inquiet. Nous allons également faire deux choses essentielles : optimiser pour les moteurs de recherche et peaufiner notre thème avec un fichier functions.php.

La section head

Jusqu’à maintenant votre thème tout blanc est techniquement totalement invalide. C’est parce qu’il manque un Doctype qui indique au navigateur comment interpréter le code HTML qu’il voit. Nous allons utiliser le Doctype XHTLM Transitional. Il pourrait y avoir d’autres choix mais le type XHTML Transitional est le plus adapté pour un thème WordPress.

Ouvrez header.php et copiez le code suivant tout en haut :

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Nous allons également ajouter quelques attributs à la balise HTML pour que le type de page que nous créons soit mieux visible du navigateur. Remplacez la balise HTML actuelle du header.php par la ligne qui suit.

1
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

Nous allons maintenant aller dans la section <head> de notre thème. La section <head> contient les informations méta de la page web. Il s’agit typiquement des informations telles que le nom de la page qui s’inscrit dans la barre de la fenêtre du navigateur (et dans les résultats des moteurs de recherche), et les liens vers la feuille de style et les flux RSS.

Mais avant cela ouvrez votre fichier functions.php. Nous allons ajouter une fonction qui va nous être très utile pour créer le titre du document. Elle va nous donner un numéro de page que nous pourrons ajouter au titre.

Commencez functions.php par

1
<?php

et deux lignes plus bas (j’aime bien laisser deux lignes entre chaque fonction) copiez les 2 fonctions PHP suivantes :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Make theme available for translation
// Translations can be filed in the /languages/ directory
load_theme_textdomain( 'your-theme', TEMPLATEPATH . '/languages' );
 
$locale = get_locale();
$locale_file = TEMPLATEPATH . "/languages/$locale.php";
if ( is_readable($locale_file) )
	require_once($locale_file);
 
// Get the page number
function get_page_number() {
    if ( get_query_var('paged') ) {
        print ' | ' . __( 'Page ' , 'your-theme') . get_query_var('paged');
    }
} // end get_page_number

La première fonction indique à WordPress que nous voulons que notre thème soit traductible et que les fichiers de traduction se trouvent dans un dossier de notre thème qui s’appelle « languages ». Lorsque vous créez un thème WordPress faites le maximum pour que tout soit traductible. Vous ne savez pas si vous ou quelqu’un d’autre aura besoin un jour d’utiliser votre code dans une autre langue.

Dans la seconde fonction get_the_page_number(), vous voyez du texte traductible. Cela ressemble à ça:

1
__( 'Page ' , 'your-theme')

Le texte à traduire est « Page » suivi du nom du dossier de notre thème, dans le cas présent « your-theme ». C’est une façon de faire assez directe mais nous verrons qu’il y a une ou deux autres manières d’écrire du texte traductible.

Pouvez-vous deviner ce que la fonction get_page_number() fait? Si vous regardez à l’intérieur de la fonction, vous verrez que nous vérifions avec l’instruction IF si on se trouve dans une page numérotée, c’est à dire le type de page où vous trouvez « articles précédents ». Si c’est le cas, cette fonction renverra un séparateur suivi du numéro de la page courante.

Si vous êtes débutants en PHP je veux vous faire remarquer quelque chose. Tout ce qui se trouve après le double slash (//) est totalement ignoré et donc utilisé pour faire des commentaires. Vous en verrez pas mal.

Revenons à notre section <head> de header.php.
Remplacez <head></head> par le code suivant :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<head profile="http://gmpg.org/xfn/11">
    <title><?php
        if ( is_single() ) { single_post_title(); }       
        elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); }
        elseif ( is_page() ) { single_post_title(''); }
        elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); }
        elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; }
        else { bloginfo('name'); wp_title('|'); get_page_number(); }
    ?></title>
 
	<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
 
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
 
	<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
 
	<?php wp_head(); ?>
 
	<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf( __( '%s latest posts', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
	<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />	
</head>

Si cela vous paraît être du charabia, pas de souci je vais vous expliquer les parties principales. Tout d’abord une balise title optimisée pour les moteurs de recherche qui ne montre que le titre de l’article quand on est dans une page WordPress ou dans l’affichage d’un article unique. Et qui, bien sûr, ajoute un numéro de page avec get_page_number() sur les pages d’archive.

2
3
4
5
6
7
8
9
    <title><?php
        if ( is_single() ) { single_post_title(); }       
        elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); }
        elseif ( is_page() ) { single_post_title(''); }
        elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); }
        elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; }
        else { bloginfo('name'); wp_title('|'); get_page_number(); }
    ?></title>

Quelques informations méta à propos du contenu de notre page :

11
	<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

Un lien vers notre feuille de style :

13
	<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

Un appel de fonction qui va permettre d’afficher le suivi des commentaires :

15
	<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

Un hook pour les plugins WordPress et autres petites choses intéressantes (ndT : j’utilise le terme hook plutôt que hameçon, hook étant généralement utilisé par la communauté francophone de WordPress) :

17
	<?php wp_head(); ?>

Et enfin des liens vers les flux RSS et les rétroliens (pingbacks) :

19
20
21
	<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf( __( '%s latest posts', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
	<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

La section en-tête

Nous allons maintenant ajouter le titre de notre blog qui servira de lien vers la page d’accueil, la description du blog et le menu.

Dans header.php descendez jusqu’à la div #branding. C’est ici que nous allons placer le titre et la description mais nous allons le faire d’une manière un peu différente des autres thèmes.

Vous remarquerez que la plupart des thèmes indique aux moteurs de recherche que l’information la plus importante de la page est le titre du blog. Il le font en mettant le titre dans une balise h1 ; la balise qui veut dire « voilà de quoi parle cette page ». Pour ma part, et pour un petit groupe de développeurs de thèmes, je pense que c’est une mauvaise idée. Si l’on prend par exemple la page que vous êtes en train de lire, le texte qui définit cette page particulière n’est pas « eiffair » mais « Créer un Thème WordPress : 5. le Template Header ». C’est bien de cela que parle la page. Et sur la page d’accueil du blog, la partie réellement la plus importante est la description du blog. C’est ce qui décrit le mieux le contenu de la page d’accueil.

Heureusement, c’est assez facile à mettre en place.

Nous allons utiliser les balises conditionnelles de WordPress (ndT : on utilise aussi le terme anglais du Codex WordPress : WordPress conditionnal tag) et du bon vieux HTML pour coder le titre et la description de notre blog selon ces bonnes pratiques. Voilà à quoi cela ressemble :

1
2
3
4
5
6
7
8
			<div id="branding">
				<div id="blog-title"><span><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></a></span></div>
<?php if ( is_home() || is_front_page() ) { ?>
		    		<h1 id="blog-description"><?php bloginfo( 'description' ) ?></h1>
<?php } else { ?>	
		    		<div id="blog-description"><?php bloginfo( 'description' ) ?></div>
<?php } ?>
			</div><!-- #branding -->

Ainsi, le texte de notre lien sur le titre du blog est placé dans une div appropriée. La description de notre blog, en utilisant l’instruction IF et quelques balises conditionnelles WordPress, est soit placée dans une balise h1 s’il s’agit de la page d’accueil ou la home page, soit dans une div pour les autres cas.

Pour les débutants, c’est le moment idéal pour voir de plus près ce qui se passe. Dans le code ci-dessus nous utilisons un template tag appelé bloginfo(). Vous remarquez que nous l’utilisons pour récupérer l’URL du blog, son nom et sa description. Ce template tag peut être utilisé pour récupérer plus de 20 autres informations concernant votre blog. Il récupére ces informations et les affiche dans votre page. Si vous comprenez cela, vous avez tout compris du fonctionnement des thèmes WordPress. Nous prenons une architecture HTML et nous appelons les template tag de WordPress avec du code PHP pour remplir cette structure. C’est tout simple en réalité. Il suffit de s’habituer à utiliser les templates tags avec des instructions IF et quelques boucles PHP (nous allons y arriver).

Descendez jusqu’à la div #access. Nous allons ajouter un lien permettant de sauter le menu de sorte que ceux qui utilisent un lecteur vocal d’écran n’aient pas à parcourir tout le menu avant d’arriver au contenu de l’article.

1
				<div class="skip-link"><a href="#content" title="<?php _e( 'Skip to content', 'your-theme' ) ?>"><?php _e( 'Skip to content', 'your-theme' ) ?></a></div>

et nous allons mainteant ajouter notre menu, ce qui n’est pas vraiment compliqué puisqu’il s’agit d’appeler un seul template tag avec un seul argument :

1
				<?php wp_page_menu( 'sort_column=menu_order' ); ?>

Votre div #access doit donc ressembler à ceci :

1
2
3
4
			<div id="access">
				<div class="skip-link"><a href="#content" title="<?php _e( 'Skip to content', 'your-theme' ) ?>"><?php _e( 'Skip to content', 'your-theme' ) ?></a></div>
				<?php wp_page_menu( 'sort_column=menu_order' ); ?>			
			</div><!-- #access -->

Et voilà! Le template Header de votre thème est codé et en plus optimisé pour les moteurs de recherche.

Cet article fait partie du tutoriel Créer un Thème WordPress :

  1. Introduction
  2. Outils de Développement
  3. Structure HTML du Thème
  4. Structure des Dossiers et Templates
  5. Template Header
  6. Template Index
  7. Templates Single, Attachment et 404
  8. Template Comments
  9. Template Search et Page
  10. Template Archives, Auteur, Catégories et Mots clés
  11. Template Sidebar
  12. Design du Thème, Initialisation et Construction CSS

flattr this!