WordPress のカテゴリー表示を折り畳めるようにする

はてなブログのでの過去のカスタマイズ

はてなブログの「hiroの長い冒険日記」では、標準の機能では不足を感じて色々とカスタマイズしていました。

カテゴリーの階層化とパンくずリストの設置や

https://hiro20180901.hatenablog.com/entry/2021/02/15/230000/

hiro20180901.hatenablog.com

階層化グローバルメニューを追加したり

https://hiro20180901.hatenablog.com/entry/2021/02/16/233000/

hiro20180901.hatenablog.com

Google フォームでお問い合わせフォームを作ったり

https://redo5151.hatenablog.com/entry/question_adsense/

redo5151.hatenablog.com

と、様々なサイトを参考にしながら自分好みのデザインになるように工夫を積み重ねていました。

WordPress の Cocoon テーマの機能

スポンサーリンク

スポンサーリンク

WordPress の Cocoon テーマには、標準で私の欲しい機能が全て含まれていました。

• グローバルメニュー (ヘッダメニュー、フッタメニュー) と階層化
• サイドパネル (スクロール追従含む)
• カテゴリーの階層化
• パンくずリスト　(表示位置も変更可能)

また、追加で Contact Form 7 プラグインを導入する事により、お問い合わせフォームも簡単に作成することが出来ました。

LOLIPOP! レンタルサーバーの契約とムームードメインで独自ドメイン取得とWordPress の設定

LOLIPOP! のレンタルサーバとムームードメインの独自ドメインの契約から、ユーザー設定画面での各種設定を確認、WordPress のページ公開までの手順です。WordPress のテーマは Cocoon を選択しました。

hiro20180901.com

2023.01.29

WordPress に移行して数日ですが、機能は豊富で全てを把握できていません。少しずつ使いこなせるように色々と試している途中です。

Cocoon 標準機能ではカテゴリが折り畳みできない

私がはてなブログのカテゴリ表示で最も拘ったのは、サイドパネルに表示するカテゴリーが折り畳みできる事です。以下の画像は「hiroの長い冒険日記」のサイドパネルのカテゴリー表示です。

残念ながら、Cocoon のカテゴリー表示は、親子関係は表現できるものの、縦一列に全て表示されてしまいます。この形では、カテゴリーが多くなってきた時に縦長に表示されてしまい、私の好みとズレてしまいます。

Cocoon で折り畳み可能なカテゴリ表示を実現する

「カテゴリー　折り畳み」や「カテゴリー　アコーディオン」でググってみると、Cocoon にカテゴリー折り畳みのプラグインは相性が悪いとの記事を見つけました。

その中で、代替手段として CSS と Javascript で折り畳めるカテゴリーを実現されている方がいました。

【WordPress+Cocoon】カテゴリを折り畳み式（アコーディオン）にしてみた

サバ缶 どうもこんにちは！サバ缶（@tech_begin）です。 今回は、わたしがずっとやりたかった『カテゴリの折り畳み（アコーディオン）』を実装してみました。 いろんなことを詰め込んで実装したので、 今後の自分の備忘録としても同じ問題を抱

tech-begin.com

こちらを参考に、Cocoon child テーマに CSS と Javascript を追記しました。追記箇所は、「外観」「テーマファイルエディタ」内の style.css と javascript.js です。

これで下の図のように、ツリー形式で折り畳めるカテゴリー表示が可能となりました。

まとめ

WordPress でも、はてなブログで使用していたような折り畳みの出来るカテゴリー表示が可能なように、CSS と Javascript を追加しました。もう少し改良したい所はありますが、内容を理解して徐々に直します。先ずは ICON の変更でしょうか。一つずつ自分好みに変えていこうと考えています。

今日のアイキャッチ画像

Gustavo RezendeによるPixabayからの画像です。小学1年～2年の担任の先生がアコーディオンを演奏していたのを思い出しました。私は足踏みオルガン担当でした(他の人に踏んでもらってた)。