Cocoonでカテゴリー階層化できない時の対処法【プラグイン＋CSS】

WordPressブログのカテゴリーを整理しようと思ったら！

　私が初めてWordPressで立ち上げた雑記ブログ（つまりこのブログ）ですが、当初は「とにかく記事数を増やそう（ただし内容のあるものを）」という方針でした。
　そんなわけで、書き散らかした記事のカテゴリーも、かなり適当に付けた……結果、とてもまとまりのないカテゴリー表示一覧となってしまいました。

　さらに分け方も雑で、見た目が嫌になるくらい混沌としてしまっています。

　「これでは駄目だ」と思い、親カテゴリーを作って、その下に子カテゴリーをまとめ、見た目をスッキリさせようとしました。

Cocoonはカテゴリーの階層表示ができない仕様だった

　しかし、ここで使っているテーマ Cocoonの仕様として、カテゴリーの階層表示に対応していない という致命的な問題が立ちはだかりました。
　親も子も全部同列に表示されてしまい、階層の意味が消滅します。

---

よし、プラグイン「NS Category Widget」で階層表示しよう

　私はブログのデザインに凝るタイプではないので、テーマはCocoonで十分と考えていました。
　まさかこんな落とし穴があるとは思いませんでした。完全にやられました。

　「じゃあ有料テーマを買えばいいのでは？」という声がありそうですが、金を出してテーマを買おうという気にはなりません。
　Cocoonは確かに痒いところに手が届かないところもありますが、基本は優秀です。そして無料。
　なのに有料テーマを買うのは、なんかもったいない。

　ネット上には、Cocoon含む無料テーマは有料にテーマに比べるとSEO対策が弱い、という情報が流れていますが、そんなことはあり得ません。
　デザインのカスタマイズ性の良し悪いくらいはありますが、違いはそれくらいです。そこが弱点と言われれば否定できませんけれど。

---

Cocoonと相性の良い階層表示プラグイン探し

　そこで、普段はプラグインを極力入れない主義ですが、今回ばかりは頼るしかありませんでした。
　とはいえ、カテゴリー階層表示プラグインはCocoonとの相性問題がある ため、入れれば動くというものではありません。

　結論として、相性よく不具合もなかったのは 「NS Category Widget」 です。

---

NS Category Widget の設定手順

　これまでにプラグインを使ったことがある人なら、そう難しいことはないです。

1. プラグイン → 新規追加 で「NS Category Widget」を検索・インストール
2. 有効化
3. 外観 → ウィジェット
4. “NS Category Widget” をサイドバーへ追加
5. チェックはディフォルト状態でOK
6. 表示順（名前順など）や投稿数表示はお好みで設定

　これで、やっと以下のような階層表示が可能になりました。

親 ┓
   子
   ┃
   子 ┓
   ┃ 孫
   ┃ ┃
   ┃ 孫
   子

　しかし、残念ながら「これでめでたしめでたし！」とはならなりませんでした。

---

なんか、カテゴリー表示が2つになっている！？

　NS Category Widgetで階層表示ができたのは良いのですが――
　その下に、デフォルトカテゴリー表示が残っている じゃありませんか。

　つまり カテゴリーの二重表示 です。見た目が、整理する前より混沌とした状況になりました。

Cocoonではデフォルトカテゴリーをウィジェットから消せない

　外観 → ウィジェット を見ても、デフォルトカテゴリー表示の削除設定が見当たりません。
　また、WordPress純正のカテゴリーウィジェットを入れて階層表示にチェックしても、Cocoon側の表示には反映されません。

　「えっ、こんなんどうすればいいの？」
　と、実はここからが最難関問題でした。

---

デフォルトカテゴリー一覧をCSSで強制的に非表示にする

　散々悩んで試行錯誤の挙げ句、このブログと、私の別サイトでは以下のCSSで綺麗に削除できました。
　追加CSSにそのままコピペすればCocoonなら恐らくこれでALL OKです。（動作の100%保証はしません。使うときは自己責任でお願いします。不具合が発生しても責任は持てません。）

/* デフォルトのカテゴリー表示ブロックを非表示 */
.wp-block-categories,
.wp-block-categories-list {
    display: none !important;
}

/* カテゴリーリストを含む親グループも削除 */
.wp-block-group:has(.wp-block-categories-list) {
    display: none !important;
}

/* MEMO:
  display:none; = 完全に非表示
  !important = 競合時に最優先
  :has() = 指定要素を含む親要素に作用（モダンブラウザ対応）
*/

CSSの追加場所

　ダッシュボード → 外観 → カスタマイズ → 追加CSS

※ Cocoon子テーマの style.css に書いても動作すると思います。（試してません）

---

注意

　CSSをもっと最適化できる人はいろいろ弄ってみて下さい。しかし下手なCSSの書き方をすると、サイドバー自体が全部消えてなくなったりしますので気をつけて下さい。

---

CSSが反映されないときの対処法

• ブラウザキャッシュのクリア
• Ctrl + F5（強制再読み込み）
• スマホ表示に関しては、私はPCしか使いませんので試してはいませんが、キャッシュが残りやすいようなので要確認

　CSSを入れても、キャッシュで変化していないように見えることが多いです。

---

カテゴリー階層化のSEOメリット

• 内部リンク構造が整理され、検索評価に有利
• 回遊率UP（読者が関連記事に移動しやすくなる）
• 雑記ブログでもテーマ性を確保しやすい
• Googleがサイト構造を理解しやすい

　階層表示は、見た目以上にSEOで重要な要素です。

---

まとめ

　こうして文章にするとあっさりしていますが、Cocoonとの相性が良いプラグイン探しから、デフォルトカテゴリー表示の削除までに丸一晩掛かりました。

　これは私がWordPressやCSSに精通していないからで、詳しい方なら数分で解決していたかもしれません。

　この覚書は、私と同じようにWordPressやCSSに詳しくない方が、Cocoonで「カテゴリー階層表示ができない問題」にぶつかったときの助けになれば と思い、記事として残します。

---