こんにちは!「ダチたま」です。

記事のカテゴリーが徐々に増えてきて、サイドバーにあるカテゴリー一覧が見にくくなってきたので、親カテゴリーのみ表示することにして子カテゴリーを非表示にすることにしました。

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

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

スポンサーリンク



問題のカテゴリー一覧

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

なっが!(;゚Д゚)
子カテゴリーだけではなく孫カテゴリーまであるのも原因の一つのだと思われますが、それは今は置いておいて。

では早速、この長く表示されてしまっているカテゴリー一覧を親カテゴリーだけの表示にしていきます。

 

修正方法

私が調べた中で、簡単に修正できる方法は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は、以下のフォルダに格納されています。

 

POINTpublic_html/wp-content/themes/子テーマ

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

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

 

子カテゴリーまで表示して孫カテゴリーを非表示に(style.cssの修正)

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

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

親カテゴリーのみの表示(class-wp-widget-categories.phpの修正)

参考までに2つ目のclass-wp-widget-categories.phpの修正方法についても書きたいと思います。

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

 

POINTpublic_html/wp-includes/widgets

このファイルを開くと、

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

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

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

 

修正後のカテゴリー一覧

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

 

終わりに

今回は、サイドバーに設置したカテゴリー一覧の表示を親カテゴリーのみに限定するようカスタマイズを行いました。(カスタマイズと呼べるほど大層なことしてないですが。)

親カテゴリーのみに限定するのは管理画面から実行できませんので、お困りの方は参考にしてみてください。

この記事をシェアする

“【WordPress】サイドバーのカテゴリーを親カテゴリーだけ表示するカスタマイズ” への3件の返信

  1. はじめまして。有益な情報ありがとうございます。
    親と子は表示させて、孫カテゴリだけを非表示にしたいのですが、その場合はどのようにすればよいのでしょうか。

    どうぞよろしくお願いします。

  2. 坂井様
    はじめまして。ダチたまです。
    コメント遅くなり申し訳ありません。記事中にも追加しましたが、CSSで孫カテゴリを非表示にしたい場合は、
    .children .children{
    display:none;
    }
    を追記してみてくださいね。
    一度お試しください!

  3. .children{
    display:none;
    }

    をCSS に咥えてもサイドバーに子カテゴリーが表示されてしまいます…
    テーマはSimplicity2です

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です