Francis Chouquet Graphiste Lettering

CSS WordPress: Changer l’apparence du dernier article en homepage

0

Ca y est, c’est reparti pour une nouvelle vague de tutoriels pour WordPress ! Comme je vous l’avais dit précédemment, on va notamment aborder le côté graphique pour donner un style unique à son blog, mais il sera également important de connaître pas mal d’astuces pour avoir une page d’accueil différente et qui puisse être organisée différemment.

Alors, pour commencer, je vais vous expliquer simplement comme changer l’apparence du dernier billet, celui qui est tout en haut de la homepage. Aujourd’hui, on va s’occuper principalement des CSS et dans le prochain tutoriel, je vous expliquerai comment choisir l’article que vous souhaitez voir apparaître en haut de cette même page. Les balises mentionnées dans ce tuto ne sont pas applicables à tous les thèmes. Je sais qu’elles fonctionnent avec k2, Sandbox ainsi qu’un grand nombre de thèmes, mais je ne peux pas vous affirmer à 100% que ça fonctionnera pour tous les thèmes. J’ai cherché de la documentation sur le web, mais je n’ai trouvé aucune source à ce sujet.

Pour différencier le dernier post affiché de manière standard sur la page d’accueil de votre blog, il faut comprendre que l’on ne va pas dire à WordPress de donner un style un « dernier post », mais plutôt au « premier post de la page ». Ce qui veut dire que l’on va moduler les CSS pour le premier article de la page d’accueil, qu’il soit le dernier chronologiquement, ou que ce soit un autre article que vous ayez décidé de promouvoir en haut de la homepage.

Ce premier article prend la balise p1, ou div.p1. Ainsi, si vous appliquez un style à div.p1{ }, pour chaque page de votre blog, que ce soit les catégories, archives et autres recherches, vous aurez le premier article de la page avec une apparence différente. D’ailleurs, si vous souhaitez modifier un autre article que le premier, il suffit de prendre son positionnement, par exemple 3ème article en partant du haut et de lui attribuer la balise div.p3.

Maintenant, on veut uniquement modifier l’apparence du premier article de la page d’accueil. Pour cela, on va lui ajouter deux notions importantes: body et home. On est dans la balise « body » et celle correspondant à la page d’accueil est « home ». On va donc les ajouter à la div précédente du premier article, et ça donne:

body.home div.p1 { données CSS }

A partir de là, vous allez pouvoir changer l’apparence pour l’ensemble du premier article et décliner les styles à ses sous-ensembles, comme par exemple le titre, le contenu ou les méta-données. Sympa non ? Et ainsi, l’article placé tout en haut, et qui, pour le moment, est le dernier, va apparaître différemment. Je trouve que c’est un bon début pour donner à son blog l’apparence d’un véritable site web.

Dans le prochain tutoriel, on va voir comment choisir, de manière tout à fait libre, l’article que l’on veut voir apparaître en haut de la homepage. Si vous avez des difficultés à modifier le dernier article avec votre thème, n’hésitez pas à laisser un commentaire avec une URL pour que je vérifie la structure de votre blog.

18 Commentaires

  • super… je vais essayer de faire ça chez moi (BLOmiG ou Expression Libre)…!
    Juste une question : tous les thèmes utilisent body.home div.p1 { CSS } comme repérage du premier article, ou seulement celui crée en suivant tes tutos ?
    merci pour cet article clair et précis, comme d’hab ! 😉

  • J’ai regardé sur ton blog, blomig et ça ne semble pas possible. Déjà parce que tu n’as pas les infos pour le faire, et notamment le fameux p1 mais aussi parce que ton content ne contient pas tes articles. Donc si tu mets un fond gris par exemple dessus, il va apparaître dans une petite boîte au-dessus…

    Je vais regarder si on peut ajouter cette commande et comment…

    Edit: j’ai fait une petite copie d’écran pour te montrer ce que ça donnerait:

    image blomig avec background gris

  • Merci beaucoup pour cette réponse super rapide et complète !
    je ne perdrai pas de temps à essayer de mettre ça en place du coup. Merci à toi 🙂
    à bientôt

  • Le truc c’est que c’est surtout ton thème qui est très mal mis en style… 😉

  • fab

    Pour avoir div.p1 dans ma page html, je dois avoir quoi dans mon fichier php exactement ?

    Merci 🙂

  • fab > En fait, tu dois avoir à droite de l’ID du post, une classe ressemblant à un truc comme « post_class ». Mais finalement, je me rends compte que peu de thèmes l’ont…. 🙁

  • Le thème de mon blog ne l’a pas non plus ;(
    Il faut dire que dans ton thème Francis, tes posts possèdent une sacré ribambelle de classes !

    Merci pour l’info en tout cas, j’y penserai pour la création de mon prochain thème.

  • Cyril > Effectivement, mon blog est bien nourri aux classes !! Mais à la base k2 l’est très fortement !! 😉

  • fab

    J’ai essayé ça : « > mais vraissemblablement dans kubrick ça marche pas.
    Y’a pas un truc à ajouter dans functions.php pour que ça marche ?

  • fab

    toto">

  • fab

    Je disais : comme classe, j’ai essayé ça
    ?php echo $post_class; ?
    (entre des fleches bien sûr)

  • Si, il faut ajouter toute une panoplie de code. Voilà ce que ça donne pour Sandbox:

    http://www.fran6art.com/documents/functions.txt

    Mais si j’ai le temps demain, j’expliquerai comment procédér autrement même si c’est pas le top… en créant un deuxième loop… et ainsi tu peux customiser comme tu veux, avec des classes particulières, ton premier article…

  • fab

    cool, j’attends demain. Merci Francis (c’est plus des commentaires, c’est un tchat en live 😉

  • Si quelqu’un sait comment avoir plusieurs pages aux styles unique sur wordpress ce serait tip top qu’il fasse un post dessus 🙁

  • tres bon article, merci

Success, your comment is awaiting moderation.