【WordPress】カテゴリーをアコーディオン化して開閉ボタンを設置する方法

2021年11月4日

開閉を示す簡単なボタンを設置して、WordPressのカテゴリーにアコーディオンを実装することにしました。

以前、WordPressで運営するブログのカテゴリーを、「jQuery」を使用して（プラグインなしで）アコーディオン化するコードを作成しましたが、これを実装してみることにしました。

親要素（親カテゴリー）の「aタグ（リンク）」を無効化する方法をとったので、なんらかのエラーが出てしまわないか気になってきたからです。

また、そのままアコーディオンを実装すると、子要素（子カテゴリー）のあるなしを見た目だけでは識別できなくなるため、「CSS」だけで簡単な開閉ボタン（アイコン）もつくって設置してみることにしました。

今回は、その作業の過程をのこしつつ、WordPressのカテゴリーを、開閉ボタン付きでアコーディオンメニュー化する方法をご紹介します。

WordPressのカテゴリーをアコーディオン化するコード（jQuery）

まずはWordPressのカテゴリーを、プラグインなしでアコーディオン化するコードから。これは以下のとおりです。

<script type="text/javascript">
(function($) {
$(function(){
$(".cat-item .children").hide();
$(".cat-item").click(function(e) {
$(this).children("ul").slideToggle(400);
e.stopPropagation();
});
});

$(".cat-item .children") // 子カテゴリの ul
.closest("li") // 最も近い親要素を探す
.children("a") // a要素（リンク無効にする要素）
.on("click", function(e){
e.preventDefault();
});
})(jQuery);
</script>

「jQuery」というプログラムを使用し、コードは子テーマの「footer.php」のいちばん下あたりに書き込んでいます。

テーマは「Twenty」シリーズを利用したコードなので、環境によっては、子テゴリーの名前（.cat-item）などが異なるかもしれません。

くわしくは、以前コードを作成したさいの記事にも書いてありますので、必要に応じて、そちらもごらんください。

カテゴリーのアコーディオン化はこちら
→【jQuery】WordPressのカテゴリーをプラグインなしでアコーディオン化

アコーディオンメニューに開閉ボタンを設置する手順

さて、ここからが今回の本題。全体のイメージをつかんでいただきたいので、さきに完成したものをご紹介しましょう。

さきほどのカテゴリーをアコーディオン化するコードに、クリックでメニューがひらくことをしめすボタンを設置すればこのようにできます。

具体的な手順としては、

ボタンを開閉させるコード（jQuery）を追加
「CSS」でボタンの調整
実装と動作確認

これだけなのですが、作業中に思ったこともあって、最終的には画像アニメーションのように「開閉」ではなく「開」ボタンのみとしました。

とはいえ作業的には「開閉」からはじめたので、どちらでも対応できる方法をお話しできます。

そんなわけで、ここからは、両パターンを実装する方法を「開閉 → 開のみ」の順でご紹介していきましょう。

１. クリック時に必要なクラス「active」をコードに加える

まずは以下のサイトを参考に、「.toggleClass(“active”)」というものをコードに加えるところからはじめていきます。

（参考サイト：【jQuery】クリックで開閉するアコーディオンメニュー6種類）

これを足すことで、クリック状況に応じて、親要素（親カテゴリー）に「active」という動作を付けたり消したりできるようになります。

今回の方法では、これがないと「開閉」ボタンは実装できません。

開閉ボタンを設置するには、クリック時に「アクティブ」のボタンと、「アクティブではない」ボタンのデザインを切り替える必要があります。そのために、このコードは追加する必要があるわけですね。

具体的には、「jQuery」のコードは以下のとおりで、

<script type="text/javascript">
(function($) {
$(function(){
$(".cat-item .children").hide();
$(".cat-item").click(function(e) {
$(this).children("ul").slideToggle(400);
$(".cat-item").toggleClass("active");//7行目追加部分
$(this).siblings(".cat-item").removeClass("active");//8行目追加部分
e.stopPropagation();
});
});

$(".cat-item .children") // 子カテゴリの ul
.closest("li") // 最も近い親要素を探す
.children("a") // a要素（リンク無効にする要素）
.on("click", function(e){
e.preventDefault();
});
})(jQuery);
</script>

「CSS」は以下のような感じ（開閉ボタンのアイコンは最初から使えるものにしました）。

.cat-item:after, 
.cat-item.active:after {
    margin-left: 10px;
}
.cat-item-11.active::after, .cat-item-13.active::after,
.cat-item-23.active::after {
    content: "▲";
}
.cat-item-11::after, .cat-item-13::after,
.cat-item-23::after{
    content: "▼";
}

ちなみに、「jQuery」のほうは、7行目のコードを追加しただけでは、親要素をクリックしたときに、全部の「開」ボタンが「閉」ボタンになってしまいます。

それを回避するためのコードが次行の8行目。

これを追加することで、「クリックされていないほかの親カテゴリーまでクリックあつかいになってしまう」のをふせげるわけです。

CHECK

「siblings」で兄弟要素（ほかの親カテゴリー）を取得し、「removeClass(“active”)」でクリックされていない親要素からは「active」状態を取り除いてくれる、ということだと認識しています。

２. カテゴリーにアコーディオンメニューを実装

つづいては実装です。さきほどのコードを使って、カテゴリーを開閉ボタン付きのアコーディオンにすると、以下のようになりました。

ひとまず上から3つだけですが、簡単な逆三角（黒）のボタンが設置され、アコーディオン化もできています。

ただ、完成図とはアイコンの位置が「前後ろ逆」になっていますよね？

これは、当初は「アイコンといえばうしろかな」と思ったからそうしたのですが、じつはここで問題が起きたので、そのまま作業の工程をのこしておきました。

いざ親カテゴリーをクリックしてアコーディオンをひらくと……

なぜか、カテゴリー文字列のうしろについた開閉ボタンまでもがいっしょに下がってきてしまったのです！

これは、どうもクリックで親要素が広がる（アコーディオンを開けると親要素が下に伸びる）ことに原因があるようでした。

そこでとったのが、「ボタンを前に持ってくる」という方法だったのです。

３. 開閉ボタンをカテゴリー文字列の前に設置する

個人的に、カテゴリーの件数のあとにボタン（アイコン）がついているのも気になり（数字、記号と連続していることに違和感）、ここでは、ボタンを前に持ってくる作業をおこないました。

以下のとおり、さきほどの「CSS」の「after」を「before」に変更し、「content」内をユニコードという文字列に変更（そのまま記号などを入力すると、文字化けすることがあるため）。

.cat-item:before, 
.cat-item.active:before {
    margin-right: 5px;
}
.cat-item-11.active::before, .cat-item-13.active::before,
.cat-item-23.active::before {
    content: "\25B2";
}
.cat-item-11::before, .cat-item-13::before,
.cat-item-23::before{
    content: "\25BC";
}

これによって、アコーディオン・カテゴリーと開閉ボタンは、以下のようになりました。

完成です！

しかも、これはうれしい誤算というべきでしょう。開閉ボタンを前にもってくることで、さきほどのように、アコーディオンを開けるとボタンの場所がずれるということもなくなったのです！

しかしここで思ったのが、シンプルイズベスト。ようは、開閉時にボタンが変わる必要はいうほどない、と私は感じたのです。

それによって、結局は「jQuery」と「CSS」から「active」部分を削除し、最初にご紹介した「開」ボタンのみとなったわけですね。

最終的には、「jQuery」のコードは以下の最初のもので、

<script type="text/javascript">
(function($) {
$(function(){
$(".cat-item .children").hide();
$(".cat-item").click(function(e) {
$(this).children("ul").slideToggle(400);
e.stopPropagation();
});
});

$(".cat-item .children") // 子カテゴリの ul
.closest("li") // 最も近い親要素を探す
.children("a") // a要素（リンク無効にする要素）
.on("click", function(e){
e.preventDefault();
});
})(jQuery);
</script>

「CSS」は以下のとおり。

.cat-item:before {
    margin-right: 5px;
}

.cat-item-11::before, .cat-item-13::before,
.cat-item-23::before{
    content: "\25BC";
	font-size: 15px;
}

ボタンを「開閉」にしなければ、アイコンもひとつだけですむので、「CSS」もすこしすっきりしました。

ちなみに、アイコンは「Webフォント」という外部サイトのものを利用すれば、いろんなデザインのものを使えるようになりますが、たとえば以下のように、