doufei1988 2017-04-04 21:54
浏览 83
已采纳

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

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

enter image description here

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.

  • 写回答

1条回答 默认 最新

  • doujiao3016 2017-04-04 22:10
    关注

    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';
    ....
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 ecplise在连接数据库时显示加载驱动成功但是数据库连接失败
  • ¥15 visionmaster启动失败,提示为“机器不满足授权而被禁用”
  • ¥50 用logisim设计16位单时钟周期cpu
  • ¥15 IDEA中圈复杂度如何具体设置
  • ¥50 labview采集不了数据
  • ¥15 Multisim红外倒车雷达仿真中距离问题
  • ¥15 请上面代码做什么处理或什么混淆
  • ¥15 英雄联盟自定义房间置顶
  • ¥15 W5500网线插上无反应
  • ¥15 如何用字典的Key,显示在WPF的xaml中