WordPressテーマ「STINGER5」のサイドバーのカテゴリー階層を見やすくするカスタマイズ

STINGER WordPress
この記事は約3分で読めます。

レスポンシブデザインのWordPressテーマ「STINGER5」をカスタマイズします。

今回は、サイドバーのカテゴリー階層の部分です。

WordPressではカテゴリーに親子関係を指定して階層化できますが、STINGER5の場合、「親」と「子」の位置が変わらず、階層になってるのかどうかが非常にわかりにくかったです。

なので、子カテゴリーを字下げして見やすくしたいと思うわけです。

なお、今回のバージョンは以下です。

  • stinger5ver20150505b
スポンサーリンク

カテゴリーを階層表示に設定

まずは、サイドバーのカテゴリーを階層表示に設定します。

「外観」⇒「ウィジェット」を開き、追加したカテゴリーウィジェットの「階層を表示」をチェックオン。

STINGER5 サイドバー カテゴリー階層

これで、階層表示されます。

あとは、子のカテゴリーを登録する際に、親のカテゴリーを指定してやります。

デフォルトの状態

デフォルトの状態は、このようになります。

親カテゴリーの「カテゴリー1」に、2つの子カテゴリー「1-1」、「1-2」がぶら下がっていますが、字下げされない。。

STINGER5 サイドバー カテゴリー階層

Why Japanese People!!!!
ジサゲサレナイヨォォッ!!!!
ミニクイヨォォッ!!!!

取り乱しました。

適用されているスタイルは、こちらの箇所です。

ul.children {
	padding: 0px;
}

こちらは、コメント設定のスタイルで、コメントに対して返信したものに「children」属性が付くようですね。

同様に、カテゴリー階層の子カテゴリーにも「children」属性が付くので、このスタイルが適用されてしまいます。

スタイルのカスタマイズ

では、スタイルを追加してみます。

カスタマイズは、子テーマを作成して行いましょう。

詳細はこちらを参照してください。

WordPressテーマ「STINGER5」で学ぶ子テーマの作成方法

今回は、「style.css」ファイルに、以下のようにスタイルを追加しました。

/*--------------------------------
サイドバー
---------------------------------*/
/* サイドバーの階層(子) */
#side aside ul.children {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
}

上述のコメント箇所のスタイルも一緒に適用されないように、サイドバーの子カテゴリーのみ適用されるようにして、左余白を空けて字下げしています。

1行で「padding-top: 0px 0px 0px 20px;」という書き方もできますよ。

で、その結果がこちら。

STINGER5 サイドバー カテゴリー階層

いい感じで見やすくなりました。

これで、厚切りジェイソン氏も納得です。

このスタイルの追加で、「親」、「子」、「孫」とカテゴリー階層を追加したとしても、1段づつ字下げになって見やすいと思います。

ただし、カテゴリーはあまり深くなりすぎるのは良くなくて、2層ぐらいまでかなと個人的に思います。

カテゴリーが3層4層とかになってくる場合ですと、カテゴリー全体を一度見直したほうが良いかもしれませんね。

スポンサーリンク
スポンサーリンク
WordPress
えふめん

業務系SE・社内SEの仕事を通じて学んだことや調べたことを書いています。

えふめんをフォローする
\よかったらシェアしてね/
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
俺の開発研究所

コメント

  1. カテゴリーやタグの変更が効率よくなる! プラグイン利用でのWordpressブログカスタマイズ! | リンごろボックス より:

    […] […]

  2. 百万 より:

    まさにこの問題で検索してこちらの記事にたどり着きました。
    私の中の荒ぶる厚切りジェイソン氏もご満悦です!
    ありがとうございました。

  3. […] WordPressテーマ「STINGER5」のサイドバーのカテゴリー階層を見やすくするカスタマイズ […]

タイトルとURLをコピーしました