slDesign

IV – Edition du thème avancée

Nous allons voir dans cette section l’édition avancé de notre thème autrement dit, le chargement du contenu principal :

• Chargement des articles en liste
• Chargement d’un post
• Chargement d’une page

1°) Afficher la liste des articles

Reprenons notre fichier “index.php”. Ce fichier permet de charger les différentes parties de notre template mais également les sections. La première étape consiste à récupérer la liste des articles publiés. Nous utiliserons une simple boucle “while” pour lister les articles.

Le code ci-dessous vous montre comment réaliser cette opération :

<div id="content">
<?php if(have_posts()): ?>
	<?php while (have_posts()) : the_post(); ?>
	<!-- Post -->
	<div id="<?php the_ID();?>" <?php post_class();?>>
		<h2 class="post-title"><a href="<?php the_permalink();?>" title="<?php _e('Permalink to','sldesign');?><?php the_title_attribute();?>"><?php the_title();?></a></h2>
		<small><?php the_time('j F Y') ?> <!-- par <?php the_author() ?> --></small>
				<div class="entry">
					<?php the_content(__('Read more »','sldesign')); ?>
				</div>
				<p class="postmetadata">
				<?php the_tags(__('Keywords','sldesign').' :', ', ', '<br />'); ?>
				<?php _e('Publish in','sldesign');?> <?php the_category(', ') ?> | <?php edit_post_link(__('Modify','sldesign'), '', ' | '); ?>
				<?php comments_popup_link(__('No comment','sldesign').' »', __('1 comment','sldesign').' »', '% '.__('Comments','sldesign').' »', 'comments-link', __('Comments are closed','sldesign')); ?>
				</p>
	</div><!-- End post -->

	<?php endwhile; ?>

	<?php else : ?>
		<!-- Message si il n'y a pas de post... -->
		<h2 class="center"><?php _e('Not found','sldesign');?></h2>
		<p class="center"><?php _e('Sorry, but you are looking for something that is not here.','sldesign')?></p>
		<?php get_search_form(); ?>

	<?php endif; ?>
</div>

Note : N’oubliez pas à chaque édition de fichier de mettre à jour votre fichier de traduction à l’aide de poedit…

IMAGE 4.1.1

Maintenant que nous pouvons lister nos articles, il est nécessaire d’afficher la navigation du type “articles plus anciens…” Il nous suffit d’ajouter le code suivant :

<!-- Affiche les liens de navigation entre les pages -->
	<div class="navigation" id="pagenavi">
  	<?php if(function_exists('wp_pagenavi')) : ?>
     <?php wp_pagenavi() ?>
 	<?php else : ?>
     <div class="alignleft"><?php next_posts_link(__('« Older Entries','sldesign')) ?></div>
     <div class="alignright"><?php previous_posts_link(__('Newer Entries »','sldesign')) ?></div>
     <div class="clear"></div>
    <?php endif; ?>
    </div>

Ce code est à insérer juste en dessous du <?php endwhile; ?> (ligne 26), c’est à dire en dessous de la boucle.

Fonctions utiles :

• have_post() :
• the_post() :
• wp_pagenavi() : Affice la navigation entre les pages

2°) Afficher un article en détail

Nous affichons dors et déjà le début de nos articles mais il nous faut afficher son intégralité lors du clic sur le lien “Lire la suite”. Cette page affichera l’article dans son intégralité ainsi que le formulaire de commentaire si ce dernier est autorisé.

Nous allons créer un nouveau fichier que nous appellerons “single.php” ; ce fichier regroupera l’article dans son intégralité, la liste des commentaires ainsi que le formulaire permettant d’ajouter des commentaires. Ce fichier est automatiquement chargé par WordPress lorsque un article est identifié.

Fichier single.php

<?php
/* sldesign */
//Insertion du header
get_header();
?>
<!-- Element de l'article -->
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- Affiche la navigation - Next ou previous Post -->
<div class="navigation">
      <div class="alignleft"><?php previous_post_link('« %link') ?></div>
      <div class="alignright"><?php next_post_link('%link »') ?></div>
      <div class="clear"></div>
</div>
<!-- Affiche l'aricle dans son intégralité -->
<div id="post-<?php the_ID(); ?>" <?php if (function_exists("post_class")) post_class(); else print 'class="post"'; ?>>
       <?php
       //Récupére le titre de l'article
       if (!get_post_meta($post->ID, 'hide_title', true)): ?><h2 class="title"><?php the_title(); ?></h2><?php endif; ?>
       <br />
	    <div class="entry">
          <div class="postbody entry clearfix">
	       <?php
	       //Chargement du contenu
	       the_content(__('Read the rest of this entry »', 'sldesign')); ?>
          </div>
          <?php
          //Si plusieurs pages => Affiche les pages
          wp_link_pages(array('before' => '<p class="postpages"><strong>Pages: </strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
          <?php
          //Tags
          $posttags = get_the_tags();
          if ($posttags) { ?>
          <p class="tags"><?php the_tags(''); ?></p>
          <div class="clear"></div>
          <?php } ?>
          <p class="postmetadata alt">
			<small>
                <?php
                //Différentes informations - Flux, comments, etc...

                  printf(__('This entry was posted on %s and is filed under %s. You can follow any responses to this entry through %s.', 'sldesign'), get_the_time(get_option('date_format').', '.get_option('time_format')), get_the_category_list(', '), '<a href="'.get_post_comments_feed_link($post->ID).'" title="RSS 2.0">RSS 2.0</a>');  ?>

                <?php if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
        		  // Both Comments and Pings are open
                  printf(__('You can <a href="#respond">leave a response</a>, or <a href="%s" rel="trackback">trackback</a> from your own site.', 'sldesign'), trackback_url('',false));

        		 } elseif (!('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
        		  // Only Pings are Open
                  printf(__('Responses are currently closed, but you can <a href="%s" rel="trackback">trackback</a> from your own site.', 'sldesign'), trackback_url('',false));

        		 } elseif (('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
        		  // Comments are open, Pings are not
        		  _e('You can skip to the end and leave a response. Pinging is currently not allowed.','sldesign');

        		 } elseif (!('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
        		  // Neither Comments, nor Pings are open
        		  _e('Both comments and pings are currently closed.','sldesign');
        		} ?>
                <?php edit_post_link(__('Edit this entry', 'sldesign')); ?>
            </small>
		  </p>
	   </div>
	   <?php
	   //Chargement des commentaires
	   //Ici, on appel la page comments.php
	   comments_template(); ?>
    </div>

<?php
//Fin de la boucle
endwhile; else:
?>
    <p><?php
    //Si aucune correspondance, un petit message...
    _e("Sorry, no posts matched your criteria.","sldesign"); ?>
    </p>
  <?php endif; ?>
  <!-- End content -->
</div>

<?php
//Insertion sidebar
get_sidebar();
?>
<?php
//Insertion footer
get_footer();
?>

Fonctions utiles :

comments_template() : Charge le template de commentaire ‘comments.php’

Nous pouvons maintenant afficher l’article dans son intégralité :

La dernière ligne nous permet d’intégrer le fichier “comments.php” grace à la fonction <?php comments_template(); ?>.

Voici le code commenté de ce fichier et le résultat généré en image :

Fichier comments.php

Fonctions utiles :

• wp_list_comments() : Permet de lister les commentaires
• comments_number() : Permet de récupérer le nombre de commentaires relatifs à un article

Notre partie concernant les posts est maintenant complète, nous pouvons lister les articles et en afficher le détail.