投稿日:2021年10月23日

更新日:2021年11月14日
 

先日、下記のような相談がありました。
 

WordPressで、カテゴリー一覧ページを作り、絞り込み表示をさせたい。
さらに、他のページからボタンクリックで、絞り込まれた状態でページ遷移させたい。
 

検証しました。
最初にお見せします。
これがそのサイトです。 
 

過去に絞り込みPlug-InSearch & Filterを検証しました。素晴らしいPlug-Inなのですが、自分の思ったようなカスタマイズは行えませんでした。
 

色々と調べたら参考になるサイトが複数ありましたが、チャレンジも兼ねて自作してみることにしました。
テーマはLightning G3を使用。
以下がその手順です。

 固定ページの作成

カテゴリー一覧
「カテゴリー一覧」「カテゴリー検索」という固定ページを作成しました。
表示設定で「カテゴリー一覧」投稿ページ「カテゴリー検索」ホームページに設定してあります。
 

カテゴリー一覧

カテゴリー一覧
「カテゴリー検索」「カテゴリー一覧」の内容。
PHPに表示する内容を記述するのでタイトルだけ入力しています。
 

カテゴリー一覧
▲子テーマの内容です。
「カテゴリー検索」は_g3内の index.php
「カテゴリー一覧」は _g3 -> template-parts -> main-archive.php を使用します。
スタイルは、css内の style.css に持たせ、子テーマのcssと役割を分けました。
js内の costomize.js に各ロジックを記述しています。
 

_g3 -> template-parts -> loop-item.php
は出力されるコンテンツの詳細を持っています。
下記のような記述になっています。

$options = array(
	// card, card-noborder, card-intext, card-horizontal , media, postListText.
	'layout'                     => 'media',
	'display_image'              => true,
	'display_image_overlay_term' => false,
	'display_excerpt'            => true,
	'display_date'               => true,
	'display_new'                => false,
	'display_taxonomies'         => false,
	'display_btn'                => false,
	'image_default_url'          => false,
	'overlay'                    => false,
	'btn_text'                   => __('Read more', 'lightning'),
	'btn_align'                  => 'text-right',
	'new_text'                   => __('New!!', 'lightning'),
	'new_date'                   => 7,
	'class_outer'                => 'vk_post-col-xs-12 vk_post-col-sm-12 vk_post-col-lg-12',
	'class_title'                => '',
	'body_prepend'               => '',
	'body_append'                => '',
);

カテゴリー一覧
▲例えば、falseになっているところを全てtrueにすると上図にように出力されます。
2行目のコメントアウトしている箇所がデザインの種類です。
'layout' => 'media'; で上図のようになります。
任意で設定しましょう。
 

カテゴリー一覧
▲左が card。右が card-noborder
囲み罫があるかないかの違いで横幅いっぱいの体裁になります。
 

カテゴリー一覧
card-intext
マウスオーバーで右図のように透過コンテンツが下からスライドアップします。
横幅いっぱいの体裁になります。
 

カテゴリー一覧
card-horizontal
横組みのカード形。
 

カテゴリー一覧
postListText
アイキャッチは出力されません。
 

では、各ファイルをみていきましょう。

 index.php

<?php if (is_page(63)) : ?>
	<p style="margin-bottom:0;">クリックで検索結果ページに遷移します。</p>
	<div id="catBtnWrap">
		<p class="catBtn" id="catSearchBtn01">カテゴリー01</p>
		<p class="catBtn" id="catSearchBtn03">カテゴリー03</p>
		<p class="catBtn" id="catSearchBtn05">カテゴリー05</p>
		<p class="catBtn" id="catSearchBtn07">カテゴリー07</p>
		<p class="catBtn" id="catSearchBtn09">カテゴリー09</p>
	</div>
<?php endif; ?>

▲_g3フォルダ直下のindex.php
50行目辺りに site-body-container をクラス名に出力するdiv が記載されているので、その下に上のコードを追記します。
検索したいカテゴリー対象のボタンで、今回は奇数のカテゴリーにしてみました。
is_page() 関数で出力対象の固定ページIDを指定しています。

 main-archive.php

<div id="catBtnWrap">
	<p class="catBtn" id="catBtn00">全て表示</p>
	<p class="catBtn" id="catBtn01">カテゴリー01</p>
	<p class="catBtn" id="catBtn02">カテゴリー02</p>
	<p class="catBtn" id="catBtn03">カテゴリー03</p>
	<p class="catBtn" id="catBtn04">カテゴリー04</p>
	<p class="catBtn" id="catBtn05">カテゴリー05</p>
	<p class="catBtn" id="catBtn06">カテゴリー06</p>
	<p class="catBtn" id="catBtn07">カテゴリー07</p>
	<p class="catBtn" id="catBtn08">カテゴリー08</p>
	<p class="catBtn" id="catBtn09">カテゴリー09</p>
	<p class="catBtn" id="catBtn10">カテゴリー10</p>
</div>

▲検索ページとほぼ同じ。
56行目辺りに post-list をクラス名に出力するdiv が記載されているので、その上に上のコードを追記します。

 customize.js

jQuery(function ($) {

  // 全てのカテゴリーボタン
  let allCatBtnArry = [
    '#catBtn00',
    '#catBtn01',
    '#catBtn02',
    '#catBtn03',
    '#catBtn04',
    '#catBtn05',
    '#catBtn06',
    '#catBtn07',
    '#catBtn08',
    '#catBtn09',
    '#catBtn10'
  ];

  // 全てのコンテンツ カテゴリー
  let allCatArry = [
    '.category-category01',
    '.category-category02',
    '.category-category03',
    '.category-category04',
    '.category-category05',
    '.category-category06',
    '.category-category07',
    '.category-category08',
    '.category-category09',
    '.category-category10'
  ]

  /////////////////////////////////
  // ▼▼▼ 絞り込みながらページ遷移
  /////////////////////////////////
  const catBtnClick = (targetSearchBtn, targetQuery, targetCatrgory, targetBtn) => {
    $(targetSearchBtn).click(function () {
      location.href = 'home/?search=' + encodeURIComponent(targetQuery); // クエリ追加。ページ遷移 catにすると動作がおかしくなる
    });

    let query = location.search.split('='); // クエリを'='で分割
    let catResult = decodeURIComponent(query[1]); // '='以降のクエリ

    if (catResult == targetQuery) { // クエリとカテゴリー表記が同じならば
      $(allCatArry.join(',')).css('display', 'none'); // 指定以外のカテゴリーを非表示にする
      $(targetCatrgory).slideDown('slow'); // 対象のカテゴリーコンテンツを表示
      $(targetBtn).css({ // ボタンの色を黒に
        backgroundColor: '#000',
        color: '#fff',
        transition: '.3s'
      });
      $('#catBtn00').css({ // ボタンの色を白に
        backgroundColor: '#fff',
        color: '#000',
        transition: '.3s'
      });
    }
  }
  catBtnClick('#catSearchBtn01', 'カテゴリー01', '.category-category01', '#catBtn01');
  catBtnClick('#catSearchBtn03', 'カテゴリー03', '.category-category03', '#catBtn03');
  catBtnClick('#catSearchBtn05', 'カテゴリー05', '.category-category05', '#catBtn05');
  catBtnClick('#catSearchBtn07', 'カテゴリー07', '.category-category07', '#catBtn07');
  catBtnClick('#catSearchBtn09', 'カテゴリー09', '.category-category09', '#catBtn09');

  /////////////////////////////////
  // ▼▼▼ ボタンクリックで対象以外を非表示
  /////////////////////////////////
  const slideContents = (targetBtn, targetTag) => {
    $(targetBtn).click(function () {
      $(targetBtn).css({ // ボタンの色を黒に
        backgroundColor: '#000',
        color: '#fff',
        transition: '.3s'
      });
      let notTargetBtn = allCatBtnArry.filter(function (allCatBtnArry) { // 対象以外のボタン
        return allCatBtnArry !== targetBtn;
      });
      $(notTargetBtn.join(',') + ',#catBtn00').css({ // ボタンの色を白に
        backgroundColor: '#fff',
        color: '#000',
        transition: '.3s'
      });
      $(allCatArry.join(',')).slideUp('slow'); // 配列を文字列に変換。','でつなぐ
      $(targetTag).slideDown('slow');
    });
  }
  slideContents('#catBtn01', '.category-category01');
  slideContents('#catBtn02', '.category-category02');
  slideContents('#catBtn03', '.category-category03');
  slideContents('#catBtn04', '.category-category04');
  slideContents('#catBtn05', '.category-category05');
  slideContents('#catBtn06', '.category-category06');
  slideContents('#catBtn07', '.category-category07');
  slideContents('#catBtn08', '.category-category08');
  slideContents('#catBtn09', '.category-category09');
  slideContents('#catBtn10', '.category-category10');

  /////////////////////////////////
  // ▼▼▼ 全てを表示
  /////////////////////////////////
  $('#catBtn00').click(function () {
    $('#catBtn00').css({ // ボタンの色を黒に
      backgroundColor: '#000',
      color: '#fff',
      transition: '.3s'
    });
    let notTargetBtn = allCatBtnArry.filter(function (allCatBtnArry) { // 対象以外のボタン
      return allCatBtnArry !== '#catBtn00';
    });
    $(notTargetBtn.join(',')).css({ // ボタンの色を白に
      backgroundColor: '#fff',
      color: '#000',
      transition: '.3s'
    });
    $(allCatArry.join(',')).slideDown('slow');
  })

});

「カテゴリー検索」「カテゴリー一覧」のロジックを1つにまとめました。
32行目〜、「カテゴリー検索」はそれぞれのカテゴリーボタンをクリックすると、?search=カテゴリー01というクエリを持たせ、ページ遷移します。
catBtnClick関数の第2引数とクエリが一致したら、遷移先のコンテンツを一度全て非表示にし、対象のカテゴリーを表示させる仕様にしています。
ボタンの色の変更も行なっています。
64行目〜、「カテゴリー一覧」ページのロジック。
それぞれのボタンクリックで対象のカテゴリーボタンが黒で表示され、対象のカテゴリーが表示されます。
ここでも、最初に一度、全てのカテゴリーを非表示にし、対象のカテゴリーを表示する仕組みにしています。
「全て表示」クリックで「全て表示」ボタンを黒にし、全てのカテゴリーを表示します。
ポイントとして、3〜30行目で、「全てのカテゴリーボタン」と「全てのコンテンツ カテゴリー」を配列にし、85行目、106行目のfilter関数でクリックされた対象から除外、それ以外を表示非表示、cssで設定しています。
配列を文字列に変換する必要があり、 join(',') のように操作しています。(49、87、92、109、114行目)
 

まとめ

もう一度お見せします。
これがそのサイトです。 
 

当初「これはできないのでは。。。」と思っていましたが、進めるにつれ「これは、できるぞ!」という確信に変わりました。
チャレンジすることは良いことですね。
最近、想像することができるようになることが増えてるような気がします。
色々と柔軟にこなしたいと思います。
 

2021年11月14日追記
このカスタマイズを八王子WordPressミートアップ2021/11月度 で紹介させていただきました。
八王子WordPressミートアップ
以下のような評価をいただきました。

・検索の絞り込みの工夫は面白いと思いました。

・参考になりました

・簡単な機能から私も挑戦したいと思います。ありがとうございます。デザイナーさんに制約を与えたくないというところが良いなぁと思いました。

・テーマに入っている機能だとばかり思っていましたが、自分で作ることができるのか、ということがわかりました。

・柔軟な工夫をされていて、制作の励みになります。ありがとうございます。

・普段、簡単に検索していることが、こんなに奥深い過程だったとは・・・。システムの知識がなくても挑戦できるかも!?と思わせるほど、わかりやすかったです。

・よくわからなかったです。すみません。

・検証からタグを見つけてそこからコードを書いていく作業など、考えもつきませんが、本当にすごいと思いました。しかし、大澤さんもおっしゃっていましたが、もしかして、テーマによってはアーカイブで似たようなことができるのかなとも思いました。私はテーマをシドニーを使っていますが、何となく似たようなことができるので恐れながらそう思いました。

・私には少し難しかったですが、カテゴリタブを作る時に必要な流れや必要な知識が分かったのでとても有意義でした。ありがとうございました。

・非常に有難いトピックでした。しかしながら初心者にとって若干難しいトピックであったかなと感じております

・文字列検索をしてファイルを探して、変更するという作業は自分でも行っているので共感しながら聞いていました。

・同じようなカスタマイズをしてみたいと思いました

・検索ページは需要がありそうですね。

・カテゴリを絞り込む機能を自分で作ることができるのがとてもすごいと思いました。

・カスタマイズの比較的初期の段階でこの絞り込み検索は通るステップです。でも「わいがや」でのお話しから、ご自分でWP関連のスキルを磨いておられるご様子でしたので、開発の苦労話などもお聞きしてみたいと思いました。

 

「学んだことのアウトプットを大切に」を座右の銘にしています。
その機会をいただき、ありがとうございました。
引き続き勉強させていただきます。
 

最後まで読んでくださりありがとうございました。
 

関連記事


 


 

Pocket