与php的Wordpress博客循环

Question

我有Wordpress的问题。我目前正在使用Bootstrap和PHP来创建一个博客循环。

这是我们迄今为止所拥有的：

<?php get_header(); ?>

<div class="container-fluid">

    <?php query_posts('posts_per_page='); ?>
    <!-- <?php //query_posts('posts_per_page=3&cat=6&post_type=our_services'); ?> -->

    <div class="row">

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>


            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">


<?php if ( has_post_thumbnail()) { $url = wp_get_attachment_url( get_post_thumbnail_id() ); ?>

    <img src="<?php echo $url; ?>" alt="<?php the_title() ?>">

                <h3><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h3>

            </div><!-- col -->

         <?php } ?>

        <?php endwhile; endif; ?>

         </div><!-- row -->

    </div><!-- container -->
</section><!-- services -->

<?php wp_reset_query(); ?>

此代码生成三个帖子，它们当前循环。但是，我想在循环中找到四个帖子，其中第四个帖子更大，好像它在博客中“特色”，所以它应该比其他帖子和顶部更大。

Answer 1

您可以更改for for或引入外部计数器作为基本想法，例如

   $i = 0;
    while ( have_posts() ) {
     $i++;
     ($i == 4) ?  echo "<div class='featured-post'>".the_post()."</div>" : the_post();
    }

你应该添加col-lg-12来占据整个空间。如果您使用的是Bootstrap 4，则可以使用order-lg-*来反转CSS的帖子顺序。

对不起，如果有语法错误，我写PHP已经很久了。

Answer 2

我想和你Yazan一样努力。

这是我的代码：

<?php get_header(); 
$postCount = 1;
?>
<div class="container-fluid">
    <div class="row">
<?php if (have_posts()) : while (have_posts()) : $postCount++; ?>

<?php if($postCount == 2) { ?>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">

<?php } else { ?>

  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">

<?php } ?>

    <h3 class="flexcenter"><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h3>

    </div><!-- col -->

<?php endwhile; endif; ?>

    </div><!-- row -->
</div><!-- container -->

此代码的结果是视觉上正确的。第一篇文章是col-12，其余的是col-4。

但问题是它循环出同一个帖子..

UPDATE

事实证明我需要使用Wp查询 - 现在它可以工作 - 我现在唯一的问题是在第一篇文章之后每三个帖子连续循环。

这是代码：

<?php get_header(); 
$postCount = 1;
$args = array( 'post_type' => '' );
$loop = new WP_Query( $args );
?>

<div class="container-fluid">
    <div class="row">

<?php if ( $loop->have_posts() ) : ?>

<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

    <?php if($postCount == 1) { ?>

    <div class="heropost flexcolumn col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12" 
    style="
    background:
    linear-gradient( rgba(15, 21, 36, 0.6), rgba(250, 55, 122, 0.6) ),
    url(<?php the_post_thumbnail_url(); ?>);
    ">

    <div class="featuredtitle">
        <h6 class="pretitle">Featured</h6>
    </div>

    <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
    <a class="button hvr-ripple-out" href="<?php the_permalink() ?>"><span>Läs nyheten</span></a>

    </div><!-- col -->

    <?php } else { ?>


    <div class="smallpost col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 flexcolumn">

    <div class="postloop-image"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></div>
    <div class="post-category"><?php the_category(); ?></div>
    <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>

    </div><!-- col -->

    <?php } ?>

    <?php $postCount++; ?>

<?php endwhile; ?>

</div><!-- row -->

</div><!-- container -->

<?php wp_reset_postdata(); ?>

<?php else : ?>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

<?php get_footer(); ?>

所以它还不正确！