【WordPress】アコーディオン・カテゴリーに開閉ボタンを設置して実装

気が変わったので、開閉を示すボタンを設置して、カテゴリーのアコーディオンを実装することにしました。

以前、実装する予定はまだなかったものの、WordPressで運営している当ブログのカテゴリーを、「jQuery」を使用してアコーディオン化するコードを作成しましたが、せっかくなので実装してみることにしました。

おそらくそれはないと思われますが、親要素(親カテゴリー)の「aタグ(リンク)」を無効化したので、クローラーというサイトを巡回してくれるプログラム(ロボット)に、エラーが出てしまわないか気になってきたからです。

しかし、そのままアコーディオンを実装すると、子要素(子カテゴリー)のあるなしを見た目では識別できないという問題が。そこで私は、ひとまずは「CSS」だけで、簡単な開閉ボタン(アイコン)をつくることにしたのです。

今回は、そのアコーディオンメニューに開閉ボタンを設置した手順と、実際にカテゴリーに実装した感じをご紹介したいと思います。

関連記事

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

クリック時に「active」というクラスを付与(jQuery)

今回の作業は、以前作成したカテゴリー・アコーディオン化のコードに、クリックすればメニューが開閉することを示すボタンを設置するだけのものなので、サクサク進めていきたいと思います。

まずは、以下のサイトを参考に、「.toggleClass(“active”)」というものをコードに加え、クリック状況に応じて親要素(親カテゴリー)に「active」を付けたり消したりしてくれるようにしたのち、「CSS」でアクティブのときボタンと、アクティブではないときのボタンをつくることで、カテゴリーに開閉ボタンを設置します。

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

具体的には、「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行目を追加することによって、「siblings」で兄弟要素(おそらくほかの親カテゴリー)を取得し、「removeClass(“active”)」で、クリックされていない親要素からは、「active」状態を取り除いてくれる(オフにしてくれる)のです(たぶん)。

そして、これらのコードで開閉ボタンを追加したアコーディオン・カテゴリーは、以下のとおりです。

カテゴリーのアコーディオン開閉ボタン

ためしに上から3つだけ、簡単な逆三角(黒)のボタンを設置してみました。

それらしくなってきたような気がします。が、いざこれをクリックしてみると、なぞの現象が発生!

アコーディオンを開けるとボタンが下がる

なんと、アコーディオンを開けると、なぜかカテゴリー文字列のうしろについた開閉ボタンまでもが、いっしょに下がってきてしまうのです。

これは、どうもクリックで親要素が広がる(アコーディオンを開けると親要素が下に伸びる)ことに原因がありそうでしたが、正直いうと、よくわかりませんでした。

しかし、そんなことよりも私としては、カテゴリーの件数のあとにボタン(アイコン)がついていることのほうが問題だった(数字、記号と連続していることに違和感を感じた)ので、このボタンを前に持ってくることにしたのです。

開閉ボタンをカテゴリー文字列の前にもってくる

.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";
}

先ほどの「CSS」の「after」を「before」に変更し、「content」内はそのまま記号などを入力すると、たまに文字化けすることがあるので、ここではユニコードという文字列を使用。

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

アコーディオンの開閉ボタンは前に持ってくるとズレない

なかなかいいのではないでしょうか!?

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

これはもう、ほとんど完成といってもいい状態かもしれません。

しかし、シンプルイズベストを目指す私としては、開閉時にボタンが変わる必要すらないとしだいに感じ始めたので、結局最初の「jQuery」のコードから、7~8行目の「active」部分を削除し、「CSS」からも同じく除去!

これによって、シンプルなアコーディオン・カテゴリーが完成したのです!……いや、その前に、せっかくなので、少し遊んでみるのもわるくはないでしょう。

赤い逆三角形の開閉ボタン

アイコンに関しては、外部から引っ張ってくればいろんなものが使えますが、たとえば、初期状態でもこのように色つきのものや、

青い四角の枠に入った逆三角形の開閉ボタン

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

右向きの三角形の開閉ボタン

右向きの小さい三角形もあり!

ただ、こういった少し変わったものは、端末などの環境によっては色合いが変わってしまったり、場合によっては、文字化けして表示されなくなってしまうこともあったりするので、結局はこれも最初の逆黒三角に落ち着きました。

今回の作業はこれで完了。ひとまずはこれで、様子を見てみたいと思います。

今回のまとめ

・「active」というクラスを付与すればクリックで表示の切り替えが可能
・アンドロイド端末は文字化け率が高いような気がする
・ボタンが下にさがってくる原因の究明は放棄しました

もともと今回のアコーディオンメニューは、全カテゴリーが細分化するまで実装する気はなかったのですが、おそらく、突然思い立って完成させたということは、いまが真の実装するタイミングだったということなのでしょう。

ユーザビリティの向上につながるかどうかは現時点ではまだわかりませんが、そのうち効果を発揮してくれることと思います。

あとはバグやエラーが出ないことを祈るのみですね。アコーディオンの感じが気になる方は、当ブログのサイドバー部分(スマホはページ最下部付近)をチェックしてみてください。

スポンサーリンク
この記事をシェアする

コメントを残す

日本語が含まれない投稿は反映されませんのでご注意ください。なお、コメントは承認制となっているため、反映までにお時間をいただく場合などがございます。