0

我希望能够在我的 index.php 页面上显示来自同一类别的 3 个帖子，但是由于我网站的 HTML/CSS 编码方式，我很难理解使用循环执行此操作的正确方法（因为三个部分使用的 div 的代码并不相同，它使用不同的 CSS 样式来实现分层效果/外观）。

这是HTML代码。

<div id="first-story" class="story">
<div class="content">
<h3 class="story-heading">Headline 1</h3>
    <ul>
       <li>Nullam sit amet scelerisque est. </li>   
       <li>Aliquam erat volutpat. Duis sed nisi nunc, faucibus rutrum mauris. </li>
       <li>Nullam iaculis lorem ut tortor ullamco per aliquet. Integer id leo non mauris pulvinar gravida vitae a enim. </li>
       <li>Nullam sit amet scelerisque est.</li>
    </ul>   
        <a class="learnmore" href="#"><img src="img/button-learnmore.png"></a></div>
    <div class="edge"></div>
</div>

<div id="second-story" class="story">
    <div class="content">
       <h3 class="story-heading">Headline 2</h3>
       <p>Paragraph text</p>
       <a class="learnmore" href="#"><img src="img/button-learnmore.png"></a></div>
    </div>
</div>

<div id="third-story" class="story">
    <div class="edge"></div>
    <div class="content">Headline 3</div>
            <ul>
               <li>List item</li>
            </ul>
            <a class="learnmore" href="#"><img src="img/button-learnmore.png"></a></div>
</div>

任何帮助将不胜感激。

4

1 回答 1

4

快速，讨厌并且会完成工作（显然需要添加 the_content(); 等）

<?php 

$i = 1;
?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php if ($i == 1) { ?>
    <div id="first-story" class="story">
        <div class="content">  
            <h3 class="story-heading"><?php the_title(); ?></h3>
            <ul>
               <li>Nullam sit amet scelerisque est. </li>   
               <li>Aliquam erat volutpat. Duis sed nisi nunc, faucibus rutrum mauris. </li>
               <li>Nullam iaculis lorem ut tortor ullamco per aliquet. Integer id leo non mauris pulvinar gravida vitae a enim. </li>
               <li>Nullam sit amet scelerisque est.</li>
            </ul>   
            <a class="learnmore" href="<?php the_permalink(); ?></a>"><img src="img/button-learnmore.png"></a></div>
            <div class="edge"></div>
        </div>
<?php } elseif ($i == 2) { ?>

                <div id="second-story" class="story">
                    <div class="content">
                       <h3 class="story-heading"><?php the_title(); ?></h3>
                       <p>Paragraph text</p>
                       <a class="learnmore" href="<?php the_permalink(); ?>"><img src="img/button-learnmore.png"></a></div>
                    </div>
                </div>
<?php } else { ?>
                <div id="third-story" class="story">
                    <div class="edge"></div>
                    <div class="content"><?php the_title(); ?></div>
                            <ul>
                               <li>List item</li>
                            </ul>
                            <a class="learnmore" href="<?php the_permalink(); ?>"><img src="img/button-learnmore.png"></a></div>
                </div>
<?php } ?>
    <?php $i++; ?>
    <?php endwhile; ?>
<?php endif; ?>
于 2013-01-31T11:03:52.737 回答