如何 post wordpress 函数在手风琴中循环

How to post wordpress functions for my loop in an accordion

所以我正在尝试创建一个垂直手风琴,我希望手风琴的每个部分都有一个博客 post。所以基本上,我将有一个手风琴,其中有 5 个最新的 posts。在每个 post 中,我将包括日期、月份和年份以及 post 的标题。我假设这些我将使用 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>

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

非常感谢您 time/help。

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

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