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

2021年7月15日2022年2月23日 3分

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

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

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

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

です。

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

かかかず

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

デザインサンプル
- コピペする時の注意点
jQueryのコピペ用コード
ちょっとしたコードの解説
- jQuery：コンテンツフィルター $(‘.cat-item:has(.children)’)
- jQuery：子カテゴリのある親カテゴリにpreventDefault
さいごに

デザインサンプル

早速デザインサンプルですが、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を付ける
  });
});