jQueryを使ってWordPressの子カテゴリーをアコーディオンで表示させるスニペット

アコーディオンのイラスト

ブログで記事が増えてくると、カテゴリーもそれに比例して深くなりがちです。

記事のカテゴライズでスマートフォンサイトのような、ある程度の情報量にしなければいけない時にアコーディオンを用いれば、ユーザーが欲しい情報だけオンデマンドで、さらに詳しく見せることができます。

この記事は、そんなWordPressの子カテゴリーをアコーディオンで表示させる方法について、

  • アコーディオンのデザインサンプル
  • jQueryのコピペ用コード。
  • jQueryのコピペ用コードのちょっとした解説。

です。

簡単にjQueryのコピペだけで実装できてしまうので、カテゴリーの表示を変更したい方は参考にしてみてください。

かかかず
かかかず

コピペ用コードは、当サイトで使用しているWordPressテーマSANGOで試しています。他のテーマだと仕様が違う場合があるのでご了承ください。

デザインサンプル

早速デザインサンプルですが、PCだとこの記事の右にあるカテゴリー一覧がサンプルです。

丁度、以下の動画のように子カテゴリーを持つ親カテゴリーを選択すると、アコーディオンのように開閉します。

そして、子カテゴリーを持たない親のみのカテゴリーは、そのままリンクする形です。

かかかず
かかかず

サンプルのUIは挙動がイメージしづらいので、実装後はCSSでサイトやブログに合うようデザインするとGOODです。

アコーディオンUIについての詳しくは、以下の記事も参考にご覧ください。

関連記事 アコーディオンの基本的な使い方とデザイン

コピペする時の注意点

この記事で紹介のコピペ用コードには、jQuery本体の組み込みが必要です。

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合には、以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。

MEMO
当サイトでは以下のjQueryを使用しています。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
上記のような記述が、htmlファイルの
<head>〜</head>
の中に無い場合その中へ貼り付けましょう。

jQueryのコピペ用コード

以下の通り、jQueryのコピペ用コードだけで実装可能です。<body>〜</body>のクロージングタグ直前に記述しましょう。

コードを表示する

jQuery

(function($) {
$(function(){
$(".cat-item .children").hide(); // 子カテゴリを隠す
$(".cat-item").click(function(e) {
$(this).children("ul").slideToggle(300); // 開閉時の時間
e.stopPropagation();
});
});
})(jQuery);

$(function(){
  $('.cat-item:has(.children)').click(function(event){
    event.preventDefault();
    $('.cat-item:has(.children)').addClass("category_parent"); // 親カテゴリにcategory_parentを付ける
  });
});

ちょっとしたコードの解説

ちょっとしたコードの解説です。jQueryのカスタマイズをしたい方はこちらもご覧ください

jQuery:コンテンツフィルター $(‘.cat-item:has(.children)’)

子要素の有無など、コンテンツの状態に応じて要素を絞り込むコンテンツフィルターを使用しています。

具体的には、$('.cat-item:has(.children)') の部分で、.children の子要素を持つ親 .cat-item を指定するために $('.親:has(子)') を使用しています。

jQuery:子カテゴリのある親カテゴリにpreventDefault

jQueryの後半にある、$('.cat-item:has(.children)').addClass("category_parent"); から始まる部分は、親カテゴリにpreventDefault を付与させて、aタグのリンク機能を無効にしています。

そして、その親カテゴリの要素に category_parent のclassを付与しながら、クリックイベントを伝えています。

かかかず
かかかず

子カテゴリを持つ親カテゴリのみclassを付与するので、CSSでアコーディオンであることが分かるように加工しましょう。

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影