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

Question

I have 2 rows, the top row which holds the featured articles has 2 columns and the bottom row that has the latest articles has 3 columns per row.

I am grabbing and displaying the latest articles in the bottom row using WP_Query() which works fine. But how do I select specific articles as featured and display them with a single query in the top row, even though each column has a different width. first column is col-md-4 second column is col-md-8

I have installed Advanced Custom Fields and created a new field (checkbox) to be attached to posts and when I create or edit a new post, I can check the box to tell it that this is a featured article. Then I can get the data using $variable = get_field('featured') but I have no idea how do I go about displaying articles that are featured within a loop using Advanced Custom Fields.

If there are better ways, please let me know because I'm out of ideas.

This is my code so far

<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 is where I would like to display the featured posts.

And if I can include the first column col-md-4 with the second loop, that would be even better for me so I would only have to display the featured articles in the second column col-md-8 but I'm not sure this is even possible.

Answer 1

you need to query by that acf custom field through WP_Query as follow:

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

$q = new WP_Query($args);

the only part that you need to complete is to check if you are considering the first or the second post and change the resulting <div> container.

EDIT

to use those results, copying your code:

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