Francis Chouquet Graphiste Lettering

Tutoriels WordPress: Modifier l’apparence de la page d’accueil, 1ère partie

0

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:

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

Et tout ce qu’il y en dessous de:

1 
<?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:

1 2 3 4 5 
<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:

1 2 3 
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:

1 
<?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:

1 2 
<?php query_posts('showposts=1'); ?></quickcode> ...puis le loop qui commence avec <quickcode:noclick><?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:

1 
<?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.

30 Commentaires

  • Stoody

    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 😉

  • Redsan

    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…

  • Redsan

    Merci Fran6

    Une question:
    Dans quel fichier doit-on mettre «  » ??

    Merci

  • Redsan

    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 ?

  • Redsan

    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.

  • Redsan

    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).

  • Redsan

    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?

  • tomi

    Bonjour

    avant de vous soumettre le probleme que je rencontre, je tenais a feliciter le ou les auteurs de tous ces billets-tutos, qui sont une veritable mine d’or pour les newbies de mon acabit.

    voila, je vous expose le petit souci que je rencontre:
    sur ma page d’accueil je souhaiterais afficher 5 articles par id, que j’aurais prealablement selectionne; je m’explique:

    je voudrais uniquement afficher (avec un query posts) les articles id 1, 5, 7, 10 et 13

    j’arrive bien a afficher l’id 1, mais lorsque j’essaie d’inserer un deuxieme, troisieme, …. loop ca ne marche pas.

    ….

    si je rajoute ce meme loop a la suite en modifiant simplement le parametre p=1 par p=5 pour retourner le billet id 5 plus rien ne fonctionne 🙁

    quelqu’un pourrait il m’indiquer ou se situe le souci et comment faire.

    merci & bonne fin de journee

  • jep

    bonjour
    j’ai un petit soucis, la reprise du 1er article se fait dans la sidebar?? et le css s’aplique pas avec les bonnes spécifications…
    ci-joint les premieres lignes de code de l’index, si tu as qques mn un de ces jours, peux-tu me dire ou je me suis emmelé, merci et bonne soirée :

  • jep

    bonjour
    j’ai un petit soucis, la reprise du 1er article se fait dans la sidebar?? et le css s’aplique pas avec les bonnes spécifications…
    ci-joint les premieres lignes de code de l’index, si tu as qques mn un de ces jours, peux-tu me dire ou je me suis emmelé, merci et bonne soirée :

    ?php get_header(); ?
    div id= »content »
    ?php include (TEMPLATEPATH . « /featured.php »); ?
    ?php if(have_posts()) : ?
    ?php query_posts(‘showposts=1’); ? /code
    div class= »quickcodenoclick » code
    ?php while ( have_posts() ) : the_post() ?

  • Bonjour,

    J’aimerais juste savoir comment :

    – faire apparaître tous mes mots clefs en page d’accueil
    – comment ranger mes « catégories » dans un « menu tiroir » permettant de ne pas les faire apparaitre toutes, mais de choisir.

    Cordialement, et merci d’avance

    Yannick

  • J’ai le même problème que jerome, la pagination ne fonctionne plus, c’est du à Quoi ?
    J’utilise le plug paginator .
    Dommage c’est vraiment pratique comme présentation.

  • Salut à tous, j’apporte ma pierre à l’édifice.

    J’ai rencontré le même soucis que Jérôme et qu’Aurélien mais… j’ai une solution !

    Il suffit de dire à la page de n’afficher l’article à la une (featured.php) que si on est sur la page d’accueil, ce qui se traduit en php par… (roulements de tambours !) :

    J’espère que ça en aidera quelques uns !

    Stéphane

  • Nouvel essai avec le code :

    //on crée la variable qui stockera le numéro de la page
    global $thePage ;

    //on récupère ce numéro via une commande php
    $thePage = $_SERVER[argc] ;

    //s’il est à 0, c’est qu’on est sur la page d’accueil donc…
    if( $thePage == 0 ){

    // on affiche l’article à la une
    include (TEMPLATEPATH . « /featured.php »);

    // enfin, on supprime ce meme article des articles suivants
    query_posts(‘offset=1&showposts=6’);

    }

  • Coquille

    Bonjour, tout d’abord je te remercie Francis pour tout tes tutoriaux geniaux =)
    je n’ai jamais eu aucun soucis mais la j’avoue que je bloc complètement.. j’arrive a créer le second Loop, mon article s’affiche en double sur la Homepage MAIS impossible de n’en faire apparaitre qu’un seul…
    Je pense que je dois mal placer mon code.. ou je ne sais pas.. je vous laisse mon code si quelqu’un peux m’aider.. je suis sur que c’est quelque chose de bête :

    ———Index.php =

    ———featured.php =

    <div id="post-

    ---------------------

    Voilà si quelqu'un peux me dire ou je me plante complet ce serais chouette car je commence vraiment à déperrir ;) merci merci d'avance !!!

  • Coquille

    zut je crois que le code n’est pas passé, je reprends :

    Featured.php ——————-

    div class= « featured »>
    div id= »post-?php the_ID() ?>

    ?php query_posts(‘showposts=1’); ?
    ?php while ( have_posts() ) : the_post() ?

    index.php -------------------

    ?php

    get_header();

    if (have_posts()): ?

    ol id="posts"
    ?php query_posts('offset=1'); ?
    ?php include (TEMPLATEPATH . "/featured.php"); ?
    ?php while (have_posts()) : the_post(); ?

  • Salut Fran6, quelle est la requête pour n’afficher que le dernier article à défaut du premier.
    Je te pose cette question car je pense placer la dernière actualité en début de page.
    Merci!

    Au fait j’ai bossé ton tuto en une journée et sa me motive du coup pour me lancer sur du 100% wordpress!

  • pjosngsbo7bsu, Kamagra europe, DJobOzB, [url=http://kamagrasvenska.ucoz.com/]Kamagra[/url], KKVxmSQ, http://kamagrasvenska.ucoz.com/ Kamagra internet apotheke holland, LvIMNvb.

  • zeutpgsbo7bsu, Viagra stories, jqkbQRt, [url=http://viagrasvenska.ucoz.com/]Viagra alternative[/url], JIhSJYq, http://viagrasvenska.ucoz.com/ Viagra, zDtYjhP.

  • Ce n’est pas ce que je cherchais mais c’est interessant quand meme.
    Bon maintenant je n’ai plus qu’a trouver sur votre site comment modifier une page article :p

  • yklgtgsbo7bsu, krqikmsfcn

  • Merci beaucoup pour cet article, j’ai trouvé la réponse à ma question… Je souhaitais effectivement mettre un article à la une sans qu’il n’apparaisse en doublon.

    Chose fait avec votre ligne de code :

    Merci beaucoup !!!

Success, your comment is awaiting moderation.