投稿リスト、ポスト一覧をCustom Fields カスタムフィールドでソートして表示する方法
Elementor Proで投稿一覧、投稿リストを表示すためには「ポスト」を使うのが一般的。
ただ、ポストのソートの種類が少ないの点がElementorのマイナスポイント。
例えば、ECサイトでなくても商品一覧を作成して、カスタムフィールドで追加した価格の順番などで表示したい場合があると思いねえ…。Elementorのポストリスト、投稿一覧でソート、Order Byを使って並び順を変更するとして、種類はタイトル順、Menu Order、ランダムの3種類しか用意されていない。
そもそも「Menu Order」ってなんだよってことになるが。これはプラグインでダッシュボードの投稿一覧ページで順序が任意で変更できるもの。下記のプラグインである。
このプラグインは、「menu_order」というカスタムフィールドを追加して表示順をコントロールしている。だから「Menu Order」という名前の所以であろうか。表示順を管理するのは手作業である。この時代に、そんなことさせるなという仕様であるが、まあ、急場しのぎでは使えるのであろう。
非力なソート機能を補うために「Custom Query Filter」を」活用！これは便利！
これを解決するのが、functions.phpにWP_Queryを記述して、クエリーの設定に従ってElementorのポストリスト、投稿一覧を表示する「Custom Query Fliter」。Elementor公式の説明が用意されているがページなのだが…。コードの説明はされているが、コードとエレメントをどこで紐づかせるかが不明なんである。
functions.phpにコードを書いてQuery IDに入力したらOK！
使い方がわからなかったので、Elementor公式にサポートに連絡をして教えていただいた。
担当者は「Just Read the Instructions」と思っていたかもしれぬが…。
早速簡単に解説すると、テーマのfunctions.phpにカスタムクエリーフィルターを記述して、下記の画像の場所に、そのカスタムクエリーフィルター名を入力する。
そすると該当のポストリスト、投稿一覧はカスタムクエリーフィルターに従った内容・表示順になるわけである。
add_action( 'elementor/query/price_desc_filter', function( $query ) {
$query->set( 'post_type', 'post' ); // 投稿タイプスラッグ
$query->set( 'category_name', 'products' ); // カテゴリースラッグ
$query->set( 'meta_key', 'price' ); // ソートで利用するACFのフィールド名（名前）
$query->set( 'orderby', 'meta_value' ); // 値でソートする
$query->set( 'order', 'DESC' ); // ソート順：DESC（降順）
});
カスタムクエリーフィルターのコードは簡単なもので、WordPressでShortcodeやHookを使って、いろいろ苦労してきた方には、何の問題もなかろう。
あえて説明すると「投稿」のカテゴリー「products（製品）」のに該当する投稿をフィールド名「price（価格）」でソートして表示するという内容である。適時、書き換えていただければ動作に問題はないかと思われる。
コードを深く掘り下げたい方は下記URLを参照のこと。
コードと編集ページの設定を使った折衷クエリーの可能
ちなみに、カスタムクエリーフィルターの’コード内orderby’、’order’の指定をしなければ、Elementor編集ページにある、「Order By」「Order」を参照して表示がされる。
これはこれで、カスタムフィールドの特定の投稿を除外して投稿時間でソートしたい場合、カスタムクエリーフィルターでは特定投稿を除外するクエリーを記述しておき、投稿時間のソートについてはElementor上で指定するという方法もある。
