使用循环在 Wordpress 中显示 3 个具有不同 HTML 标记的帖子 [英] Display 3 posts with different HTML markup in Wordpress using a loop

查看：32
本文介绍了使用循环在 Wordpress 中显示 3 个具有不同 HTML 标记的帖子的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

这是 HTML 代码.

<div class="内容"><h3 class="story-heading">标题 1</h3><ul><li>Nullam 坐 amet scelerisque est.</li><li>Aliquam erat volutpat.Duis sed nisi nunc, faucibus rut​​rum mauris.<li>Nullam iaculis lorem ut Tortor ullamco per aliquet.整数 id leo non mauris pulvinar gravida vitae a enim.<li>Nullam 坐 amet scelerisque est.</li><a class="learnmore" href="#"><img src="img/button-learnmore.png"></a></div><div class="edge"></div>
<div id="second-story" class="story"><div class="内容"><h3 class="story-heading">标题 2</h3><p>段落文本</p><a class="learnmore" href="#"><img src="img/button-learnmore.png"></a></div>

<div id="第三个故事" class="story"><div class="edge"></div><div class="content">标题 3</div><ul><li>列表项</li><a class="learnmore" href="#"><img src="img/button-learnmore.png"></a></div>

非常感谢任何帮助.

解决方案

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

<?php if (have_posts()) : ?><?php while (have_posts()) : the_post();?><?php if ($i == 1) { ?><div id="first-story" class="story"><div class="内容"><h3 class="story-heading"><?php the_title();?></h3><ul><li>Nullam 坐 amet scelerisque est.</li><li>Aliquam erat volutpat.Duis sed nisi nunc, faucibus rut​​rum mauris.<li>Nullam iaculis lorem ut Tortor ullamco per aliquet.整数 id leo non mauris pulvinar gravida vitae a enim.<li>Nullam 坐 amet scelerisque est.</li><a class="learnmore" href="<?php the_permalink(); ?></a>"><img src="img/button-learnmore.png"></a></div><div class="edge"></div>

<?php } elseif ($i == 2) { ?><div id="second-story" class="story"><div class="内容"><h3 class="story-heading"><?php the_title();?></h3><p>段落文本</p><a class="learnmore" href="<?php the_permalink(); ?>"><img src="img/button-learnmore.png"></a></div>

<?php } else { ?><div id="第三个故事" class="story"><div class="edge"></div><div class="content"><?php the_title();?></div><ul><li>列表项</li><a class="learnmore" href="<?php the_permalink(); ?>"><img src="img/button-learnmore.png"></a></div>

<?php } ?><?php $i++;?><?php endwhile;?><?php endif;?>

I want to be able to display 3 posts from the same category on my index.php page, but due to the way my site's HTML/CSS is coded I'm having some difficulty understanding the correct way to go about doing this using a loop (as the code for the divs being used are not the same for all three sections, it's using different CSS styles to achieve a layered effect/look ).

Here is the HTML code.

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

Any help would be very much appreciated.

解决方案

Quick, nasty and will get the job done (Obviously need to add the_content(); etc)

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

这篇关于使用循环在 Wordpress 中显示 3 个具有不同 HTML 标记的帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆