Share
Je pense qu'il est prudent de dire que si vous êtes un blogueur, vous souhaitez mettre en valeur le contenu le plus récent de votre blog afin que les gens le repèrent et le lisent. Vous pouvez le faire de différentes manières, notamment en utilisant un style différent pour le premier message de votre page de blog afin de le mettre en surbrillance ou en l'affichant bien en évidence dans votre barre latérale..
Dans ce didacticiel, je vais vous montrer comment aller un peu plus loin que l'utilisation de CSS: au lieu de simplement styliser différemment votre premier article de blog, vous créerez un contenu différent. Plus précisément, le premier article aura un titre, une image sélectionnée et un contenu, tandis que les autres articles n’auront que le titre, l’image principale et un extrait..
Vous pouvez adapter cette technique: si vous ne voulez pas avoir autant de détails, vous pouvez modifier la boucle dans chacune des requêtes avec lesquelles nous allons travailler afin que (par exemple) le premier message ait un titre, une image et un extrait, tandis que d'autres avoir juste le titre et l'image. Ou vous pouvez laisser de côté l'image sélectionnée pour les messages suivants. C'est à vous.
La technique que nous allons utiliser pour cela implique l’utilisation du WP_Query classe pour écrire une requête supplémentaire avant la requête principale du home.php fichier modèle, qui pilote la page principale du blog. Nous utiliserons ensuite pre_get_posts () pour modifier la requête principale de sorte que le message le plus récent ne soit pas publié deux fois. Je vais créer un thème enfant du thème par défaut Twenty Fifteen et créer un home.php fichier pour cela, plus une feuille de style pour configurer le thème de l'enfant.
Pour suivre ce tutoriel, vous aurez besoin de:
Si vous travaillez avec le thème Twenty Fifteen, la première étape consiste à configurer le thème de votre enfant. Créez un nouveau dossier dans votre wp-content / themes répertoire et donnez-lui un nom, j'appelle le mien tutsplus-blog-page-deux-boucles. Maintenant, créez un vide style.css fichier dans ce dossier et ajoutez ce qui suit:
Accentsconagua
/ * Nom du thème: Tuts + Utilisez deux boucles sur votre page de blog principale URI du thème: http://rachelmccollin.co.uk/wptutsplus-taxonomy-archive-list-by-second-taxonomy/ Description: thème de prise en charge du didacticiel WPTutsPlus sur la création. une archive de taxonomie personnalisée. Thème de l'enfant pour le thème des vingt-quinze. Auteur: Rachel McCollin Auteur URI: http://rachelmccollin.co.uk/ Modèle: vingt-cinq ans Version: 1.0 * / @import url ("… /twentyfifteen/style.css");Cela indique à WordPress que votre thème est un enfant du thème Twenty Fifteen et importe la feuille de style à partir de ce thème. Vous voudrez probablement modifier certains détails pour refléter le fait que ce soit votre thème..
Comme il s’agit de la page de blog principale que vous souhaitez modifier, vous devez créer un fichier modèle pour cela dans votre thème enfant. Le fichier modèle que vous devez créer est home.php, qui alimente la page principale du blog, que ce soit ou non la page d'accueil de votre site.
Créez un fichier appelé home.php dans votre dossier de thème.
Maintenant ouvrez le index.php fichier dans Twenty Fifteen et copiez le code au début et à la fin de ce fichier (c’est-à-dire pas la boucle). Votre fichier ressemblera à quelque chose comme ça:
__ ('Page précédente', 'vingt-quinze'), 'next_text' => __ ('Page suivante', 'vingt-quinze'), 'before_page_number' => ''. __ ('Page', 'vingt-quinze'). ' ',)); ?>
Si vous utilisez votre propre thème, copiez le code équivalent de celui de votre thème. index.php fichier à la place, de sorte que vous ayez les éléments qui contiennent pour votre page mais pas de boucle.
La prochaine étape consiste à créer la première boucle, qui affichera l'intégralité du message le plus récent..
Sous la fermeture tag dans votre home.php fichier, ajoutez les arguments de la requête:
$ args = array ('posts_per_page' => '1',);Cela demandera juste pour le post le plus récent. Notez que vous n’avez pas à inclure le type de publication, et sa valeur par défaut est 'poster'.
Ajoutez maintenant la boucle sous vos arguments:
$ query = new WP_query ($ args); if ($ query-> have_posts ()) ?> have_posts ()): $ query-> the_post (); / * démarre la boucle * /?>> ', esc_url (get_permalink ())),''); ?> "> 'left', 'alt' => trim (strip_tags ($ wp_postmeta -> _ wp_attachment_image_alt)))); ?>
Cette boucle génère le titre du message, la vignette s’il en existe un et le contenu..
Notez que j'ai ajouté une classe supplémentaire, .premier poste, dans le post_class () balise de modèle. Si vous souhaitez mettre en valeur votre premier message en utilisant CSS, ce cours supplémentaire vous permet de le faire facilement..
Il est très important que vous ajoutiez rewind_posts () après la boucle, sinon la prochaine boucle ne fonctionnera pas.
La deuxième boucle est très similaire, mais au lieu d'utiliser WP_Query, il suffit d'accéder à la requête principale.
Sous la boucle que vous venez d'ajouter, ajoutez la deuxième boucle:
> ', esc_url (get_permalink ())),''); ?> "> 'left', 'alt' => trim (strip_tags ($ wp_postmeta -> _ wp_attachment_image_alt)))); ?> "> Plus d'informations.
Cette boucle est très similaire à la première, mais avec deux différences:
.premier poste classe.Maintenant, sauvegardez votre fichier.
Pour le moment, si vous consultez la page principale de votre blog, vous constaterez que votre message le plus récent est affiché deux fois. Nous allons résoudre ce problème en décalant la requête principale en utilisant le pre_get_posts crochet.
Créez un nouveau fichier dans votre thème appelé functions.php. Alternativement, si vous travaillez avec votre propre thème et qu’il contient déjà un fichier de fonctions, ouvrez-le..
Ajoutez ce code à votre fichier de fonctions:
is_home () && $ query-> is_main_query ()) $ query-> set ('offset', '1'); add_action ('pre_get_posts', 'tutsplus_offset_main_query');Ceci filtre la requête principale mais seulement sur la page d'accueil, en ajoutant un décalage de 1.
Enregistrez maintenant votre fichier et jetez un coup d’œil sur votre page de blog principale:
Il ya un problème. Parce que mon blog a un post collant, celui-ci est affiché au-dessus du post le plus récent, ce qui n'est pas ce que je veux. Il affiche également l'intégralité du contenu du message le plus récent et du message collant..
Ceci est facilement corrigé. Ouvrez votre home.php fichier à nouveau et ajouter un autre argument aux arguments de votre première requête:
'ignore_sticky_posts' => true
Cela garantira que WordPress ignore les posts collants lors de l'exécution de la première boucle. Votre premier jeu d'arguments de requête ressemblera maintenant à ceci:
$ args = array ('posts_per_page' => '1', 'ignore_sticky_posts' => true);Enregistrez à nouveau le fichier et vérifiez la page de votre blog:
C'est mieux! Le message le plus récent est intégralement au sommet et le message collant se trouve en dessous, avec uniquement son extrait. Si vous faites défiler l'écran plus bas, vous verrez que les autres articles ne font que montrer un extrait:
Si vous voulez ignorer les posts collants dans votre seconde boucle, vous pouvez le faire en ajoutant le ignore_sticky_posts argument à votre deuxième requête. Je veux que les posts collants fonctionnent comme ils le devraient pour tous sauf mon dernier post, cependant, je ne le ferai donc pas..
Vous remarquerez que si vous naviguez vers la deuxième page et les pages suivantes de publications (les pages paginées) de votre blog, les mêmes publications sont affichées comme sur la première page, ce qui signifie que seules les dix publications les plus récentes sont affichées! Ceci est dû au fait que la requête principale a été décalée.
Heureusement, cela est facilement corrigé en modifiant la fonction que vous avez ajoutée à la liste. pre_get_posts crochet.
Ouvrez votre functions.php Fichier à nouveau et éditer la fonction pour qu'elle se lise comme ci-dessous:
function tutsplus_offset_main_query ($ query) if ($ query-> is_home () && $ query-> is_main_query () &&! $ query-> is_paged ()) $ query-> set ('offset', '1'); Ce que nous avons fait ici est ajouté le is_paged () balise conditionnelle. Ceci vérifie les pages paginées autres que la toute première, donc retourne vrai si le visiteur regarde la deuxième page ou les pages suivantes. En utilisant !$ query-> is_paged (), nous veillons à ce que la requête ne soit décalée que si la page est ne pas paginé.
Maintenant, sauvegardez votre fichier et vérifiez à nouveau. La pagination va maintenant fonctionner correctement.
Vous remarquerez que le même message récent est toujours affiché en haut de la page. En effet, la page utilise le même modèle et les mêmes deux boucles..
Sur mon site, je suis heureux de laisser cela tel quel car je souhaite que le post le plus récent soit très visible. Cependant, si vous voulez changer cela, vous ajouterez un argument supplémentaire à votre première requête, à savoir 'paginé' => faux.
Modifier la façon dont la page principale de votre blog affiche les messages est facilement effectué à l'aide de la touche WP_Query classe avec le pre_get_posts crochet. Dans ce tutoriel, vous avez appris à:
WP_Query pour publier le premier message en entierVous pouvez adapter cette technique pour afficher le dernier message d'une catégorie donnée, utiliser un contenu différent dans votre boucle, etc..
