※当サイトではアフィリエイト広告を利用しています。

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

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

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

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

スポンサーリンク

JS Categories List Widgetを利用した背景

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

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

 

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

JS Categories List Widgetの利用方法

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

JS Categories List Widget ダウンロードサイト(海外)

 

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

 

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

  • WordPress の必須バージョン: 6.1以上
  • 対応する最新バージョン: 6.5.3
  • 必須 PHP バージョン: 7.0以上

 

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

 

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

 

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

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

  • ①には「カテゴリー」などの項目を入力します。
  • ②は子カテゴリーを開く際の記号の選択です。「▶▼」ほか、「+・-」もあります。私の環境では、後者は行ズレするために前者としています。
  • ③は上記の記号の右寄せ・左寄せの選択です。
  • ④は「Accordion」の折りたたみする、「None」の折りたたみしない、などの選択です。
  • ⑤はカテゴリーの並び順の設定です。今回、私が設定した2サイトでは、初期設定で「Taxonomy Order」の並び順となっているイメージです。
  • ⑥の冒頭はカテゴリー毎の投稿記事数の表示、中央は記事のないカテゴリーを表示するかの制御です。
  • ⑦は表示しないカテゴリーの選択です。私の場合、カテゴリーの分類が古く、非表示としたいカテゴリーがあり、有難い機能です。

 

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

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

Cocoon、カテゴリーの行間を狭くし、長いカテゴリーをすっきりとカスタマイズ(他サイトのコピペ対応)

まとめ

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

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

 

コメント