在具有不同类的引导网格中显示 wordpress 帖子

Question

我正在使用从Blog 获得的脚本，该脚本在非 wordpress 页面上显示 3 个 wordpress 帖子，如下所示：

<div class="wrapper row">
    <?php
    define('WP_USE_THEMES', false);
    require('news/wp-load.php');
    query_posts('showposts=3');
    ?>

    <?php while (have_posts()): the_post(); ?>
        <div class="col-sm-4">
            <h2><?php the_title(); ?></h2>
            <p><em>Posted <?php the_date(); ?> by <?php the_author(); ?></em></p>
            <div class="image"><?php
                if ( has_post_thumbnail() )
                    the_post_thumbnail( 'thumbnail' );
                else
                    echo '<img src="news/wp-content/uploads/2015/06/150x150-2.jpg" alt="Example Image" title="Example" width="100px"/>';
                ?></div>
            <p><?php the_excerpt(); ?></p>
            <p><a href="<?php the_permalink(); ?>">Read more...</a></p>
        </div><!-- /.col-sm-4 -->
    <?php endwhile; ?>
</div>

我目前在引导网格中得到循环（3 个帖子），在 12 列网格中重复“col-sm-4”div。

我想做的是将第一个帖子放在“col-sm-6”div 中，另外两个放在“col-sm-3”div 中。

有没有办法可以调整这段代码来做到这一点？

提前致谢！

Answer 1

您可以有一个简单的$first = true 标志，然后可以使用它来输出col-sm-6。在第一次运行完成之前，您将标志设置为false。

考虑到这一点，这是您重写的代码：

<div class="wrapper row">
<?php
define('WP_USE_THEMES', false);
require('news/wp-load.php');
query_posts('showposts=3');
?>

<?php $first = true; while (have_posts()): the_post(); ?>
<div class="<?php if ($first) { echo 'col-sm-6'; } else { echo 'col-sm-3'; } ?>">
<h2><?php the_title(); ?></h2>
<p><em>Posted <?php the_date(); ?> by <?php the_author(); ?></em></p>
<div class="image"><?php
if ( has_post_thumbnail() )
    the_post_thumbnail( 'thumbnail' );
else
     echo '<img src="news/wp-content/uploads/2015/06/150x150-2.jpg"   alt="Example Image" title="Example" width="100px"/>';
?></div>
<p><?php the_excerpt(); ?></p>
<p><a href="<?php the_permalink(); ?>">Read more...</a></p>
</div><!-- /.col-sm-4 -->
<?php $first = false; endwhile; ?>
</div>

Answer 2

为此，您只需检查循环是否第一次运行，即它是否显示第一篇文章。

通过简单地初始化变量并使其在每次while完成其循环时增加1。

我已经为它制作了虚拟代码，让你清楚地理解。

<?php 
$sn = 1; //initializing variable assigning 1 to it
while (have_posts()): the_post(); // your while loop
if($sn == 1){ // here we will check if $sn = 1 which means we are have first post if not then it might be 2nd or third
?>
    <div class="col-sm-6">
<?php } else { ?>
    <div class="col-sm-4">    
<?php } ?>        
        <h2><?php the_title(); ?></h2>
        <p><em>Posted <?php the_date(); ?> by <?php the_author(); ?></em></p>
        <div class="image">
            <?php
            if ( has_post_thumbnail() )
                the_post_thumbnail( 'thumbnail' );
            else
                echo '<img src="news/wp-content/uploads/2015/06/150x150-2.jpg" alt="Example Image" title="Example" width="100px"/>';
            ?>
        </div>
        <p><?php the_excerpt(); ?></p>
        <p><a href="<?php the_permalink(); ?>">Read more...</a></p>
    </div><!-- /.col-sm-4 -->
<?php 
$sn++;  // very important to increment variable by 1  so that we can check how many time loop has run
endwhile; ?>

希望对你有帮助。

Answer 3

<div class="wrapper row">
    <?php
    define('WP_USE_THEMES', false);
    require('news/wp-load.php');
    query_posts('showposts=3');

    $isFirst = true;
    while (have_posts()): the_post();
    if($isFirst == true) {
        echo '<div class="col-sm-6">';
        $isFirst = false;
    } else {
        echo '<div class="col-sm-4">';
    }
    ?><h2><?php the_title(); ?></h2>
    <p><em>Posted <?php the_date(); ?> by <?php the_author(); ?></em></p>
    <div class="image"><?php
        if ( has_post_thumbnail() )
            the_post_thumbnail( 'thumbnail' );
        else
            echo '<img src="news/wp-content/uploads/2015/06/150x150-2.jpg" alt="Example Image" title="Example" width="100px"/>';
        ?></div>
        <p><?php the_excerpt(); ?></p>
        <p><a href="<?php the_permalink(); ?>">Read more...</a></p>
    </div><!-- /.col-sm-4 -->
<?php endwhile; ?>
</div>

试试这个代码