Welcartの売れ筋商品ランキングを自由にカスタマイズして表示する方法

公開日: 2023.11.13
最終更新日: 2026.07.17

Welcartには「Welcartベストセラー」という専用ウィジェットがありますが、表示のカスタマイズ方法がなかなか見つからず、デザインを自由に組みたいときに困ることがあります。

結論から言うと、Welcartのget_bestseller_ids()で売れ筋商品のIDを取得し、WP_Queryで表示することで、売れ筋ランキングを自由なマークアップで表示できます。しかも、この方法なら特定のカテゴリー内に絞った売れ筋ランキングも作れて便利です。この記事では、その実装コードとポイントを解説します。

1 実装コード
2 コードのポイント
3 カテゴリー内ランキングにも応用できる
4 まとめ

実装コード

売れ筋ランキングを表示したい場所に、次のコードを記述します。

<?php
global $usces;
$ids = $usces->get_bestseller_ids(999); //999は集計日数
$args = array(
    'posts_per_page' => 5,
    'category__in' => 13, //特定のカテゴリーで絞り込みする場合
    'post__in' => $ids, //売れ筋商品
    'orderby' => 'post__in'
);
$products = new WP_Query($args);
while ($products->have_posts()) : $products->the_post(); ?>
    <?php
    usces_the_item();
    ?>
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <a href="<?php the_permalink() ?>">
            <div class="item__img">
                <?php
                $imgURL = usces_the_itemImageURL(0, $out = 'return');
                if ($imgURL) : ?>
                    <?php usces_the_itemImage(0, 500, 500, $post); ?>
                <?php else : ?>
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/common/noimage.png" alt="" />
                <?php endif; ?>
            </div>
            <div class="item__name"><?php usces_the_itemName(); ?></div>
            <div class="item__price-set">
                <div class="price"><?php usces_the_itemPrice(); ?></div>
                <div class="unit">円</div>
            </div>
        </a>
    </div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>

コードのポイント

処理の流れを順に見ていきます。

まず、$usces->get_bestseller_ids(999)で売れ筋商品のIDを取得します。引数の999は集計する日数です。ここを30にすれば直近30日間の売れ筋、999のように大きくすればほぼ全期間の売れ筋、というように、集計期間を調整できます。季節商品が多いショップなら短め、定番商品中心なら長め、というように商材に合わせて調整すると、より実態に合ったランキングになります。

取得したIDをWP_Queryのpost__inに渡すことで、売れ筋商品だけを対象に表示します。posts_per_pageで表示件数（この例では5件）を指定し、category__inを加えれば特定カテゴリー内に絞り込めます。カテゴリーで絞らない場合は、この行を削除すればサイト全体の売れ筋になります。

そしてもう1つの肝が'orderby' => 'post__in'です。これを指定すると、post__inに渡したIDの並び順（＝売れ筋の順番）を保ったまま表示できます。これがないと通常の並び順になってしまい、ランキングとして成立しないため、忘れずに指定します。

商品画像の出力部分では、画像が登録されているかをusces_the_itemImageURL()で確認し、なければ「no image」用の代替画像を表示するようにしています。商品によって画像の有無がばらつくECサイトでは、こうしたフォールバックを入れておくと表示崩れを防げます。

最後のwp_reset_postdata()も忘れないようにしましょう。これはWP_Queryで切り替えた投稿データを元に戻すための記述で、入れておかないと、このランキングより後に続くループや投稿情報の表示がおかしくなることがあります。WP_Queryで独自ループを回したあとは必ず呼ぶ、と覚えておくと安全です。

また、「1位」「2位」といった順位を見せたい場合は、ループ内でカウンター変数を1ずつ増やして出力すれば、ランキングらしい見た目に仕上げられます。

カテゴリー内ランキングにも応用できる

この方法の便利なところは、category__inを指定するだけで、カテゴリーごとの売れ筋ランキングが作れる点です。たとえば商品カテゴリーページに「このカテゴリーの人気商品」を表示する、といった使い方ができます。専用ウィジェットではデザインや絞り込みに限界がありますが、WP_Queryで自作すれば、マークアップも表示条件も思いのままです。