Créer un Thème WordPress : 7. Les Templates Single Post, Attachment et 404

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.

Vous avez construit la liste de tous vos articles dans index.php. Maintenant il faut créer un template pour afficher chaque élément individuellement (et gérer lorsqu’il n’y a rien à afficher).

Le Modèle pour les Templates

La structure de single.php (et de presque tous les autres templates que nous allons créer) est pratiquement la même que index.php. En fait on peut considérer que c’est notre modèle de template.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?php get_header(); ?>
 
		<div id="container">	
			<div id="content">
 
				<div id="nav-above" class="navigation">
				</div><!-- #nav-above -->

				<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				</div><!-- #post-<?php the_ID(); ?> -->			
 
				<div id="nav-below" class="navigation">
				</div><!-- #nav-below -->					

 
			</div><!-- #content -->		
		</div><!-- #container -->
		
<?php get_sidebar(); ?>	
<?php get_footer(); ?>

Il va quand même y avoir quelques différences, à commencer par the_post() et comments_template().

Nous allons appeler the_post() prêt du haut de la page juste après l’ouverture de la div #content et avant la navigation entre pages d’articles. Nous n’avons pas besoin d’une boucle dans ce template car WordPress sait déjà quel article nous voulons afficher grâce au lien généré par the_permalink().

Et comme c’est un article unique, nous allons y ajouter la gestion des commentaires avec comments_template(). De plus nous voulons séparer les commentaires des trackbacks (rétroliens ou pings), il faut donc appeler la fonction comme ceci :

1

<?php comments_template('', true); ?>

comments_template() doit être placé juste avant la fermeture de la div #content, après la navigation.

Navigation entre Articles

Au lieu d’utiliser les mal nommés next_posts_link() et previous_posts_link() nous allons utiliser previous_post_link() et next_post_link() qui sont plus appropriés. Eux, font exactement ce à quoi on s’attend.

1
2
3
4

				<div id="nav-above" class="navigation">
					<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">&laquo;</span> %title' ) ?></div>
					<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">&raquo;</span>' ) ?></div>
				</div><!-- #nav-above -->

1
2
3
4

				<div id="nav-below" class="navigation">
					<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">&laquo;</span> %title' ) ?></div>
					<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">&raquo;</span>' ) ?></div>
				</div><!-- #nav-below -->

Le Titre des Articles Uniques

Si vous vous rappelez notre leçon sur header.php, nous avons utilisé des instructions IF pour faire en sorte que le titre des articles soient visibles des moteurs de recherche. Nous allons en tirer avantage ici, et dans les autres templates, en mettant le titre dans une balise h1.

1

					<h1 class="entry-title"><?php the_title(); ?></h1>

Vous remarquerez aussi que le code pour le titre est également plus simple. C’est l’avantage ici de n’avoir rien à lier.

Liens Utiles pour les Articles Uniques

La gestion des liens utiles est plutôt complexe. Vous allez donc voir ici le bénéfice de s’appuyer sur les épaules de quelqu’un d’autre qui a déjà codé cela pour vous.

Avant de regarder le code, penchons-nous sur les raisons qui font que c’est complexe. En raison de la manière dont sont gérés les commentaires dans WordPress, nous devons prendre en compte différents scenarii : commentaires et trackbacks (= ping ou rétroliens) ouverts, seulement les trackbacks ouverts, seulement les commentaires ouverts ou commentaires et trackbacks fermés. Ce qui aboutit à un enchevêtrement d’instructions IF.

Cela peut-être déroutant mais le code est commenté et il suffit de suivre les blocs d’instructions IF et ELSIF pour comprendre.

Nous voulons également afficher un lien vers notre permalien pour permettre l’enregistrement dans les favoris et un lien vers le flux RSS de cet article, très utile pour suivre les conversations.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

					<div class="entry-utility">
					<?php printf( __( 'This entry was posted in %1$s%2$s. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>. Follow any comments here with the <a href="%5$s" title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml">RSS feed for this post</a>.', 'your-theme' ),
						get_the_category_list(', '),
						get_the_tag_list( __( ' and tagged ', 'your-theme' ), ', ', '' ),
						get_permalink(),
						the_title_attribute('echo=0'),
						comments_rss() ) ?>
 
<?php if ( ('open' == $post->comment_status) && ('open' == $post->ping_status) ) : // Comments and trackbacks open ?>
						<?php printf( __( '<a class="comment-link" href="#respond" title="Post a comment">Post a comment</a> or leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'your-theme' ), get_trackback_url() ) ?>
<?php elseif ( !('open' == $post->comment_status) && ('open' == $post->ping_status) ) : // Only trackbacks open ?>
						<?php printf( __( 'Comments are closed, but you can leave a trackback: <a class="trackback-link" href="%s" title="Trackback URL for your post" rel="trackback">Trackback URL</a>.', 'your-theme' ), get_trackback_url() ) ?>
<?php elseif ( ('open' == $post->comment_status) && !('open' == $post->ping_status) ) : // Only comments open ?>
						<?php _e( 'Trackbacks are closed, but you can <a class="comment-link" href="#respond" title="Post a comment">post a comment</a>.', 'your-theme' ) ?>
<?php elseif ( !('open' == $post->comment_status) && !('open' == $post->ping_status) ) : // Comments and trackbacks closed ?>
						<?php _e( 'Both comments and trackbacks are currently closed.', 'your-theme' ) ?>
<?php endif; ?>
<?php edit_post_link( __( 'Edit', 'your-theme' ), "\n\t\t\t\t\t<span class=\"edit-link\">", "</span>" ) ?>
					</div><!-- .entry-utility -->

Contenu de l’Article

Au contraire de index.php, le contenu est plutôt simple. Un seul appel de fonction suivi de wp_link_pages().

1
2

<?php the_content(); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&after=</div>') ?>

Fichier Attachés

Peu de personnes utilisent les fichiers attachés bien qu’ils soient assez intéressants. Quand vous ajoutez une image à votre article, en fait vous l’attachez à l’article. Et bien évidemment, vous pouvez attacher plus que des images. Nous allons mettre en place un template attachment.php que vous pourrez adapter si vous le voulez par la suite à d’autres types de fichiers comme des vidéos, de l’audio ou des applications en développant des templates video.php, audio.php et application.php. Il existe plein de manières d’être créatif avec les rattachements WordPress.

Le plus simple est de copier single.php, le renommer en attachment.php et de faire les modifications qui suivent.

Premièrement supprimez la navigation du haut, nous n’en avons pas besoin. Remplacez-la par un titre de page qui fait un lien vers l’article parent.

1

				<h1 class="page-title"><a href="<?php echo get_permalink($post->post_parent) ?>" title="<?php printf( __( 'Return to %s', 'your-theme' ), wp_specialchars( get_the_title($post->post_parent), 1 ) ) ?>" rev="attachment"><span class="meta-nav">&laquo; </span><?php echo get_the_title($post->post_parent) ?></a></h1>

Comme nous avons mis le titre de la page dans une balise h1, le titre de notre article sera donc placé dans une balise h2 :

1

					<h2 class="entry-title"><?php the_title(); ?></h2>

Et comme le contenu de notre template attachment doit afficher le fichier attaché, la section contenu doit donc être la suivante. De plus comme la plupart de nos fichier attachés seront des images, nous le vérifions à l’aide d’instructions IF.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

					<div class="entry-content">
						<div class="entry-attachment">					
<?php if ( wp_attachment_is_image( $post->id ) ) : $att_image = wp_get_attachment_image_src( $post->id, "medium"); ?>
						<p class="attachment"><a href="<?php echo wp_get_attachment_url($post->id); ?>" title="<?php the_title(); ?>" rel="attachment"><img src="<?php echo $att_image[0];?>" width="<?php echo $att_image[1];?>" height="<?php echo $att_image[2];?>"  class="attachment-medium" alt="<?php $post->post_excerpt; ?>" /></a>
						</p>
<?php else : ?>		
						<a href="<?php echo wp_get_attachment_url($post->ID) ?>" title="<?php echo wp_specialchars( get_the_title($post->ID), 1 ) ?>" rel="attachment"><?php echo basename($post->guid) ?></a>		
<?php endif; ?>		
						</div>				
						<div class="entry-caption"><?php if ( !empty($post->post_excerpt) ) the_excerpt() ?></div>
 
 
<?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 -->

Effacez maintenant la navigation du bas de ce qui était auparavant votre ancien single.php et votre template attachment.php est terminé.

Le Template 404

Une erreur 404 est le code d’erreur renvoyé par le serveur pour l’évènement « la page ne peut être trouvée » et vous devez prendre en compte cet évènement dans vos thèmes WordPress. Que se passe-t-il si un lien de votre blog a une adresse URL mal saisie? Ou bien lorsque vous supprimez un article? Votre serveur génère une erreur 404.

Heureusement, WordPress a un template pour ce cas, 404.php. La technique que j’utilise pour le template 404 est assez directe mais elle fonctionne. Affichez des excuses et un formulaire de recherche. Il peut y avoir des solutions alternatives, mais aucune ne sera plus rapide pour votre visiteur.

Retournez au modèle de template que nous avons utilisé plus haut, enlevez la navigation et ajoutez ceci à la section content :

1
2
3
4
5
6
7

				<div id="post-0" class="post error404 not-found">
					<h1 class="entry-title"><?php _e( 'Not Found', 'your-theme' ); ?></h1>
					<div class="entry-content">
						<p><?php _e( 'Apologies, but we were unable to find what you were looking for. Perhaps searching will help.', 'your-theme' ); ?></p>
	<?php get_search_form(); ?>
					</div><!-- .entry-content -->
				</div><!-- #post-0 -->

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