如何在Wordpress中使用WP_Query显示特色文章

Question

我有2行，其中包含精选文章的顶部行有2列，具有最新文章的底部行每行有3列。

我正在使用WP_Query()抓取并在底部的行中显示最新的文章，它工作正常。 但是，即使每一列的宽度不同，我如何选择具有特色的特定文章并在第一行中用单个查询显示它们。 第一列是col-md-4第二列是col-md-8

我已经安装了“高级自定义字段”并创建了一个新字段（复选框）以附加到帖子中，当我创建或编辑新帖子时，可以选中该框以告诉它这是一篇特色文章。 然后，我可以使用$variable = get_field('featured')获取数据，但是我不知道如何使用高级自定义字段显示循环中具有特色的文章。

如果有更好的方法，请告诉我，因为我没有想法。

到目前为止，这是我的代码

<div class="row" id="featured-top">
    <div class="col-md-4">
        <figure class="snip1253">
            <div class="image" style="background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample52.jpg') center center / cover"></div>
            <figcaption>
                <h3>The World Ended Yesterday</h3>
                <p>
                    I don't need to compromise my principles, they don't have the slightest bearing.
                </p>
            </figcaption>
            <footer>
                <div class="comments">
                    <span class="fa-stack fa-2x">
                        <i class="fa fa-comment fa-stack-1x"></i>
                        <strong class="fa-stack-1x fa-stack-text fa-inverse">5</strong>
                    </span>
                </div>
            </footer>
            <a href="#"></a>
        </figure>
    </div>

    <div class="col-md-8" id="big-col">
        <figure class="snip1253" style="background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample52.jpg') center center / cover">
            <div class="image"></div>
            <figcaption class="overlay">
                <h3>The World Ended Yesterday</h3>
                <p>
                    I don't need to compromise my principles, they don't have the slightest bearing on what happens to me anyway.
                </p>
            </figcaption>
            <footer class="no-border">
                <div class="comments">
                    <span class="fa-stack fa-2x">
                        <i class="fa fa-comment fa-stack-1x"></i>
                        <strong class="fa-stack-1x fa-stack-text fa-inverse">5</strong>
                    </span>
                </div>
            </footer>
        </figure>
    </div>
</div>

<div class="row" id="featured-list">
    <?php
    wp_reset_query();
    // WP_Query arguments
    $args = array(
        'post_type'              => array( 'post' ),
        'post_status'            => array( 'publish' ),
        'nopaging'               => false,
        'posts_per_page'         => 6,
    );

    // The Query
    $query = new WP_Query( $args );

    // The Loop
    if ( $query->have_posts() ) {
        while ( $query->have_posts() ) {
            $query->the_post();
            ?>
            <div class="col-md-4">
                <figure class="snip1253">
                    <div class="image" style="background: url('<?php the_post_thumbnail_url(); ?>') center center / cover"></div>
                    <figcaption>
                        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                        <?php the_excerpt(); ?>
                        <p class="the-date"><?php the_author_posts_link(); ?> - <?php echo get_the_date(); ?></p>
                    </figcaption>
                    <footer>
                        <div class="comments">
                            <span class="fa-stack fa-2x">
                                <i class="fa fa-comment fa-stack-1x"></i>
                                <strong class="fa-stack-1x fa-stack-text fa-inverse"><a href="<?php comments_link(); ?>"><?php comments_number('0','1','%' );?></a></strong>
                            </span>
                        </div>
                    </footer>
                </figure>
            </div>
            <?php
        }
    } else {
        // no posts found
    }

    // Restore original Post Data
    wp_reset_postdata();
    ?>
</div>

#featured-top是我要显示精选文章的地方。

如果我可以在第二个循环中包含第一列col-md-4 ，那对我来说会更好，所以我只需要在第二列col-md-8显示特色文章，但我不确定这甚至是可能的。

Answer 1

您需要通过WP_Query通过该acf自定义字段进行查询，如下所示：

$args = [
    'posts_per_page' => 2,
    'meta_query' => [
       [
           'key' => 'featured',
           'value' => 1
       ]
    ]
];

$q = new WP_Query($args);

唯一需要完成的部分是检查您是在考虑第一篇还是第二篇文章，并更改生成的<div>容器。

编辑

要使用这些结果，请复制代码：

if ( $q->have_posts() ) {
    while ( $q->have_posts() ) {
        $q->the_post();
        $class = $q->current_post == 1 ? 'col-md-4' : 'col-sm-8';
....