【Cocoon】複数のタグ、カテゴリでの絞り込み検索（AND検索、OR検索）に対応するカスタマイズ

WordPressには複数タグでコンテンツを絞り込む機能が標準であるのですが、Cocoonテーマでは絞り込み時の表示が単一のカテゴリ、タグ絞り込み時と同じで変化しません。

今回はWordPressのCocoonテーマで、複数タグでコンテンツの絞り込みを行った際のコンテンツページの表示をカスタマイズします。

WordPressでの複数タグでの絞り込みについて

まず初めに、WordPressでは標準の機能で複数カテゴリ、複数タグでの絞り込みを行うことができます。

タグページへアクセスするURIのバリエーション

単一のカテゴリ、タグについては /tag/tagname/ のようにタグのスラッグをディレクトリ名に指定することでアクセスできますが、カテゴリ、タグのアクセス方法はこれ以外にも下記のようにURIクエリに記述することが可能です。

このURIクエリをカテゴリページのURIに組み合わせることで「カテゴリ＋タグ」の絞り込みを行うことができます。

こうすることで、「category」カテゴリに属していて、かつ「tagname」のタグがつけられたエントリのみを絞り込んでコンテンツのリストを表示することが可能です。

また、タグのURIクエリは「+」記号で複数のタグスラッグをつなげて列挙することで、すべてのタグに属するコンテンツのみを絞り込むことができます。

さらに、これにカテゴリのディレクトリ指定を組み合わせることで、「カテゴリ＋複数タグ」をすべて満たすコンテンツの絞り込みを行うことが可能です。

Cocoonテーマでの表示

前述のアクセス方法でコンテンツの絞り込み表示を行うことができるのですが、現バージョンのCocoonテーマでは、ページ見出しに（H1）に指定されたひとつのカテゴリ名、もしくはタグ名しか表示されないため、絞り込みの状況がわかりません。

こちらの表示を一部カスタマイズして、絞り込みのタグをテキストとして出力するカスタマイズを行おうと思います。

実行すると以下のような感じで【カテゴリ名 / {タグ名} で絞り込み】というように、h1タグのテキストを置き換えるようなイメージです。

コード

Cocoon子テーマのfunctions.phpに以下を追記します。

function multiple_tags() {
    $tagVar = get_query_var('tag');
    if ( !empty($tagVar) ) {
        $tagSlugs = $currentTerms = array();
        $tagSlugs = preg_split('(\+|,| )', $tagVar);
        foreach ($tagSlugs as $tagSlug)
            $currentTerms[] = get_term_by('slug', $tagSlug, 'post_tag');
    }
    array_splice($currentTerms, 3); //4件目以降を削除
    
    if ( !empty($currentTerms) ) {
        $tagCount = count($currentTerms);
        $i = 1;
        foreach ($currentTerms as $currentTerm) {
            if ($i != 1) { //2つ目以降のタグ名を取得
                if ($i >= 3 ) {
                    $currentTagName .= ' + ';                    
                }
                $currentTagName .= $currentTerm->name;
            }
            $i++;
        }
    }
    return $currentTagName;
}

function get_archive_chapter_multi_title( $title ) {
    if ( is_tag() ) {
        if ( !empty(multiple_tags())) {
            $title = $title.sprintf( esc_html( ' / %sで絞り込み' ), multiple_tags() );
        } 
    }
    return $title;
}
add_filter( 'get_archive_chapter_title', 'get_archive_chapter_multi_title' );

ざっくり解説

mulitiple_tags()ではタグスラッグの取得を行い、対応するタグ名を取得。そのタグ名を結合して返しています。

すべてのタグを返してもよいのですが、デフォルトのh1の表示には1件目のスラッグに該当するタグ名やカテゴリ名が出力されるため、2件目以降のスラッグを返すようにしています。

アーカイブのタイトルは get_archive_chapter_title で取得し、mulitiple_tags()で取得した文字列と組み合わせて変更しています。この辺りは特にひねりなしです。「 / %sで絞り込み」あたりの文字列をいじると表示を調整することができます。

WordPressの標準機能でコンテンツの絞り込みが行えるため、出力するテキストをハイパーリンク込みのhtmlにすることで複数タグ絞り込みのナビゲーションUIなども作れそうです。

まずは見出しのカスタマイズのみですが、後々その他のUI部分にも手を付けていければと思います。