Aujourd’hui, on continue la customisation de la page d’accueil, et je vais vous montrer différentes options qui vous permettront de choisir les articles qui y apparaîtront. On va en profiter pour découvrir une autre méthode pour changer l’apparence du premier post, mais on va également regarder comment modifier celle des articles du dessous.
Pour bien comprendre ce qu’on va faire, il faut bien comprendre comment fonctionne le “query_posts” de Wordpress. J’ai écrit un article complet là -dessus, que je vous invite à aller lire avant de continuer ce tutoriel. Vous allez très vite comprendre que cette requête est très puissante et qu’elle va beaucoup nous aider pour mettre en place notre page d’accueil. Alors, tout d’abord, on va s’occuper du premier article.
1. Modifier l’apparence du premier article avec l’utilisation d’un 2ème loop
Si vous avez suivi l’ensemble des tutoriels sur la création d’un thème pour Wordpress, vous savez probablement ce qu’est le loop Wordpress. Si ce n’est pas le cas, dirigez-vous vers ces 3 articles . Ici, on va introduire un deuxième loop afin de différencier le premier article. Et le but ne va pas uniquement être de styliser différemment le premier article mais aussi et surtout de pouvoir choisir l’article que l’on veut voir apparaître ici.
“Alors, comment on introduit ce deuxième loop ?” Et bien, en fait, vous allez créer un nouveau template, que vous allez appeler “featured.php”. Vous allez y coller le contenu du template index.php de votre thème qui contient, normalement, le loop Wordpress. Ou alors, si vous êtes sous k2, il se trouve dans le template “theloop.php”. Ici, on ne va garder que le loop. Donc éliminez toutes les données qui sont au-dessus de:
<?php while ( have_posts() ) : the_post() ?>Et tout ce qu’il y en dessous de:
<?php endwhile ?>Il vous reste ainsi le loop Wordpress. A ce nouveau loop, on va lui donner des classes spécifiques pour ce qui est du titre de l’article, du contenu ou encore des méta-données. Avec des classes spécifiques, cet article apparaîtra différemment de ceux de l’index. Prenons un exemple. Vous voulez que votre premier article soit affiché avec un fond gris clair, disons de la couleur #ccc. Pour cela, il va vous falloir attribuer une classe spécifique dans le template “featured.php” pour que les changements apparaissent uniquement sur cet article et non sur les autres. Pour cela, vous pouvez très bien modifier la balise “post” mais le plus simple est d’ajouter une balise qui va l’entourer. En effet, comme ça, vous pouvez facilement ajouter un intitulé à ce premier post. Du coup, on obtient quelque chose comme ça:
<div class= "featured">
<div id="post-<?php the_ID() ?>
...
</div><!-- .post -->
</div>
Ensuite, allez dans votre fichier CSS, et tapez par exemple la ligne de code suivante:
div#featured {
background-color: #ccc;
}
Puis, avant de terminer le tout, il va falloir aller insérer la ligne de code dans le template index pour que ce deuxième loop soit visible. Pour cela insérez la ligne de code suivante avant le loop principal:
<?php include (TEMPLATEPATH . "/featured.php"); ?>Mais si vous en restez là et que vous retournez sur la page d’accueil de votre blog, vous allez voir 2 fois vos articles apparaître, dont la première série avec un fond gris. C’est là que l’on va utiliser les “query_posts”. Si vous souhaitez uniquement afficher le dernier article dans le “featured”, vous allez alors dire au loop d’afficher uniquement 1 article. Il affichera automatiquement le dernier sorti chronologiquement. Pour cela, vous allez placer le code suivant AVANT le loop:
<?php query_posts('showposts=1'); ?>…puis le loop qui commence avec
<?php while ( have_posts() ) : the_post() ?>Dans ce cas-là , vous allez n’avoir que le dernier article qui apparaît en gris en haut de votre page d’accueil. Mais ce n’est toujours pas fini, parce que cet article se retrouve aussi dans les articles du dessous puisqu’on est ici dans l’index et qu’il affiche l’ensemble des articles. Il va donc falloir lui dire de ne pas afficher le dernier article, grâce à la condition “offset” du “query_posts”.
Donc, allez dans votre fichier index, et toujours AVANT le loop, insérez la ligne de code suivante:
<?php query_posts('offset=1'); ?>Rafraîchissez le navigateur, vous avez maintenant votre dernier article qui est “stylisé” différemment que les autres articles. Mais ce n’est que le début ! Demain, on verra différentes possibilités pour mettre cet article en lumière, pour véritablement le différencier des autres.
![[]](http://m3.moostik.net/img/?pseudo=fran6art&option=invisible)
Comme d’habitude, excellent tuto. J’attend avec impatience la suite !
Je crois que tout ça va m’intéresser au plus haut point pour le projet que je développe actuellement… je me le garde sous le coude cet article
Merci Fran6 pour ce tuto… Tout fonctionne nikel hormis ma sidebar qui réagit très mal à ces 2 loops.
En effet, dans ma sidebar, j’ai un menu “Catégorie”. Quelque soit la catégorie dans laquel je clique, tous les articles (toutes catégories confondues) s’affiche.
Dès que je retire de l’index.php le code suivant (se trouvant avant le loop), tout rentre dans l’ordre:
Bizarre !
Redsan > Ton code est parti en vrille sur le commentaire. Peux- tu le réécrire avec des /* et */ par exemple, peut-être que ça fonctionnera mieux…
Ou alors n’inclues pas les < et > du php…
Merci Fran6
Une question:
Dans quel fichier doit-on mettre “” ??
Merci
Je disais:
Dans mon index.php de mon thème, dès que je retire le code suivant:
?php query_posts(’showposts=1′); ?
?php query_posts(’offset=1′); ?
qui se trouvant entre
?php if (have_posts()) : ?
et
?php while (have_posts()) : the_post(); ?
tout rentre dans l’ordre.
Ai-je fait une erreur quelque part? (pour mon featured.php a bien été créer avec uniquement le loop)
As-tu une piste stp ?
Désolé de polluer de commentaire mais lorsque tu parle de “premier article” tu parles du premier en date ou du 1er en partant du haut.
Je pose la question, car j’ai scrupuleusement suivi le tuto, tout roule jusqu’au moment ou je remarque mes articles en doublon. Mes articles “featured” sont bien en haut de la page. Mais dès lors que j’insere le code ?php query_posts(â??showposts=1â?²); ? pour n’avoir qu’un seul article “featured”, j’ai le résultat inverse, à savoir que ce sont mes articles non featured (donc en bas de page, qui sont réduit au nombre de 1.
Merci pour ton aide.
Je m’arrache les cheveux.
Redsan > Il faut que ta query soit placée AVANT le loop donc avant have_posts() et visiblement, toi déjà tu en as 2: “if” et un “while”. Tu appelles donc 2 fois les articles. Il faut donc que tu mettes la query avant le if ou le while selon ce que ton thème utilise.
Ensuite, il ne te faut qu’une query qui va dire: showpost=1&offset=1 et non 2 queries séparées.
Et puis enfin, il faut que tu crées autant de loops que de queries.
Merci Fran6.
J’ai intégré la query “showpost=1&offset=1″ dans mon index.php, ce qui donne:
?php get_header(); ?
?php include (TEMPLATEPATH . “/featured.php”); ?
?php query_posts(’showpost=1&offset=1′); ?
?php if (have_posts()) : ?
?php while (have_posts()) : the_post(); ?
…..
Le résultat est le suivant:
Tout en haut de ma page d’accueil, au lieu de n’avoir que le dernier article en date avec le style featured, j’ai tout mes articles (au nombre de 3 au total) avec le style featured. Suivent ensuite, avec lestyle classique, tous ces memes articles moins le dernier article en date.
Je t’avoue que je n’y comprend plus rien (pourtant pas étranger au php).
Ouf, après 2heures de pause et 1heure de recherche, j’ai trouver le bug de mon thème.
Merci pour ton aide Fran6 !
Une excellente technique qui présente tout de même un problème. Une fois ces deux loop mis en place, les fonctions NEXT et PREVIOUS_POSTS_LINK sont totalement inopérantes.
C’est vraiment dommage car ce type d’aménagement de la page d’accueil permet de différencier nettement sa template de ce que l’on peut voir un peu partout.
Est-ce du a une erreur? Existe t-il une solution?