WordPress、Cocoonにてカテゴリー折りたたみプラグインを導入。JS Categories List Widgetの使用方法

メインサイトにて3,500超の記事を投稿していますが、記事とともに増えてきたのが「カテゴリー数」。これまでは、子カテゴリーを折りたたむことなく表示していましたが、サイドバーの半分弱をカテゴリーが占め、これはさすがに長すぎます。

そこで、子カテゴリーを折りたたむべく、「JS Categories List Widget」プラグインを使用することにより、カテゴリー表示がスッキリとしましたので、同プラグインの使用方法などを記載します。

なお、上の画像の右側は、2024年5月19日現在の当サイトのカテゴリーですが、左は従来の一部、右は折りたたみ後の現在の全表示です。

JS Categories List Widgetを利用した背景

本来であれば、メジャーなカテゴリーの折りたたみ（アコーディオン形式）プラグインなどを使用したいところですが、私のサイトでは以下は機能せず。

メジャーなプラグイン「Collapsing Categories」は、インストール・有効化できるものの、本来は表示されるはずのウィジェットに「Collapsing Categories」が表示される、利用できない状況です。
また、Cocoon向けに Cocoon ユーザーの方が開示の内容（css、他）をコピペするも、こちらも機能せず。
さらに、Cocoonの前身のSimplicity（私も利用していました）向けに「わいひら」さんが公開している内容（css、他）を試してみるも、こちらも機能せず。

上記により、以下のとおり「JS Categories List Widget」プラグインを使用すると、一発で表示となりました。

JS Categories List Widgetは、WordPressのプラグイン検索ではヒットせず、以下のサイトから zipファイルをダウンロードして行います。

▲▼2024年5月19日時点では、以下の画像の「ダウンロード」を押下します。

なお、WordPressとPHPのバージョンの要件は以下です。私はWordPressのバージョンが古く（更新済）、エラーとなりましたので留意ください。

▼WordPressのプラグイン一覧にて有効化後ですが、プラグイン名が上記の「JS Categories List Widget」ではなく、「JS Categories List Block」となっていることにも留意ください。

▼私はプラグイン「Classic Widgets」を導入し、従来のウィジェット設定画面を使用しています。「JS Categories List Widget」の有効化後、ウィジェット画面にて表示されますので、サイドバーの任意の場所にドラッグします。

▲▼他のウィジェットと同様に開いて設定しますが、全て英語表示です。英語表示でなくとも、わかりにくい項目があり、「設定してはサイトを確認、必要に応じて何度か設定変更」がわかりやすいです。

それぞれの番号の概要は以下です。

▲▼私の現在の設定は上の画像、下の画像の右側が上の設定での表示事例です。子カテゴリーを表示した際に、親カテゴリーと左揃えとなり、明確に親子カテゴリーを区分したいのですが、CSSなどでの対応は後日とします。

▲▼ちなみに、左のカテゴリーにてカスタマイズした事項は、以下の記事に掲載しています。他サイトのコピペ対応ですが、アイコンなどが優れており、いづれ今回導入のカスタマイズと統合したいものです。

カテゴリーが増え、長いままに数年間放置していたメインサイトと当サイトですが、今回のプラグイン導入により、子カテゴリーを折りたたむことができ、サイドバーがスッキリしました。

また、サイドバーのカテゴリーが長い場合、「PageSpeed Insights」にも影響しますので、折りたたむことにより少なからずスコアアップの恩恵もあります。