Que doit-il faire?

Il est chargé de présenter les Posts, titre et contenu, dans la page Web. Problème classique de la programmation, nous ne savons s’il y a des Posts, ni combien il y en a. S’il n’y a pas de Posts, il est intéressant de le signaler par un message. S’il y a des Posts,  il faut éviter la saturation et en limiter le nombre par page Web tout en ayant un moyen d’en balayer l’ensemble. D’autre part, nous ne souhaitons pas encombrer notre page avec des Posts trop longs, il faut un moyen d’en présenter le début avec un lien pour en lire la suite.
Tout cela est réalisé simplement dans WordPress par une instruction conditionnelle, une boucle  while un index et quelques fonctions.

Nous allons programmer cela pas à pas.

L’instruction conditionnelle
Dans index.php,  entre la balise <div id= »content »> et    </div><!–END content–> insérer le code PHP suivant:

<?php if (have_posts()) : ?> <!-- si post -->
<?php else : ?> <!-- si non post -->
<?php endif; ?>    <!-- fin si post -->

1er cas il y a des posts – la boucle while
Dans cette boucle il faut un index qui nous placera sur le Post suivant de l’ensemble des Posts de la sélection et qui est incrémenté à chaque boucle. Ceci est réalisé par la fonction the_post(). Entre la ligne if et else de l’instruction précédente placer le code PHP suivant:

<?php while (have_posts()) : ?> <!-- boucle post -->
    <?php the_post(); ?>
<?php endwhile; ?> <!-- fin boucle post -->

Le plus difficile est fait!  nous pouvons afficher maintenant le Post, son titre, ses méta-données. Pour habiller le Post nous allons l’insérer dans une balise <div> muni d’une classe post. La propriété id de la balise <div> est rendu unique par la fonction the_ID() . Nous allons d’abord afficher le titre du Post. Il est placé dans une balise <a> et habillé d’une balise de titre <h2> muni de la classe posttitle. Insérer dans index.php après la ligne the_post() les lignes suivantes:

<div class="post" id="post-<?php the_ID(); ?>"><!-- début du post -->
    <!-- Titre du post -->
    <h2 class="posttitle">
        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Lien permanent vers', 'montheme'); ?> <?php the_title(); ?>">  <?php the_title(); ?></a>
</h2>
</div><!-- fin du post -->

Insérer dans style.css les lignes suivantes:

#post {
float: left;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

.posttitle {
font-weight:normal;
font-size:1.9em;
padding: 0 0 0 0;
margin: 1em 0 0 0;
font-family: Arial;
}

.posttitle a, .posttitle a:link, .posttitle a:visited {
color:#333; /* noir ;*/
}

.posttitle a:hover, .posttitle a:active {
color: #C51500; /* rouge */

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Le titre de chaque Post est affiché sur fond blanc. La colonne de gauche commence à se dessiner. Ce n’est pas encore parfait. Ne vous inquiétez pas on avance. La fonction the_permalink() a récupéré l’URL du Post pour la placer dans la balise <a> de son titre. Regarder aussi la balise <div> du Post et son id. Pour ce faire, clic droit sur la page affichée, sélectionner afficher le code source de la page.

Nous allons achever la boucle while en y plaçant sous le titre, la date et le l’heure, le contenu du Post, les catégories et les tags. Nous allons aussi prévoir la possibilité de modifier le Post (uniquement pour l’dministrateur). Sous la balise </h2> qui termine l’habillage du titre insérer les lignes suivantes:

<!-- Date et heure -->
<div class="postmetadata">
    <?php the_time('l j F Y') ?>  <?php the_time('H:m:s') ?>
</div>
<!-- Contenu du post - Ici on traite la balise More insérée dans le post-->
<div class="postcontent">
    <?php the_content(__('Lire la suite... ', 'montheme')); ?>
</div>
<div class="postmetadata">
    <?php if( function_exists('the_tags') ) : ?>
        <div><?php the_tags(__('Tags: '), ', ', '');?></div>
    <?php endif; ?>    <!-- fin si tag -->
    Cat&eacute;gories: <?php the_category(', ') ?>
    | <?php comments_popup_link(__('Aucun Commentaire', 'montheme'), __('1 Commentaire', 'montheme'), __('% Commentaires', 'montheme')); ?>
    | <?php edit_post_link(__('Modifier', 'montheme'), ' &#8212; ', ''); ?>
</div>

Insérer en fin de  style.css les lignes suivantes:

.postmetadata {
font-size:1.1em;
text-align:left;
font-style:italic;
}

.postcontent, .postcontent p{
font-size:1.15em;
padding: 0 1.5em 0.2em 0;
margin: 1.5em 0 0.5em 0;
}

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Le Post est affiché sur fond blanc. La fonction the_time() affiche la date et l’heure. La fonction the_content() affiche le contenu et gère le tag More qui limite le nombre de lignes affichées. La fonction the_tags() affiche les tags et établit un lien vers ceux-ci. La fonction the_category() affiche les catégories et établit un lien vers celles-ci.  La fonction comments_popup_link() affiche le nombre de commentaires et établit un lien vers ceux-ci. La fonction edit_post_link() établit un lien pour modifier le Post.

Traduction
Noter que ces dernière fonctions sont munies de textes paramétrables que vous pouvez ainsi franciser facilement.

Navigation
Il faut maintenant gérer la navigation page précédente, page suivante. Sous la ligne endwhile insérer les lignes suivantes:

<div class="navigation">
    <span class="alignleft"><?php previous_posts_link(__('&laquo; Page pr&eacute;c&eacute;dente', 'montheme')) ?></span>
    <span class="alignright"><?php next_posts_link(__('Page suivante &raquo;', 'montheme')) ?></span>
</div>

Insérer en fin de style.css les lignes suivantes:

.navigation {
margin: 1em 0 0 0;
font-size:1.1em;
}

.alignleft {
float: left;
margin: 5px 5px 5px 0;
}

.alignright {
float: right;
margin: 5px 0 5px 5px;
}

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran. Vous ne pouvez constater l’effet de cet ajout que si vous avez un nombre de Posts qui dépasse le nombre définis dans les réglages de lecture. Vous pouvez, le temps du test, modifier ce réglage et le rétablir ensuite à sa valeur par défaut.

Traduction
Noter que les fonctions previous_posts_link() et next_posts_link() sont munies de textes paramétrables que vous pouvez ainsi franciser facilement.

2ème cas il n’y a pas de Posts
Nous terminons ici l’autre branche de l’instruction conditionnelle. Inserer après la ligne else du fichier index.php les lignes suivantes:

<div class="post">
    <h2 class="posttitle"><?php _e('Non trouv&eacute;', 'montheme') ?></h2>
    <div class="postentry"><p><?php _e('D&eacute;sol&eacute;, aucune publications correspond &agrave; votre recherche.', 'montheme'); ?></p></div>
</div>

Enregistrer.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran. Pour constater l’effet de cet ajout, entrer dans le champ de recherche situé dans l’en-tête, un critère de recherche qui n’existe pas, cliquer sur le bouton chercher.

Télécharger les fichiers de cette partie et les copier sous /themes/montheme .

Traduction
Noter que la  fonction_e() permet le texte de votre choix.

Liens
Partie 1 – Choix des outils
Partie 2 – Environnement de développement et de qualification
Partie 3 – Installation de WordPress sur serveur local
Partie 4 – Créer son thème WordPress
Partie 5 – Créer son thème WordPress – Template Index
Partie 6 – Créer son thème WordPress – Template Sidebar
Partie 7 – Créer son thème WordPress – Template Footer
Partie 8 – Créer son thème WordPress – Template Archive
Partie 9 – Créer son thème WordPress – Template Search
Partie 10 – Créer son thème WordPress – Template Single
Partie 11 – Créer son thème WordPress – Template Comments
Partie 12 – Créer son thème WordPress – Style Print
Partie 13 – Créer son thème WordPress – Autres Templates
Partie 14 – Créer son thème WordPress – Traduction