Créer un Thème WordPress : 9. Les Templates Search et Page

Par Eiffair | Publié : 21 juillet 2009

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.

Les Templates Search et Page sont essentiels pour qu’un thème WordPress soit complet. De plus ils sont assez faciles à coder. Pour ces deux templates nous partirons une fois de plus de notre template modèle :

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(); ?>

Mais évidemment chacun va suivre son propre chemin.

Le Template Search

Dans search.php nous allons réintroduire la boucle. Et cette fois-ci avec une instruction IF, au cas où nous n’aurions rien à boucler.
Voici comment ça va fonctionner : SI nous avons des articles, c’est à dire si des articles correspondent à notre recherche, ALORS nous bouclons sur ces articles, juste comme dans index.php, MAIS SI nous n’avons pas d’articles ou bien si aucun article ne correspond à notre recherche ALORS nous donnerons l’opportunité à nos utilisateurs de rechercher autre chose.
Pour le code, ça va ressembler à cela :

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

<?php get_header(); ?>
 
		<div id="container">	
			<div id="content">
 
<?php if ( have_posts() ) : ?>				
 
<?php while ( have_posts() ) : the_post() ?>
<!-- this is our loop -->
<?php endwhile; ?>
 
<?php else : ?>
 
<!-- here's where we'll put a search form if there're no posts -->
 
<?php endif; ?>			
 
			</div><!-- #content -->		
		</div><!-- #container -->
 
<?php get_sidebar(); ?>	
<?php get_footer(); ?>

Assez facile en fait.

J’aime bien que tous mes templates basés sur index.php se ressemblent : le titre de l’article, les données méta, le contenu (ou l’extrait) et les liens utiles. Mais lorsque WordPress recherche des articles, il recherche également parmi les pages statiques WordPress qui ne nécessitent pas d’afficher les données méta et les liens. Pour cela dans notre boucle, nous allons vérifier si nous avons à faire à un article ou à une page statique.

1
2

<?php if ( $post->post_type == 'post' ) { ?>
<?php } ?>

Entourez n’importe quel code avec cette instruction IF et il s’exécutera seulement si nous avons à faire à un article (ndT : dans la version de Ian il parle de page et non d’article cependant le code filtre bien sur le type article et non page). Maintenant que nous avons compris comment ça fonctionnne, voilà à quoi ressemblera notre div #content :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<?php if ( have_posts() ) : ?>
 
				<h1 class="page-title"><?php _e( 'Search Results for: ', 'your-theme' ); ?><span><?php the_search_query(); ?></span></h1>
 
<?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 } ?>							
 
<?php while ( have_posts() ) : the_post() ?>
 
				<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<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 if ( $post->post_type == 'post' ) { ?>									
					<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 } ?>
 
					<div class="entry-summary">	
<?php the_excerpt( __( '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-summary -->
 
<?php if ( $post->post_type == 'post' ) { ?>									
					<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 -->	
<?php } ?>					
				</div><!-- #post-<?php the_ID(); ?> -->
 
<?php endwhile; ?>
 
<?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 } ?>			
 
<?php else : ?>
 
				<div id="post-0" class="post no-results not-found">
					<h2 class="entry-title"><?php _e( 'Nothing Found', 'your-theme' ) ?></h2>
					<div class="entry-content">
						<p><?php _e( 'Sorry, but nothing matched your search criteria. Please try again with some different keywords.', 'your-theme' ); ?></p>
	<?php get_search_form(); ?>						
					</div><!-- .entry-content -->
				</div>
 
<?php endif; ?>

Le Template Page

J’imagine que vous savez à quoi sert le template Page. WordPress considère les pages statiques comme des articles qui ne sont pas inclus dans la chronologie. Nous les voyons… et bien comme des pages. Mais en fait elles sont définies par le fait qu’elles n’ont pas les pièges qui caractérisent un article de blog.

A l’exception des commentaires. Car quelques fois les pages statiques ont des commentaires. Même si je n’aime pas trop les commentaires sur les pages statiques, il se peut que vous en ayez un jour. Nous devons donc nous en occuper. Comment peut on faire? Et bien avec les champs personnalisés. Si vous voulez avoir des commentaires sur une page il suffit d’ajouter un champ personnalisé à la page avec pour nom et pour valeur « comments ». Plutôt intéressant en fait.

Voici donc ce dont vous aurez besoin pour un template page parfait :

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

<?php get_header(); ?>
 
		<div id="container">	
			<div id="content">
 
<?php the_post(); ?>
 
				<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<h1 class="entry-title"><?php the_title(); ?></h1>
					<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your-theme' ) . '&after=</div>') ?>					
<?php edit_post_link( __( 'Edit', 'your-theme' ), '<span class="edit-link">', '</span>' ) ?>
					</div><!-- .entry-content -->
				</div><!-- #post-<?php the_ID(); ?> -->			
 
<?php if ( get_post_custom_values('comments') ) comments_template() // Add a custom field with Name and Value of "comments" to enable comments on this page ?>			
 
			</div><!-- #content -->		
		</div><!-- #container -->
		
<?php get_sidebar(); ?>	
<?php get_footer(); ?>

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

.

Cet article a été publié dans Tutoriel, WordPress avec les mots-clefs : , , . Bookmarker le permalien. Laisser un commentaire ou faire un trackback : URL de trackback.

Laisser un commentaire

Votre e-mail ne sera jamais publié ni communiqué. Les champs obligatoires sont indiqués par *

*
*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>