Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Utiliser deux boucles pour afficher différement votre premier article de blog

by
Difficulty:IntermediateLength:MediumLanguages:

French (Français) translation by Romain Briand (you can also view the original English article)

Je crois qu'il est normal de penser que si vous êtes blogueur, vous désirez mettre en avant le contenu le plus récent sur votre blog afin que les visiteurs le remarque et le le lise. Il y a plusieurs façons de faire ça, notamment en utilisant un style différent sur le premier article de votre page de blog afin de le mettre en avant ou en l'affichant dans votre barre latérale de façon proéminente.

Dans ce tutoriel, je vais vous montrer comment aller un peu plus loin que vous ne le pouviez en utilisant CSS : au lieu de simplement styliser différemment votre premier article de blog, vous allez afficher du contenu différent pour celui-ci. Plus spécifiquement, le premier article aura un titre, l'image à la une et le contenu mis en avant alors que les autres articles auront juste le titre, l'image à la une et le résumé.

Vous pouvez adapter cette technique : si vous ne désirez pas autant de détails, vous pouvez modifier la boucle de chacune des requêtes pour faire en sorte, par exemple, que le premier article ait le titre, l'image à la une et le résumé alors que les autres auront juste le titre et l'image. Ou vous pouvez aussi retirer l'image à la une pour les articles suivants. À vous de voir.

La technique que nous utiliserons implique l'utilisation de le classe WP_Query afin d'écrire une requête supplémentaire avant la requête principale dans le fichier home.php du thème qui gère la page principale du blog. Nous utiliserons ensuite pre_get_posts() pour modifier la requête principale afin que l'article le plus récent n'apparaisse pas deux fois. Je vais créer un thème enfant au thème par défaut Twenty Fifteen et créer un fichier home.php ainsi qu'une feuille de style pour mettre en place le thème enfant.

Ce dont vous aurez besoin

Pour suivre ce tutoriel, vous aurez besoin :

  • d'une installation Wordpress de développement
  • le thème Twenty Fifteen installé (mais vous pouvez travailler avec votre propre thème si vous préférez)
  • Des articles ajoutés à votre site — les miens ont pour la plupart été importé avec 
  • un éditeur de code

Création du thème enfant

Si vous travaillez avec le thème Twenty Fifteen, la première étape consiste à créer votre thème enfant. Créer un nouveau répertoire dans le dossier wp-content/themes et donnez lui un nom. J'appelle le mien tutsplus-blog-page-two-loops. Maintenant, créons un fichier style.css dans ce répertoire et ajoutons-y le code suivant :

On indique à Wordpress que votre thème est un thème enfant de Twenty Fifteen et on importe la feuille de style de ce thème. Vous pouvez si vous le voulez modifier certaines informations pour indiquer que c'est votre thème.

Créer un fichier de thème pour la page du blog

Comme c'est la page principale du blog que nous souhaitons modifier, nous allons créer un fichier de thème pour ça dans votre thème enfant. Le fichier de thème que vous devez créer est home.php qui gère la page principale du blog que ça soit ou non la page d'accueil de votre site.

Créez un fichier nommé home.php dans le répertoire de votre thème.

Ensuite, ouvrez le fichier index.php de Twenty Fifteen et copiez le code présent au début et à la fin du fichier (pas la boucle) Votre fichier devrait ressembler à ça :

Si vous utilisez votre propre thème, copiez le code équivalent depuis le fichier index.php afin d'avoir les éléments englobants de votre page mais pas la boucle.

Ajouter la première boucle

La prochaine étape est de créer une première boucle qui affichera intégralement l'article le plus récent.

Juste après la balise fermante </header>, ajoutez dans votre fichier home.php les arguments pour la requête.

On va simplement requêter l'article le plus récent. Notez que vous n'avez pas à préciser le type de contenu et que par défaut c'est 'post'.

Ensuite, ajoutez la boucle juste après vos arguments :

Cette boucle affiche le titre de l'article, l'image à la une s'il y en a une et le contenu.

Remarquez que j'ai ajouté une classe supplémentaire, .first-post, dans la fonction de référence post_class(). Si vous désirez mettre en avant votre premier article en utilisant CSS, cette classe supplémentaire vous donne un moyen simple de le faire.

Il est très important que vous ajoutiez rewind_posts() après cette bouche sinon la prochaine ne fonctionnera pas.

Ajouter la seconde boucle

La seconde boucle est très similaire mais au lieu d'utiliser WP_Query, on accède juste à la requête principale.

Rajoutons la seconde boucle après celle que nous venons juste de créer :

Cette boucle est très similaire à la première mais avec deux différences :

  • On affiche le résumé au lieu du contenu
  • On n'ajoute pas la classe .first-post class.

Sauvegardez votre fichier.

Décaler la requête principale en utilisant pre_get_posts

Si vous vérifiez votre page de blog principal actuelle, vous verrez que votre article le plus récent est affiché deux fois. Nous allons réparer ça en décalant la requête principale avec le hook pre_get_posts.

Créez un nouveau fichier dans votre thème nommé functions.php. Si vous travaillez avec votre propre thème et que celui-ci a déjà un fichier de fonctions, ouvrez-le.

Ajoutez ce code à votre fichier de fonctions :

Cela permet de filtrer la requête principale seulement sur la page d'accueil en ajoutant un décalage de 1.

Maintenant, enregistrez votre fichier et regardons votre page principale de blog :

Main blog page showing both sticky post and most recent post

Il y a un problème. Comme mon blog a un article épinglé, il est affiché avant mon article le plus récent et ce n'est pas ce que je veux. De plus il affiche l'intégralité du contenu à la fois de l'article le plus récent et de l'article épinglé.

Corriger les articles éplinglés

Ceci est facilement corrigeable. Ouvrez votre fichier home.php à nouveau et ajoutez un nouvel argument aux arguments de la première requête :

Ceci nous assurera que Wordpress ignore les articles épinglés lorsqu'il effectuera la première boucle. Votre premier jeu d'arguments de requête va désormais ressembler à ça :

Enregistrez le fichier à nouveau et vérifiez votre page de blog :

Blog page with most recent post at the top

C'est mieux ! L'article le plus récent est en haut au complet et l'article épinglé est bien en-dessous avec seulement son résumé. Si vous descendez plus loin dans la page, vous verrez que les autres articles présentent eux aussi seulement le résumé.

Blog page with posts showing excerpts only

Si vous souhaitez ignorer les articles épinglés dans votre deuxième boucle, vous pouvez le faire en ajoutant l'argument ignore_sticky_posts à votre deuxième requête. Je ne le ferai par car je souhaite garder tel quel le fonctionnement des articles épinglés.

Réparer la pagination

Vous remarquerez que si vous naviguez dans la deuxième page d’articles et les suivantes de votre blog, les mêmes articles sont affichés que sur la première page ce qui veut dire que seulement les dix articles les plus récents sont affichés ! Ceci est dû au décalage dans la requête principale qui a cassé la pagination.

Heureusement, on peut corriger cela simplement en modifiant la fonction que vous avez ajouté au hook pre_get_posts.

Ouvrez votre fichier functions.php à nouveau et modifiez la fonction comme ci-dessous :

Ce que avons fait ici, c'est ajouter le marqueur conditionnel is_paged Il permet de vérifier si le visiteur est en train de visiter une version paginée de la liste des articles (après la première page). En utilisant !$query->is_paged(), on s'assure que la requête sera décalée seulement si on est sur la première page.

Sauvegardez votre fichier et vérifiez à nouveau. La pagination fonctionne correctement désormais.

Vous remarquerez que le même article récent s'affiche toujours en haut de chaque page. C'est à cause de la page qui utilise le même fichier de thème et nos deux mêmes boucles.

Pour mon site, cela me convient de laisser ça comme ça parce que je veux que mon dernier article soit bien mis en avant. Toutefois, si vous voulez éviter ça, il vous suffit simplement d'ajouter un argument supplémentaire dans votre première requête, à savoir 'paged' => false.

Résumé

Modifier la façon dont votre page principale de blog affiche les articles est facile à réaliser en utilisant la classe WP_Query avec le hook pre_get_posts. Dans ce tutoriel nous avons appris comment :

  • ajouter une boucle supplémentaire à notre page de blog en utilisant WP_Query pour afficher le premier article intégralement.
  • modifier la requête principale afin que le dernier article n'apparaisse pas deux fois
  • corriger les erreurs avec les articles épinglés et la pagination

Vous pouvez adapter cette technique pour afficher le dernier article d'une catégorie donnée ou utiliser du contenu différent dans une boucle et bien plus encore.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.