Francis Chouquet Graphiste Lettering

Création Thème WordPress | Tutorial #8: le Loop WordPress, 2ème partie

0

Ce tutoriel est le huitième d’une série articles sur la création d’un thème pour WordPress de A à Z. Si vous prenez le train en cours, je vous conseille fortement de commencer par le premier tutoriel de la série.

Hier, on a fait la présentation du Loop WordPress et insérer le titres des articles au blog. Aujourd’hui, nous allons intégrer le contenu de ces articles. Rien de bien compliqué en soi. On placera également les différentes balises CSS autour des différents blocs d’un article pour pouvoir modifier chaque partie indépendamment plus tard, au moment de la création du style de notre thème.

Pour voir apparaître le contenu de nos articles, on va ajouter une ligne de code directement après les titres des articles et avant les balises de fermeture « endwhile » et « endif »:

1 
<?php the_content(); ?>

Sauvegardez votre fichier, rafraîchissez le navigateur et le contenu de vos articles apparaît désormais.

Maintenant, on va prendre le temps de bien « baliser » le contenu de notre blog. Hier, on a créé une DIV « content » qui enveloppe toute notre colonne avec nos articles. Dès qu’on voudra modifier l’ensemble de cette colonne dans les CSS, on utilisera la commande « content ». Maintenant, on va créer les balises qui vont nous permettre de modifier différents aspects des articles: on va pouvoir modifier l’article dans son entier, ou alors, juste son contenu. Pour cela, on va placer les DIV qu’il faut au bon endroit.

Ce qu’il va falloir bien comprendre ici, c’est qu’on va utiliser l’attribut « class » pour la DIV et non plus « id ». Pourquoi? En fait, une « id » est unique. On ne peut l’utiliser qu’une fois. C’est le cas pour les div « header », « content » ou « footer » par exemple. Mais pour pour le contenu des articles puisqu’on va avoir plusieurs articles. C’est pour cela qu’on va utiliser l’attribut « class », qui lui, n’est pas unique. On va donc entourer chaque article, chaque titre et chaque contenu pour qu’il ait son « enveloppe » personnelle:

1 2 3 4 
<div class= "post"> <div class= "post_content"> </div> </div>

Une fois ces balises bien placées, on obtient les lignes de code suivantes pour la DIV « content »:

1 2 3 4 5 6 7 8 9 10 11 
<div id="content"> <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <div class="post"> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2> <div class="post_content"> <?php the_content(); ?> </div> </div> <?php endwhile; ?> <?php endif; ?> </div>

En ce qui concerne le titre de l’article, on pourra faire les modifications dans la feuille de style grâce à la balise « content » jumelée aux balises h2 qui l’entourent, comme l’a souligné si justement Cyril dans un commentaire ci-dessous (hop! un petit backlink en passant!).

Pour terminer pour aujourd’hui, on va ajouter une fonction de intéressante aux articles. On va ajouter un peu de PHP dans la DIV « post » pour donner une ID individuelle à chaque article. Le fait de pouvoir donner une identification unique à chaque article ici vous permettra plus tard, dans la feuille de style, de donner le look que vous souhaitez à chacun de vos articles. Selon l’utilisation que vous ferez de votre blog, ça peut, éventuellement, être utile. Vous allez donc modifier la DIV « post » pour qu’elle devienne ça:

1 
<div class="post" id="post-<?php the_ID(); ?>">

Ce qu’on a fait ici c’est ajouter l’attribut ID à la DIV et l’identification que l’on va donner à chaque article sera son ID dans la base de données. C’est ce que va faire cette commande PHP, c’est-à-dire aller chercher l’ID de l’article dans la base.

Sauvegardez votre fichier, rafraîchissez votre navigateur et allez voir un peu le code source de la page. Au niveau de la DIV « post », vous allez retrouver l’identication unique de chaque article:

1 
<div class="post" id="post-3">

Voilà ! C’est tout pour aujourd’hui. Demain, on ajoute les postmetadata. A demain !

Tutoriel n°9: « le loop WordPress, dernière partie »

Et si ça vous intéresse, avec des amis, on a créé notre boutique de ventes de thèmes WordPress, Peaxl. Venez jetez un oeil ! 😉

Fran6

55 Commentaires

  • kriss2

    oh le boulet…


    alors que je m’attendais à trouver post-3, puis 2 puis 1…

  • kriss2

    Désolé pour ces posts…
    rien a faire, je n’arrive pas à afficher le code, donc :
    …J’ai en effet :
    div class= »post » id= »post-7″
    div class= »post » id= »post-4″
    div class= »post » id= »post-1″
    alors que je m’attendais à trouver post-3, puis 2 puis 1…

    Voilà. :/

  • najib aghazal

    Bonjour
    1er merci bcp pour ces tutos
    bon si j ai bien comprer quant on ouvre la page web et par clique droit afficher la source de la page on aure post-id=1 c est en fait l id de l’article sur la base de donnee

  • Bonjour,
    dans le tuto, je ne vois pas commenta faire pour avoir juste les extraits sur la page d’accueil avec leurs images, il me semble qu’il faut le code the_post_thumbnail, y-a-t-il un tutoriel sur le site qui montre ce cas de figure?
    Merci

  • Bonjour Francis,

    Je suis en train de migrer mon site sur WordPress, et je suis tombé sur ce tuto… Quelle aubaine !
    Je voulais te remercier car ce tuto m’a vraiment énormément aidé, je débute sur wordpress et ton tuto est clair, précis, facile a comprendre.

    Tout simplement merci.

Success, your comment is awaiting moderation.