WelcartでECサイトを構築するとき、「お気に入り機能」を付けたい場面があります。公式の「WCEX Favorites」を使えば簡単に実装できますが、有料なうえ、登録した1ドメインでしか使えず、複数案件での使い回しができません。

そこで代替を探して見つけたのが、無料プラグイン「Favorites」です。結論から言うと、この「Favorites」とWelcartを組み合わせれば、金額表示も含めたお気に入り商品機能を実装できます。この記事では、その手順を解説します。

Favoritesのインストール＆有効化

まずは「Favorites」をインストールします。プラグインの新規追加画面で「Favorites」と検索すると出てくるので、「今すぐインストール」をクリックし、続けて「有効化」します。

Favoritesの設定

左メニューの「設定」→「Favorites」の順にクリックすると、Favoritesの設定画面が開きます。下の画像を参考に、チェック項目と入力項目を設定していきます。

商品詳細ページにお気に入りボタンを追加

商品詳細ページやアーカイブページで、お気に入りボタンを表示させたい場所に、次のショートコードを記述します。

post_idとsite_idを空にしておくと、現在表示している投稿（商品）が自動的に対象になります。商品ごとにIDを個別指定する必要はありません。

<?php echo do_shortcode('[favorite_button post_id="" site_id=""]'); ?>

お気に入り商品一覧の固定ページを作成

次に、お気に入りに登録した商品の一覧を表示する固定ページを作ります。一般的には、次のようなショートコードを埋め込むだけで一覧を表示できます。

【一般的な表示用のショートコード】

<?php echo do_shortcode('[user_favorites include_thumbnails="true" include_buttons="true"]'); ?>

ただし今回は、Welcartの商品を金額込みで表示したいので、ショートコードは使わず、次のようにコードを記述します。get_user_favorites()でお気に入りの投稿IDを取得し、それをWP_Queryのpost__inに渡して、Welcartの商品として出力しています。

【Welcart商品表示用のコード】

<ul class="archive-item__list">
    <?php
    $favorites = get_user_favorites();
    if ($favorites) : // 重要！空の配列を WP_Query に渡すと、すべての投稿が返されます
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $favorites_query = new WP_Query(array(
            'post_type' => 'post',
            'posts_per_page' => -1,
            'ignore_sticky_posts' => true,
            'post__in' => $favorites,
            'paged' => $paged
        ));
        if ($favorites_query->have_posts()) : while ($favorites_query->have_posts()) : $favorites_query->the_post(); ?>
                <?php usces_the_item(); ?>
                <li class="archive-item__item">
                    <a href="<?php the_permalink() ?>"><!--ページへのリンク-->
                        <div class="img">
                            <?php
                            $imgURL = usces_the_itemImageURL(0, $out = 'return');
                            if ($imgURL) : ?>
                                <?php usces_the_itemImage(0, 500, 500, $post); ?>
                            <?php else : ?>
                                <img src="sample.jpg" alt="" />
                            <?php endif; ?>
                        </div>
                        <div class="txt">
                            <h3 class="ttl"><?php usces_the_itemName(); ?></h3>
                            <div class="price"><?php usces_the_firstPriceCr(); ?><span class="unit">（税込）</span></div>
                        </div>
                    </a>
                </li>
        <?php endwhile;
        endif;
        wp_reset_postdata();
    else : ?>
        <div>お気に入りの商品がありません。</div>
    <?php endif; ?>
</ul>

コードのポイント

ポイントは2つです。1つ目は、get_user_favorites()が空の場合の処理です。コード中のコメントにあるとおり、空の配列をWP_Queryのpost__inに渡すと、条件なしとみなされてすべての投稿が返ってしまいます。そのため、if ($favorites)でお気に入りがあるときだけクエリを実行し、なければ「お気に入りの商品がありません。」と表示するようにしています。

2つ目は、Welcart商品として表示している点です。usces_the_item()で商品情報を読み込み、usces_the_itemName()やusces_the_firstPriceCr()で商品名・価格を出力しています。画像がない商品には代替画像を表示するフォールバックも入れているので、表示崩れを防げます。最後のwp_reset_postdata()も忘れずに入れておきましょう。

まとめ

これで、無料プラグイン「Favorites」を使って、Welcartのお気に入り商品機能を実装できました。有料プラグインを使わずに、金額表示込みのお気に入り一覧を作れるのが大きな利点です。複数案件で使い回せる点も、制作者にとってはうれしいポイントです。