カスタムフィールド （ACF）を利用してアーカイブページ で絞り込みをしたい

Question

前提・実現したいこと

カスタム投稿アーカイブページにて、
カスタムフィールドの値によって絞り込みをしたいです。

==========================
カスタム投稿投稿タイプ：news

●カスタムフィールド 項目（select/必須選択）
①
フィールド名：area
select項目：東京、大阪、神戸

②
フィールド名：age
select項目：20代、30代、40代

③
フィールド名：color
select項目：あお、あか、きいろ、しろ

==========================

このようなカスタム投稿があり、
カスタムフィールド によって3項目を投稿ごとにセレクトするようにしています。

archive-news.phpのアーカイブページでは記事一覧（全ての記事）を表示して、
東京を選択しているだけの記事一覧、大阪を選択しているだけの記事一覧、、、
20代を選択しているだけの記事一覧、、、、
あおを選択しているだけの記事一覧、、、、

といった風に絞り込んでそれぞれごとの記事一覧を表示したいです。

該当のソースコード

<div class="post_items">
    <?php
    $customPostArg = array(
        'posts_per_page' => -1,
        'post_type'      => 'news',  // カスタム投稿タイプ名
        'orderby'          => 'date',
        'order'            => 'DESC'
    );
    $customPosts = get_posts($customPostArg);
    ?>

    <?php if ($customPosts) : foreach ($customPosts as $post) : setup_postdata($post);  ?>
            <div class="post_item">
                <a href="<?php the_permalink(); ?>">
                    <dl class="note">                       
　　　　　　　　　　　　　　<dt>エリア</dt>
                        <dd>
                            <?php the_field('area'); ?>
                        </dd>
                        <dt>年齢</dt>
                        <dd>
                            <?php the_field('age'); ?>
                        </dd>
                        <dt>色</dt>
                        <dd>
                            <?php the_field('color'); ?>
                        </dd>
                    </dl>
                </a>
            </div>
    <?php endforeach;
    endif; ?>

</div>

試したこと

WordPressのサイト上で簡単に並び替え＆絞り込みする方法

上記サイトを参考にfunctions.phpに下記を挿入し

function add_meta_query_vars($public_query_vars)
{
  $public_query_vars[] = 'meta_key';
  $public_query_vars[] = 'meta_value';
  return $public_query_vars;
}
add_filter('query_vars', 'add_meta_query_vars');

https://example/news/?meta_key=area&meta_value=大阪
https://example/news/?meta_key=age&meta_value=30代

という風にアクセスをしても、全ての一覧が表示されてしまい、
上手く絞り込みができず困っております。。。

有識者の方いらっしゃいましたら、お力添えをいただけると助かります。
どうぞ宜しくお願い致します。

Answer 1

archive-news.phpの一番上でそれぞれのパラメータを取得してみてください。

$key_params = $_GET['meta_key'];
$val_params = $_GET['meta_value'];

で、パラメータの有無によって、条件分岐で$customPostArgの中身を書き換えます。

if(isset($key_params) && $key_params) {
    $customPostArg = array(
        'posts_per_page' => -1,
        'post_type'      => 'news',
	'meta_query'     => array(
		array(
			'key'   => $key_params,
			'value' => $val_params,
		)
	)
        'orderby'        => 'date',
        'order'          => 'DESC'
    );
} else {
    $customPostArg = array(
        'posts_per_page' => -1,
        'post_type'      => 'news',
        'orderby'        => 'date',
        'order'          => 'DESC'
    );
}

最後に$customPostArgに基づいた記事を取得。

$customPosts = get_posts($customPostArg);

こんな感じでいかがでしょうか？
動作確認していないので、間違っていたらすみません。。。

Comments

[kii.32]

お教えいただいたコードで無事解決しました！ありがとうございます！

今後の勉強のためにお伺いしたいのですが、
selectではなくチェックボックス（複数選択可能）が

==========================
④
フィールド名：food
チェックボックス項目：ハンバーグ、唐揚げ、牛丼、カツ丼
==========================

含める場合ですと、
https://example/news/?meta_key=food&meta_value=牛丼
で機能しないようなのですが、また別のパラメーターを取得する必要があるのでしょうか？

度々、申し訳ございません。

[suminoel]

複数選択可能なチェックボックスということは、返り値が配列になっているということですよね。
HTMLがないのでわかりませんが、チェックボックスのname属性がfood[]のようになっていたら、配列で返ってきます。
https://qiita.com/4cres/items/26154314959dcccbfd34

例えば、牛丼、カツ丼にチェックを入れたのに例のURLのようになっているとしたら、そもそも複数選択が可能になっていないということでしょうね。
牛丼、もしくはカツ丼のmeta_valueが設定されている記事を取得する場合は、relationを設定する必要があります。
それに関しては下記の記事が参考になると思います。
http://mymynote.com/2018/04/wordpress%E3%81%A7%E8%A4%87%E6%95%B0%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%82%92%E6%9D%A1%E4%BB%B6%E3%81%AB%E3%81%97%E3%81%A6and%E3%83%BBor/

[kii.32]

relationの設定が必要なのですね！初めて知りました！
ご丁寧にご回答いただいましてありがとうございました。
感謝いたします。