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

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

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

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

はてなブログのカテゴリーを階層化する方法 (パンくずリストの活用) - hiroの長い冒険日記

他のサイトを見ていると、記事本文の上に「今の記事が全体のどの位置にいるか」が表示されているページがあります。これはパンくずリストと呼ばれています。はてなブログにもパンくずリストの機能があり、有効にすれば記事の上部に表示されるようになります。...

hiro20180901.hatenablog.com

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

グローバルメニューを変更 - hiroの長い冒険日記

はてなブログの無料版で Google AdSense の審査に合格するために、グローバルメニューを設置・設定しました。その後、自分で使いだしてみると色々と気になる点が出てきました。急いで調べて設定した為に、参考にさせて頂いたサイトの古いバー...

hiro20180901.hatenablog.com

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

「お問い合わせフォーム」作成方法を徹底解説｜「無料版はてなブログ」でも設定可能！ - redoブログ

今回はプライバシーポリシーの対策として、「お問い合わせフォームの設置方法」をご紹介します。 私自身、PRO版しか対応してないと勝手に思って放置してたのですが、「サイドバー」に設置する方法で可能です。 お問い合わせフォームを設置していない方は...

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年の担任の先生がアコーディオンを演奏していたのを思い出しました。私は足踏みオルガン担当でした(他の人に踏んでもらってた)。