【WordPress】新着記事と人気記事をショートコードで表示する方法

/**
 * 人気記事 & 新着記事 を表示するショートコード
 *
 *   // 週間人気記事
 *  // 月間人気記事
 *   // 年間人気記事
 *      // 全期間人気記事
 *   // 新着記事
 */
function swell_popular_posts_shortcode( $atts ) {
    // ショートコードの属性を設定
    $atts = shortcode_atts(
        array(
            'period' => 'weekly', // デフォルトは "週間" 表示
        ),
        $atts,
        'swell_popular_posts'
    );

    // 初期パラメータ
    $args = array(
        'posts_per_page'      => 6,
        'post_type'           => 'post',
        'ignore_sticky_posts' => 1,
    );

    // period 属性の値によってクエリを分岐
    switch ( $atts['period'] ) {
        case 'recent':
            // 新着記事 (投稿日の降順)
            $args['orderby'] = 'date';
            $args['order']   = 'DESC';
            // 人気記事と違い、メタキーなどは使用しない
            break;

        case 'monthly':
            // 月間の人気記事
            $args['meta_key'] = SWELL_CT_KEY;    // 人気度を保存しているメタキー
            $args['orderby']  = 'meta_value_num';
            $args['order']    = 'DESC';
            $args['date_query'] = array(
                array(
                    'after'     => '1 month ago',
                    'inclusive' => true,
                ),
            );
            break;

        case 'yearly':
            // 年間の人気記事
            $args['meta_key'] = SWELL_CT_KEY;
            $args['orderby']  = 'meta_value_num';
            $args['order']    = 'DESC';
            $args['date_query'] = array(
                array(
                    'after'     => '1 year ago',
                    'inclusive' => true,
                ),
            );
            break;

        case 'all':
            // 全期間の人気記事
            $args['meta_key'] = SWELL_CT_KEY;
            $args['orderby']  = 'meta_value_num';
            $args['order']    = 'DESC';
            // 全期間なので date_query は指定しない
            break;

        case 'weekly':
        default:
            // 週間の人気記事
            $args['meta_key'] = SWELL_CT_KEY;
            $args['orderby']  = 'meta_value_num';
            $args['order']    = 'DESC';
            $args['date_query'] = array(
                array(
                    'after'     => '1 week ago',
                    'inclusive' => true,
                ),
            );
            break;
    }

    // WP_Query の実行
    $the_query = new WP_Query( $args );

    // 出力のバッファリング開始
    ob_start();

    if ( $the_query->have_posts() ) :
        echo '<ul class="p-postList -type-card -w-ranking">';
        while ( $the_query->have_posts() ) :
            $the_query->the_post();
            ?>
            <li class="p-postList__item">
                <a href="<?php the_permalink(); ?>" class="p-postList__link">
                    <div class="p-postList__thumb c-postThumb">
                        <figure class="c-postThumb__figure">
                            <?php if ( has_post_thumbnail() ) : ?>
                                <img class="c-postThumb__img u-obf-cover"
                                     src="<?php the_post_thumbnail_url('medium'); ?>"
                                     alt="<?php the_title(); ?>"
                                     sizes="(min-width: 600px) 320px, 50vw">
                            <?php endif; ?>
                        </figure>
                    </div>
                    <div class="p-postList__body">
                        <div class="p-postList__title"><?php the_title(); ?></div>
                        <div class="p-postList__meta"></div>
                    </div>
                </a>
            </li>
            <?php
        endwhile;
        echo '</ul>';
        wp_reset_postdata();
    endif;

    // バッファの内容を返す
    return ob_get_clean();
}
add_shortcode( 'swell_popular_posts', 'swell_popular_posts_shortcode' );

.-w-ranking .p-postList {
  display: flex;
  flex-wrap: wrap; /* 子要素を折り返し可能に */
  gap: 20px;       /* カード同士の余白をつける */
}

/* 3カラム（PC） */
.-w-ranking .p-postList__item {
  flex: 1 1 calc(33.33% - 20px);
  box-sizing: border-box; /* 幅計算が崩れないように */
}

/* 幅960px以下（タブレット・スマホなど）で2カラム */
@media (max-width: 960px) {
  .-w-ranking .p-postList__item {
    flex: 1 1 calc(50% - 20px);
  }
}

/* サイドバー用（100%幅で1カラム） */
.l-sidebar .-w-ranking .p-postList__item {
  flex: 1 1 100%;
}