MENU

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

SWELLカスタマイズ

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

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

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

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

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

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

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

目次

著者

motokiのアバター motoki

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

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

WordPressテーマ「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%;
    }
}

ショートコード

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

[motoki_swell_popular_posts]

出力結果は以下の通り。

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

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

応用例です。

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

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

やり方

まずfunctions.phpです。

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

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

SWELLカスタマイズ
  • URLをコピーしました！
目次