WordPress

【WordPress】サイドバーのカテゴリーを親カテゴリーだけ表示するカスタマイズ【超簡単】

こんにちは!だちたまです。

ブログ作成にはWordPressを使用していますが、カテゴリーが徐々に増えてきて、サイドバーにあるカテゴリー一覧が見にくくなってきました。

そこで、親カテゴリーのみ表示することにして子カテゴリーを非表示にするカスタマイズをすることにしました。

だちたま
だちたま
WordPressの管理画面から変更しようとしたんですが、なんとそのような機能が無いではありませんか…。

今回はCSSを修正することで親カテゴリーのみの表示を実現しましたので、ご紹介します。

  • 本記事で紹介するカスタマイズはテーマ「Twenty seventeen」でカスタマイズを行いました。
  • 本記事を参考にカスタマイズをする場合は、自己責任でお願いします。
  • カスタマイズをするときは、データのバックアップと、子テーマを設定することをおすすめします。

見にくいカテゴリーの一覧

修正前のカテゴリー一覧はこのように表示されていました。

なっが!(;゚Д゚)

子カテゴリーだけではなく孫カテゴリーまで表示しているのも見にくい原因の一つですね…。

では早速、子カテゴリー以下を非表示にして、親カテゴリーだけ表示するようにカスタマイズしていきます。

親カテゴリーだけ表示するカスタマイズ方法【子カテゴリー以下を非表示】

私が調べた中で、簡単に修正できる方法は2つありました。

  1. style.cssを修正する方法
  2. class-wp-widget-categories.phpを修正する方法

ただし、2つ目のclass-wp-widget-categories.phpの修正については、phpファイルを簡単に子テーマに配置することができないとのこと。

今回の修正対応を加えたとしても、テーマの更新があった場合にはデザインが初期化されてしまうため、1つ目のstyle.cssを修正する方法を採用しました。

それでは、style.cssの修正内容を記述していきますね。

親カテゴリーのみの表示するstyle.cssの修正方法

私がこの対応を行った時のテーマは「Twenty Seventeen」です。

style.cssは、以下のフォルダに格納されています。

style.cssの格納フォルダ
public_html/wp-content/themes/子テーマ

CSSには以下のコードを追加しましょう。

たったのこれだけで対応は完了です!

だちたま
だちたま
あら簡単!

子カテゴリーまで表示して孫カテゴリーを非表示にするstyle.cssの修正方法

もし、「子カテゴリーまでは表示して、孫カテゴリーを非表示にしたい!」という場合には、以下のコードをCSSに追加しましょう。

子どもの子ども=孫を非表示に。わかりやすいコーディングですね!

【参考】親カテゴリーのみの表示する「class-wp-widget-categories.php」の修正方法

参考までに「class-wp-widget-categories.php」を修正して親カテゴリーまで表示する方法についても書きたいと思います。

class-wp-widget-categories.phpは以下のフォルダに格納されています。

class-wp-widget-categories.phpの格納フォルダ
public_html/wp-includes/widgets

このファイルを開くと、

というコードがありますので、2行目に以下のコードを追加しましょう。

以上で対応は完了。
追加するコードの数値「1」を変更することで、全てのカテゴリーを表示したり、子カテゴリーまで表示したりと表示状態を変更することができます。

繰り返しになりますが、この修正方法だとテーマの更新があった場合、デザインが初期状態に戻ってしまうので、CSSを修正する方法をお勧めします。

親カテゴリーだけ表示したカテゴリー一覧

対応を行った後は、以下の様に表示されるようになりました。
これで、少しは見やすくなったかな?

だちたま
だちたま
そもそもカテゴリーが多すぎて、もっと整理しないとね…(;’∀’)

【WordPress】サイドバーのカテゴリーを親カテゴリーだけ表示するカスタマイズまとめ

今回は、サイドバーに設置したカテゴリー一覧の表示状態を、親カテゴリーのみに制限するようカスタマイズを行いました。

親カテゴリーのみに限定するのは管理画面から実行できない場合がありますので、お困りの方は参考にしてみてくださいね!

なお、当サイトでは、他にもWordPressテーマ「Twenty Seventeen」のカスタマイズ記事を書いています。

Twenty Seventeenをより便利に、かつ、より可愛らしいデザインで使いたい場合には、参考にご覧ください。

twenty-seventeen
WordPressテーマ Twenty Seventeenカスタマイズまとめテーマ「Twenty Seventeen」で行ってきたカスタマイズの記事を備忘録的に書いてきましたが、記事が溜まってきましたので、まとめ...