php - 如何在 Accordion 中为我的循环发布 wordpress 函数

Question

所以我正在尝试创建一个垂直 Accordion ，并且 Accordion 的每个部分，我都希望有一篇博文。所以基本上，我将 Accordion 与 5 个最新帖子。在每篇文章中，我将包括日期、月份和年份以及文章的标题。我假设这些我将使用 PHP 处理 span 或其他一些标记，但是当我将以下标准循环添加到 Accordion 时，我尝试过的每种方式都会产生不同的结果，但不是我想要的结果。我在考虑 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>

---

有人明白我在说什么吗？我可以使用这些循环函数获得输出，但结果不正确，因为我相信每个具有不同 ID 的输入都会造成混淆。这当然在我的 header.php 中。

非常感谢您的时间/帮助。

Answer 1

你可以用一个简单的计数器变量做你想做的事:

<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>