welcart を使ったショッピングサイトで商品一覧ページに価格順や新着順で並べ替えるソート機能を実装する方法です。

Advanced Custom Fields の場合はパッチプラグインが必要

今回はWordPressにもともと備わっているカスタムフィールドではなく、プラグイン「ACF（Advanced Custom Fields）」を使用してカスタムフィールドを作っていきます。

以前の記事でも書いたように、Welcart で ACF を使うにはパッチプラグイン WCEX Patch for AFC をインストールする必要があります。

詳しくはこちらの記事を参照ください。

WCEX Patch for AFC をインストールできたらカスタムフィールドで「sort_price」という名前のフィールドを作っておきます。
※フィールド名は好きな名前でOKです。

カスタムフィールドに商品価格を自動登録

次に商品価格が自動で先ほどのカスタムフィールドに登録されるように functions.php に下の内容を記述します。

ACF のフィールドの値を更新するには update_field() という ACF の関数を利用します。

function set_search_price($post_id, $post)
{
    if (wel_get_product($post_id)) {
        $price = usces_the_firstPrice('return', $post);
        update_field('search_price', $price, $post_id);
    }
}
add_action('save_post', 'set_search_price', 99, 2);

これで商品登録時や更新時に商品価格が自動でカスタムフィールド「sort_price」に登録されます。

セレクトボックスを使ってソート機能を実装

archive.php などの商品一覧ページにソートボタンを実装します。

<div class="sortarea">
    <form name="itemsort" method="get" id="sort_form" class="sort_form">
        <select name='sort_select' onChange="document.forms['itemsort'].submit()">
            <option value="sort1" <?php if (!isset($_REQUEST['sort_select']) || $_REQUEST['sort_select'] == 'sort1') echo ' selected="selected"'; ?>>新着順</option>
            <option value="sort2" <?php if (isset($_REQUEST['sort_select']) && $_REQUEST['sort_select'] == 'sort2') echo ' selected="selected"'; ?>>価格が高い順</option>
            <option value="sort3" <?php if (isset($_REQUEST['sort_select']) && $_REQUEST['sort_select'] == 'sort3') echo ' selected="selected"'; ?>>価格が安い順</option>
        </select>
    </form>
</div>

<?php $sortset = $_GET['sort_p']; ?>
<?php $sortall = array(
    "sort1" => "cat=$cat&order=DESC&posts_per_page=20&paged=",
    "sort2" => "cat=$cat&order=DESC&orderby=meta_value_num&meta_key=search_price&posts_per_page=20&paged=",
    "sort3" => "cat=$cat&order=ASC&orderby=meta_value_num&meta_key=search_price&posts_per_page=20&paged=",
); ?>
<?php if ($sortset != '') {
    $sort = $sortall[$sortset];
} else {
    $sort = $sortall["sort1"];
} ?>
<?php query_posts($sort . $paged); ?>


<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post();
        usces_the_item(); ?>
        //商品のループ出力
    <?php endwhile; ?>
<?php endif; ?>

セレクトの項目を選んだと同時に submit してソートがかかるようになっています。

まとめ

以上でソート機能が実装できました。
商品点数が多い時は便利なのでぜひお試しください。

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。主にWeb系の情報をお届けします。