【问题标题】:Style post differently风格不同的帖子
【发布时间】:2016-04-06 17:18:04
【问题描述】:

我一直在四处寻找,但找不到合适的解决方案。我的目标是使第一篇文章的样式与其他文章不同。我将它们放在一个 3*3 的网格中,我想首先发布全角,在该帖子中添加日期和类别等功能。

无法使用 CSS。

以下代码在 index.php 中生成循环。

        <?php $i = 1; ?>
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>                    

            <?php get_template_part('content','grid'); ?>                                          
            <?php if ($i%3 == 0) : ?>
                <div class="clearfix"></div>
            <?php endif; $i++; ?>

        <?php endwhile; wp_reset_query(); endif; ?> 

我不确定如何做到这一点?

【问题讨论】:

    标签: php wordpress


    【解决方案1】:

    您可以单独输出第一个帖子,然后继续循环:

    <div class="first-post">
       <?php if (have_posts()) : the_post(); ?> 
       <!-- calling the_post(); will step the loop forward -->
       <h1><?php the_title() ?></h1>
       <?php the_content() ?>
       <?php endif; ?> 
    </div>
    
    
    <div class="other-posts">
        <?php $i = 1; ?>
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>                    
            <!-- the loop will be at the 2nd post here -->
            <?php get_template_part('content','grid'); ?>                                          
            <?php if ($i%3 == 0) : ?>
                <div class="clearfix"></div>
            <?php endif; $i++; ?>
    
        <?php endwhile; wp_reset_query(); endif; ?>  
    </div>
    

    【讨论】:

    • 非常感谢安德鲁!终于找到了一个可行的解决方案。
    • 过去我自己也做过同样的事情,当您想要在第一篇文章中使用不同的内容时,这是最简单的方法。很高兴它也对你有用
    • 您知道有什么简单的方法,可以使用这种方法或类似方法来改变前 3 或 5 个帖子的样式吗?
    • 我认为最简单的方法是检查$i,例如&lt;?php if ($i == 3): ?&gt; &lt;div class="post-3"&gt;...&lt;/div&gt; &lt;?php elseif ($i==5): ?&gt; &lt;div class="post-5"&gt;...&lt;/div&gt; &lt;?php else: ?&gt; &lt;div class="other"&gt;...&lt;/div&gt; &lt;?php endif ?&gt;
    • 很酷,谢谢 - 它有效!通过使用该 IF,我用自定义 div 替换了 3 号帖子的位置,但帖子消失了。您知道如何将 3 号点的那个帖子放在 4 号点的帖子上吗?非常感谢,我希望你也能学到一些东西!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-20
    • 1970-01-01
    • 2019-03-29
    • 2020-02-10
    • 1970-01-01
    • 2016-07-30
    相关资源
    最近更新 更多