Salut à tous,

Aujourd’hui, on s’attaque à un gros morceau : le contenu.

Petit rappel de ce que nous pourrons avoir dans le contenu :

  • Les articles du plus récent au plus ancien.
  • Les articles seuls avec leurs commentaires.
  • Le résultat de recheche sous forme d’extrait.
  • Le résultat des catégories sous forme d’extrait.
  • La page d’erreur URL.

La difficulté du contenu est qu’il va falloir décrire une boucle qui nous permettra de rappeler des fonctions identiques autant de fois qu’il y aura de post. Pour cela, nous allons utiliser les commande WordPress suivantes :

<?php if(have_posts()) : ?>

<?php endif; ?>

Pour vérifier qu’il existe bien des articles.

<?php while(have_posts()) : the_post(); ?>

<?php endwhile; ?>

Pour décrire la boucle, tant qu’il y a un article réaliser les commandes qui seront décrite dedans.

Cette boucle affichera les commandes par ordre d’écriture dans le template.

Nous allons écrire cette boucle dans le template index sous la fonction de rappel du header :


<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>

La boucle est créée mais ne contient rien pour le moment.

Ajoutons les éléments suivants :

  • Le titre de l’article : fonction WordPress <?php the_title(); ?>
  • Le contenu en entier : fonction WordPress <?php the_content(); ?>
  • Les données de l’article (metadata):
    • La date : commande WordPress <?php the_time(‘m-d-y’) ?>
    • L’auteur : commande WordPress <?php the_author() ?>
    • La catégorie : commande WordPress <?php the_category(‘, ‘) ?>
    • Les commentaires : commande WordPress <?php comments_popup_link() ?>
    • Editer / modifier l’article : commande WordPress <?php edit_post_link() ?>

L’ordre d’ecriture de chacune de ces fonctions définira votre mise en page. De même, si vous souhaitez écrire plusieurs info sur une même ligne vous le pouvez. Il suffit de les écrire dans votre template sur une même ligne. Par contre, n’oubliez pas de mettre des éléments de séparation sinon toutes les infos seront collés les unes aux autres.


<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<?php the_title(); ?>
    <?php the_author(); ?> <?php the_category(', ') ?> <?php the_time('d-m-y') ?> | <?php comments_popup_link(); ?> | <?php edit_post_link(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>

Dans ce cas, j’ai créé une ligne dans laquelle nous retouvons, le titre

Puis une autre dans laquelle apparaîtra : l’auteur, la catégorie, la date d’édition, le nombre de commentaires associés, et la possibilité d’éditer l’article. Le tout, séparé par des espaces et barres.
Et ensuite, j’ai fait apparaître le contenu de l’article.

Complètons maintenant ces différentes fonctions par quelques détails :

Tout d’abord, ajoutons un lien au titre qui le reliera à la page de l’article. Il s’agit plus précisément d’un parmelien. Pour cela, nous utiliserons la commande WordPress <?php the_permalink() ?>, associé à la commande html href :

 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>

Complètons la commande <?php comments_popup_link() ?> , afin qu’elle précise, soit qu’il n’y a pas de commentaire, 1 commentaire (uniquement pour orthographe sans s) ou x commentaires :

<?php comments_popup_link('Pas de commentaires', '1 Commentaire', '% Commentaires'); ?>

Modifier la commande <?php edit_post_link() ?> car par défaut elle affiche le test « Edit this » que l’on remplacera par « Editer » :

 <?php edit_post_link('Editer','','')?>

Maintenant ajoutons quelques balises pour la mise en forme. Pour cela, nous allons utiliser 2 types de balises :

div id : que nous avons déjà utilisé précédemment mais qui ne peut-être utilisé qu’une fois

div class : qui nous permet d’utiliser plusieurs fois une mise en forme ce qui sera le cas pour les articles et les metadata :

<?php get_header(); ?>
<div id="wrapperhaut"></div>
<div id="wrapper"><--!Nous permettra de mettre des bords arrondis ou de forme spécifique. -->
<div id="content">
  <?php if(have_posts()) : ?>
    <?php while(have_posts()) : the_post(); ?>
      <div class="meta">
        <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
        Post&eacute; par : <?php the_author(); ?> dans <?php the_category(', ') ?> le <?php the_time('d-m-y') ?> | <?php comments_popup_link('Pas de commentaires', '1 Commentaire', '% Commentaires'); ?> | <?php edit_post_link('Editer', '', ''); ?>
      </div>
      <div class="the_content">
        <?php the_content(); ?>
      </div>
    <?php endwhile; ?>
  <?php endif; ?>
</div>
</div>
<div id="wrapperbas"></div><--!Nous permettra de mettre des bords arrondis ou de forme spécifique. -->
</div><--!Fermeture de la div id page. -->
</body>
</html>

Enfin, ajoutons une commande qui nous permettra de lier les pages entre elles et de passer de l’une à l’autre.

Pour cela, insérons juste après le php endwhile et avant le php endif, la commande WordPress php posts_nav_link entouré d’une balise pour la mise en forme.

<div class="navigation">
<?php posts_nav_link(' - ','Page suivante','Page pr&eacute;c&eacute;dente'); ?>
</div>

Et voila, c’est tout pour aujourd’hui.
Le prochain article sera sur la sidebar. Un autre gros morceau.

Voir aussi :

Articles Créer son thème WordPress : 123456 – 7891011

En attendant bon blog.

@ plus

Articles similaires :