J'ai donc un wp_query
qui reçoit les 5 publications les plus récentes de mon site Wordpress. Ce que je veux faire, c’est au sein de cette requête, récupérez le post le plus récent et affichez-le comme une sorte de post "héros", puis prenez les 4 autres posts (peut être plus de 4 si je change la requête à une date ultérieure). ) et montrer dans une liste ou une grille ci-dessous ce poste de héros.
Voici mon code de requête jusqu'à présent (évidemment simplifié):
<?php
$query_args = array(
"posts_per_page" => "5"
);
$listedPosts = new WP_Query($query_args);
// the loop
if ( $listedPosts->have_posts() ) {
while ( $listedPosts->have_posts() ) {
$listedPosts->the_post();
// loop content for hero post goes here (I need to get the most recent post).
}
}
// how would I show the other remaining posts in the query?
?>
Vous pouvez utiliser $current_post
PROPRIÉTÉ DE WP_Query
$query_args = array(
"posts_per_page" => "5"
);
$listedPosts = new WP_Query($query_args);
// the loop
if ( $listedPosts->have_posts() ) {
while ( $listedPosts->have_posts() ) {
$listedPosts->the_post();
if ( (int) $listedPosts->current_post === 0 ) {
// loop content for hero post
} else {
// loop content for remaining posts
}
}
}
Changer vos arguments de requête en quelque chose comme ci-dessous ordonnera vos messages par date de modification.
$query_args = array(
"posts_per_page" => "5",
"orderby" => "modified",
"order" => "DESC"
);
Vous pouvez ensuite utiliser une condition simple if else dans la boucle et imprimer le premier message en tant que héros et le reste en dessous.
Un simple déclencheur boolean
fera l'affaire.
<?php
$query_args = array(
"posts_per_page" => "5"
);
$listedPosts = new WP_Query($query_args);
// the loop
if ( $listedPosts->have_posts() ) {
$first_post = true;
while ( $listedPosts->have_posts() ) {
$listedPosts->the_post();
if( $first_post ) {
$first_post = false;
echo '<div class="post first">';
// loop content for hero post goes here (I need to get the most recent post).
echo '</div>';
} else {
echo '<div class="post">';
// Rest of the posts.
echo '</div>';
}
}
}
?>
Utilisez ensuite la classe .post.first
pour styler les choses différemment. Vous pouvez également charger différents contenus, différents ordres/classes sur le contenu, différentes tailles d'image, etc.