SWELL│自作の人気記事ランキングカードを作る方法│週間・月間・年間のランキング

function motoki_swell_popular_posts_shortcode() {
    ob_start();
    $args = [
        'posts_per_page'      => 6,
        'post_type'           => 'post',
        'ignore_sticky_posts' => 1,
        'meta_key'            => SWELL_CT_KEY,
        'orderby'             => 'meta_value_num',
        'order'               => 'DESC',
    ];
    $the_query = new WP_Query($args);
    $rank = 1;

    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
            $rank++;
        endwhile;
        echo '</ul>';
        wp_reset_postdata();
    endif;

    return ob_get_clean();
}
add_shortcode('motoki_swell_popular_posts', 'motoki_swell_popular_posts_shortcode');

.-w-ranking .p-postList__item {
    flex: 1 1 calc(33.33% - 20px);
}
@media (max-width: 960px) {
    .-w-ranking .p-postList__item {
        flex: 1 1 calc(50% - 20px);
    }
}
/* サイドバー用 */
.l-sidebar .-w-ranking .p-postList__item {
    flex: 1 1 100%;
}