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中显示精选文章，但我和＃ 39;我不确定这是否可能。

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'; ....

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

1 个答案: