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

2023.08.302024.04.25

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

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

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

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

2024年4月25日 SWELLのランキングデザインに合わせた物を追加しました。

人気記事ランキング（サンプル）

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

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 '<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');

CSS

見た目を整えます。

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

サイドバーに表示するときは1列になるようにCSSを追記しました。

.-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%;
}

以前のコード

SWELLのクラスのランキングデザインを踏襲してないときのランキングカスタマイズのコードです。

functions.php

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

.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%;
    }
}