在引导程序网格中显示不同类别的wordpress帖子 - Display wordpress posts in bootstrap grid with different classes

我使用的是一个从博客中获得的脚本，该脚本在非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中。

有没有一种方法我可以调整这个代码来做到这一点？

提前感谢！

您可以有一个简单的$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>

为此，您只需检查循环是否是第一次运行，即是否显示第一个帖子。

通过简单地初始化变量，使其每次增加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; ?>

我希望它能帮助你。

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

试试这个代码