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

Index.php est le fichier le template le plus important d’un thème WordPress. Pas seulement parce que WordPress en a besoin si l’un des autres templates est manquant (comme category.php ou tag.php) mais parce que l’effort que nous allons faire pour coder correctement index.php nous aidera pour réuissir les autres templates. (à l’exception du template des commentaires suivis qui pose toujours problème).

La boucle

Même si elle a l’air d’être en plein milieu de votre template, en réalité index.php commence et se termine par la boucle. Sans elle vous n’obtiendrez rien, voici donc à quoi elle ressemble.

1
2
<?php while ( have_posts() ) : the_post() ?>
<?php endwhile; ?>

Plutôt simple non? Tant que vous avez des articles dans votre base de données, votre thème va boucler sur eux et pour chacun il va faire quelque chose. Le plus difficile est de définir ce « quelque chose » mais ça peut quand même être assez simple.

Commençons par une boucle simplepour puis nous travaillerons pour la compléter. Mettez le code qui suit dans votre div #content du fichier index.php.

1
2
3
<?php while ( have_posts() ) : the_post() ?>
<?php the_content(); ?>
<?php endwhile; ?>

Ce que vous obtenez avec ce code est une grande liste du contenu de vos articles les uns sous les autres. On peut améliorer cela :

1
2
3
4
5
6
7
<ul>
<?php while ( have_posts() ) : the_post() ?>
<li>
    <?php the_excerpt(); ?>
</li>
<?php endwhile; ?>		
</ul>

Ca donne quoi? Et bien vous avez maintenant une liste non ordonnée de tous les extraits de vos articles (en plus vous voyez maintenant ce que vous pouvez faire avec the_post() et the_excerpt() )

En réalité, vous avez fait une boucle (commençant par while et se terminant par endwhile) et placé des template tag pour extraire les données à afficher des articles tout comme nous l’avons fait dans la précédente leçon avec bloginfo().

Essayons de faire encore mieux, en commençant par les basiques tout en s’assurant que l’on pourra utiliser les tags more (lire la suite) et next page (page suivante). Nous mettrons tout cela dans sa propre div et donnerons l’indication aux moteurs qu’il s’agit du contenu d’un blog grâce à la classe microformat « entry-content« .

1
2
3
4
					<div class="entry-content">	
<?php the_content( __( 'Continue reading <span class="meta-nav">&raquo;</span>', 'your-theme' )  ); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&after=</div>') ?>
					</div><!-- .entry-content -->

Et le titre de l’article? C’est aussi très simple. Nous utiliserons le template tag the_title() pour obtenir le titre de l’article et le placerons dans une balise <a> qui fera un lien vers the_permalink() (c’est le lien permanent vers l’article en particulier). Nous allons également ajouter un attribut de titre et un autre microformat (bookmark) qui indiquera aux moteurs (comme Google) que c’est le permalien d’un article de blog. Essayez cela en mettant ce qui suit juste au-dessus de la div .entry-content.

1
<h2 class="entry-title"><a title="&lt;?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?&gt;" rel="bookmark" href="&lt;?php the_permalink(); ?&gt;"></a></h2>

Et maintenant pour finir, ajoutons toutes les autres informations qui font partie d’un article de blog : qui l’a rédigé, l’heure de publication, les catégories, les mots clés, les liens vers les commentaires. J’aime bien séparer ces informations en deux sections : les informations méta (l’auteur et la date de publication) que je place avant le contenu et les trucs utiles (catégories, mots clés et liens vers les commentaires) que je place après le contenu de l’article. Nous regrouperons les deux sections plus le titre dans une div correspondant à l’article.

Jetons un oeil à l’ensemble de la boucle. J’ai inséré des commentaires PHP pour vous guider:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?php /* The Loop — with comments! */ ?>			
<?php while ( have_posts() ) : the_post() ?>
 
<?php /* Create a div with a unique ID thanks to the_ID() and semantic classes with post_class() */ ?>		
				<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>				
<?php /* an h2 title */ ?>							
					<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
 
<?php /* Microformatted, translatable post meta */ ?>										
					<div class="entry-meta">
						<span class="meta-prep meta-prep-author"><?php _e('By ', 'your-theme'); ?></span>
						<span class="author vcard"><a class="url fn n" href="<?php echo get_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( 'View all posts by %s', 'your-theme' ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>
						<span class="meta-sep"> | </span>
						<span class="meta-prep meta-prep-entry-date"><?php _e('Published ', 'your-theme'); ?></span>
						<span class="entry-date"><abbr class="published" title="<?php the_time('Y-m-d\TH:i:sO') ?>"><?php the_time( get_option( 'date_format' ) ); ?></abbr></span>
						<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>
					</div><!-- .entry-meta -->
 
<?php /* The entry content */ ?>					
					<div class="entry-content">	
<?php the_content( __( 'Continue reading <span class="meta-nav">&raquo;</span>', 'your-theme' )  ); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&after=</div>') ?>
					</div><!-- .entry-content -->
 
<?php /* Microformatted category and tag links along with a comments link */ ?>					
					<div class="entry-utility">
						<span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e( 'Posted in ', 'your-theme' ); ?></span><?php echo get_the_category_list(', '); ?></span>
						<span class="meta-sep"> | </span>
						<?php the_tags( '<span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links">' . __('Tagged ', 'your-theme' ) . '</span>', ", ", "</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>
						<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'your-theme' ), __( '1 Comment', 'your-theme' ), __( '% Comments', 'your-theme' ) ) ?></span>
						<?php edit_post_link( __( 'Edit', 'your-theme' ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t\n" ) ?>
					</div><!-- #entry-utility -->	
				</div><!-- #post-<?php the_ID(); ?> -->
 
<?php /* Close up the post div and then end the loop with endwhile */ ?>		
 
<?php endwhile; ?>

Navigation

Nous devons maintenant mettre en place un moyen de se déplacer d’une page d’articles à l’autre. Nous utiliserons pour cela deux template tags WordPress : next_posts_link() et previous_posts_links(). Ces deux fonctions en réalité ne font pas vraiment ce à quoi on s’attend. Le mieux est de vous citer le Codex WordPress :

Next post links
Crée un lien vers les articles précédents. C’est bien cela « articles précédents », c’est juste pour vous troubler un peu.

Next post links
Crée un lien vers les articles précédents. C’est bien cela « articles précédents », c’est juste pour vous troubler un peu.

Comme tout ce qui se trouve dans index.php la navigation entre articles doit être construite avec attention car nous allons la réutiliser dans presque toutes les pages du blog.

J’aime bien avoir des liens de navigation au-dessus et en-dessous du contenu. Selon ce que vous voudrez en faire, vous ne serez peut-être pas d’accord. Ce n’est pas grave, on peut toujours le cacher comme ceci :

1
2
3
.single #nav-above {
    display:none;
}

Ce code CSS va donc enlever les liens de navigation qui se trouvent au-dessus de la section « contenu » lorsque l’on affiche un article unique.

Nous allons également enlever les liens de navigations lorsqu’il n’y a rien à afficher. Par exemple, dans une page de recherche il n’y a pas d’articles précédents, nous n’avons donc pas à afficher les liens de navigation. Nous allons faire cela en mettant notre code dans l’instruction suivante :

1
2
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
<?php } ?>

Ici nous regardons dans la boucle le nombre maximum d’articles qui sera affiché, et s’il est supérieur à 1 nous mettons les liens de navigation.

Voici donc le code que nous allons mettre pour la navigation dans les articles en haut et en bas, c’est à dire juste avant et juste après la boucle :

1
2
3
4
5
6
7
<?php /* Top post navigation */ ?>
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
				<div id="nav-above" class="navigation">
					<div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">&laquo;</span> Older posts', 'your-theme' )) ?></div>
					<div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">&raquo;</span>', 'your-theme' )) ?></div>
				</div><!-- #nav-above -->
<?php } ?>
1
2
3
4
5
6
7
<?php /* Bottom post navigation */ ?>
<?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
				<div id="nav-below" class="navigation">
					<div class="nav-previous"><?php next_posts_link(__( '<span class="meta-nav">&laquo;</span> Older posts', 'your-theme' )) ?></div>
					<div class="nav-next"><?php previous_posts_link(__( 'Newer posts <span class="meta-nav">&raquo;</span>', 'your-theme' )) ?></div>
				</div><!-- #nav-below -->
<?php } ?>

Une dernière chose et nous en aurons fini avec index.php. Même si vous êtes impatient de voir ce que cela donne, nous allons simplement ajouter cet appel de fonction juste avant l’instruction get_footer().

1
<?php get_sidebar(); ?>

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!