Я пытаюсь создать цикл, в котором первый элемент выглядит иначе, чем оставшийся элемент.
Ниже приведен код, который я сейчас написал. Однако второй цикл по-прежнему отображает первый элемент, поэтому я, вероятно, делаю что-то не так.
<?php
$book_ids = array(5, 7, 8, 12);
$book_args = array(
'post_type' => 'book',
'post_status' => 'publish',
'posts_per_page' => 4,
'post__in' => $book_ids,
'orderby' => 'post__in'
);
$book_loop = new WP_Query( $book_args );
// Check if there are any posts that match the query
if ( $book_loop->have_posts() ) :
// Initialize the post counter
$book_featured = 0;
?>
<div class = "library__featured-books">
<div class = "featured-books__wrapper">
<div class = "featured-books__primary">
<!-- Begin first item loop -->
<?php
// If there are posts matching the query then start the loop
while ( $book_loop->have_posts() ) : $book_loop->the_post();
if ( $book_featured == 0 ) :
?>
<div class = "book-card">
<a href = "<?php the_permalink(); ?>" class = "book-card__link">
<div class = "book-card__image">
<img src = "<?php echo get_the_post_thumbnail( get_the_ID(), 'full' ); ?>" alt = "" />
</div>
<div class = "book-card__caption">
<div class = "caption__wrapper">
<h3 class = "caption__title"><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
</div>
</div>
</a>
</div>
<?php
endif;
// Add 1 to the post counter
$book_featured++;
// Stop the loop when all posts are displayed
endwhile;
?>
<!-- End first item loop -->
</div>
<div class = "featured-books__secondary">
<div class = "secondary__wrapper">
<!-- Begin loop of remaining items -->
<?php
// If there are posts matching the query then start the loop
while ( $book_loop->have_posts() ) : $book_loop->the_post();
if ( $book_featured >= 2 ) :
?>
<div class = "seconardary__block">
<div class = "book-card">
<a href = "<?php the_permalink(); ?>" class = "book-card__link">
<div class = "book-card__image">
<img src = "<?php echo get_the_post_thumbnail( get_the_ID(), 'full' ); ?>" alt = "" />
</div>
<div class = "book-card__wrapper">
<div class = "book-card__caption">
<h3 class = "caption__title"><?php the_title(); ?></h3>
</div>
</div>
</a>
</div>
</div>
<?php
endif;
// Add 1 to the post counter
$book_featured++;
// Stop the loop when all posts are displayed
endwhile;
?>
<!-- End loop of remaining items -->
</div>
</div>
</div>
</div>
<?php
endif;
wp_reset_postdata();
?>
В этом примере я использовал две петли. Пожалуйста, не стесняйтесь улучшить это, если это возможно. Любая помощь приветствуется.
В некоторых случаях для этого даже не нужен PHP. Рассмотрите возможность использования селектора .book-card:first-child
CSS.
Вы можете попробовать код ниже:
<?php
$book_ids = array(5, 7, 8, 12);
$book_args = array(
'post_type' => 'book',
'post_status' => 'publish',
'posts_per_page' => 4,
'post__in' => $book_ids,
'orderby' => 'post__in'
);
$book_loop = new WP_Query( $book_args );
// Check if there are any posts that match the query
if ( $book_loop->have_posts() ) :
// Initialize the post counter
$book_featured = 0;
?>
<div class = "library__featured-books">
<div class = "featured-books__wrapper">
<div class = "featured-books__primary">
<!-- Begin first item loop -->
<?php
// If there are posts matching the query then start the loop
while ( $book_loop->have_posts() ) : $book_loop->the_post();
if ( $book_featured == 0 ) :
?>
<div class = "book-card">
<a href = "<?php the_permalink(); ?>" class = "book-card__link">
<div class = "book-card__image">
<img src = "<?php echo get_the_post_thumbnail( get_the_ID(), 'full' ); ?>" alt = "" />
</div>
<div class = "book-card__caption">
<div class = "caption__wrapper">
<h3 class = "caption__title"><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
</div>
</div>
</a>
</div>
<?php
endif;
// Add 1 to the post counter
$book_featured++;
// Stop the loop when all posts are displayed
endwhile;
?>
<!-- End first item loop -->
</div>
<div class = "featured-books__secondary">
<div class = "secondary__wrapper">
<!-- Begin loop of remaining items -->
<?php
//reset the value on the variable
$book_featured = 0;
// the query then start the loop
while ( $book_loop->have_posts() ) : $book_loop->the_post();
if ( $book_featured >= 1 ) :
?>
<div class = "seconardary__block">
<div class = "book-card">
<a href = "<?php the_permalink(); ?>" class = "book-card__link">
<div class = "book-card__image">
<img src = "<?php echo get_the_post_thumbnail( get_the_ID(), 'full' ); ?>" alt = "" />
</div>
<div class = "book-card__wrapper">
<div class = "book-card__caption">
<h3 class = "caption__title"><?php the_title(); ?></h3>
</div>
</div>
</a>
</div>
</div>
<?php
endif;
// Add 1 to the post counter
$book_featured++;
// Stop the loop when all posts are displayed
endwhile;
?>
<!-- End loop of remaining items -->
</div>
</div>
</div>
</div>
<?php
endif;
wp_reset_postdata();
?>
Делайте это в одну петлю, а не в две. Используйте простой логический флаг, чтобы определить, обрабатываете ли вы в настоящее время первый элемент или нет, и создайте соответствующий вывод.