Как разместить WordPress функции для моего цикла в аккордеоне

Поэтому я пытаюсь создать вертикальный аккордеон, и я хочу, чтобы в каждом разделе аккордеона был пост в блоге. Так что, по сути, у меня будет аккордеон с 5 последними постами. В каждом посте я буду указывать день, месяц и год, а также заголовок поста. Я предполагаю, что я буду делать с spanами или какой-то другой разметкой, используя PHP, но когда я добавляю нижеприведенный стандартный цикл в мой аккордеон, каждый способ, который я пробовал, дает разные, но не те результаты, которые я хотел получить. Я думаю, что для id = «ac-1/2/3/4 ..» мне придется придумать возрастающее число или что-то с PHP?

    if (have_posts()) :
while (have_posts()) : the_post(); ?>

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><h2>
<?php the_content(); ?>

<?php endwhile;

else :
echo '<p>Nothing here!</p>';

endif;

<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1">Blog Post 1</label>
<article class="ac-small">
<p>Blog Post 1 Content</p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox" checked />
<label for="ac-2">Blog Post 2</label>
<article class="ac-medium">
<p>Blog Post 2 Content</p>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3">Blog Post 3</label>
<article class="ac-large">
<p>Blog Post 3 Content</p>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1" type="checkbox" />
<label for="ac-4">Blog Post 4</label>
<article class="ac-large">
<p>Blog Post 4 Content</p>
</article>
</div>
</section>

Кто-нибудь понял, что я говорю? Я могу получить выходные данные с этими функциями цикла, но это не получается, потому что я считаю, что каждый вход с другим идентификатором вызывает путаницу. Это в моем header.php конечно.

Очень ценю за ваше время / помощь.

0

Решение

Вы можете делать то, что вы хотите с простой переменной счетчика:

<section class="ac-container">
<?php
$counter = 0;
if (have_posts()) :
while (have_posts()) : the_post(); $counter++; ?>
<div>
<input id="ac-<?php echo $counter;?>" name="accordion-1" type="checkbox" />
<label for="ac-<?php echo $counter;?>"><?php the_title();?></label>
<article class="ac-small">
<?php the_content();?>
</article>
</div>
<?php endwhile;

else :
echo '<p>Nothing here!</p>';

endif;?>
</section>
1

Другие решения

Других решений пока нет …