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

SWELLの投稿記事にはPV計測がされています。

投稿リストブロックではそのPVに応じにて人気記事ランキング順に表示できますが、

自作のカードではどのようにするのは迷いますよね?

本記事はSWELLのPV数を取得しつつ、人気記事ランキングを作成してみます。

人気記事ランキング(サンプル)

追記:応用例として週間・月間・年間ランキングの作り方も公開しました。

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

SWELLで自作の人気記事ランキングカードを作る方法

やり方は自作のブログカードを生成する際に、SWELLで計測しているPV数を取得して並び替えるだけです。

functions.php

外観 > テーマエディタ >functions.phpに下記のコードを挿入してください。

今回は上位6記事をカードにして並べてみました。

ちなみにSWELL_CT_KEYというmeta_keyからPV数を取得しています。

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 '<div class="popular-card-wrapper">';
        while ( $the_query->have_posts() ) : $the_query->the_post();
            ?>
            <a href="<?php the_permalink(); ?>" class="popular-card">
                <div class="ranking-number"><?php echo $rank . '位'; ?></div>
                <?php if ( has_post_thumbnail() ) : ?>
                    <div class="popular-card-image-wrapper">
                        <img class="popular-card-image" src="<?php the_post_thumbnail_url('medium'); ?>" alt="<?php the_title(); ?>" style="aspect-ratio: auto;">
                    </div>
                <?php endif; ?>
                <div class="popular-card-title"><?php the_title(); ?></div>
            </a>
            <?php
            $rank++; 
        endwhile;
        echo '</div>';
        wp_reset_postdata();
    endif;

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

CSS

見た目を整えます。

PCでは3列、スマホでは1列にカードを並べています。

.popular-card-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.popular-card {
    flex: 1 1 calc(33.33% - 20px);
    border-radius: 8px;
    overflow: hidden;
    color: #333;
}

.popular-card img {
    width: 100%;
    height: auto;
    display: block;
}

.ranking-number {
    text-align: center;
}

.popular-card-title {
    padding: 10px 0;
    font-size: 16px;
    text-align: left;
}

@media (max-width: 768px) {
    .popular-card {
        flex: 1 1 100%;
    }
}

ショートコード

下記のショートコードを記事に挿入しましょう。

[motoki_swell_popular_posts]

出力結果は以下の通り。

人気記事ランキング(サンプル)

応用│週間・月間・年間の人気記事ランキングカード

応用例です。

SWELL_CT_KEYというmeta_keyからPV数を取得していますが、期間ごとに区切ることで、

週間・月間・年間ランキングを作成できます。

やり方

まずfunctions.phpです。

ここから有料コンテンツです。

Web制作のご依頼

SEOからデザインまで魅力的なWebサイトを制作いたします。

目次