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

開閉を示す簡単なボタンを設置して、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）などが異なるかもしれません。

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

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

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

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

具体的な手順としては、

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

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

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

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

１. クリック時に必要なクラス「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行目。

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

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

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

ひとまず上から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フォント」という外部サイトのものを利用すれば、いろんなデザインのものを使えるようになりますが、たとえば以下のように、

初期状態でもこのような色つきのものや、

青背景の四角い枠で囲まれた、逆三角形のアイコンも使えます。

右向きの小さい三角形もありますよ。

ただし、こういったすこし変わったものは、端末などの環境によっては色合いが変わってしまうこともあります。

場合によっては、文字化けして表示されなくなってしまうこともあるので、結局私は、これも最初の逆黒三角に落ち着きました。

ボタンはシンプルな黒の逆三角形で開のみ。今回の作業は、これで完了となります。

どうしても自力での実装が難しいときは

今回の作業は、私はいちから「jQuery」についてしらべ、まる2日間かけてなんとか実装することができたのですが、どうしても自力ではむずかしい場合もあるかと思います。

そんなときは、「ココナラ 」の利用も検討してみてください。

ココナラは、個人のスキルを売り買いする日本最大級のスキルマーケットで、知名度の急上昇にともない、スキルを持った出品者もかなり増えてきています。

WordPressのカスタマイズ であれば、安いと2000円～で依頼することができます。くわしい人なら、これくらいのカスタマイズであれば、数時間以内でやってのけてしまうでしょう。

人にまかせられる部分は人にまかせる。そうすれば、自分にしかできないことをできる時間が増えます。私も最近、その考えにいたり、ココナラを利用しはじめました。

かなりしっかりしたサイトで使いやすいので、WordPressのカスタマイズを数時間やってもうまくいかない、なんてときは、ココナラでくわしい人に依頼するのもおすすめできますよ。

ココナラのWordPressカスタマイズはこちら

今回のまとめ

環境による差もあるので、そのままコピペで実装できるかは、はっきりしない部分もあります。が、カテゴリーの名前（.cat-item）がちがう程度であれば、そこまで大差なくいけるのではないかなと思います。

トライされる場合は、かならず事前にバックアップをとってからはじめてみてください。うまくいけば、わりと簡単に実装できると思いますよ。

また、当初懸念していたエラーやバグといったものは、半年ほど使っていても、PC・スマホともになかったので、だいじょうぶだと思います。

カテゴリーは増えてくると、下に伸びていってしまい、ユーザビリティ（利便性）的にもよくありません。

自力でできそうなら自力で。無理そうなら「ココナラ 」も検討。どうぞご参考にしてみてください。