Lightning G3を使ってWordPressカテゴリーの絞り込み検索を自作した話。

$options = array(
	// card, card-noborder, card-intext, card-horizontal , media, postListText.
	'layout'                     => 'media',
	'display_image'              => true,
	'display_image_overlay_term' => true,
	'display_excerpt'            => true,
	'display_date'               => true,
	'display_new'                => true,
	'display_taxonomies'         => false,
	'display_btn'                => true,
	'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'                => '',
);
VK_Component_Posts::the_view( $post, $options );

<?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; ?>

<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>

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');
  })

});