WPlogs

WordPressを中心にWeb関連の情報発信。PHP、CakePHP、HTML5、SEOなど。 ※旧名称「SEO人」、旧URL「http://seo.net-luck.com/」

*

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

   

STINGER5

出典:http://wp-fun.com/

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

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

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

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

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

  • stinger5ver20150505b

スポンサード リンク

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

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

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

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

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

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

デフォルトの状態

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

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

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

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

取り乱しました。

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

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

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

スタイルのカスタマイズ

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

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

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

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

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

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

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

で、その結果がこちら。

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

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

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

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

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

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

 - HTML/CSS, STINGER5