WordPressのフッターにカテゴリー一覧を表示させる方法

2018/2/15

B! 2

WordPressテーマのフッターエリアに、親子関係を含めた全てのカテゴリーを出力し、CSSでデザインをきれいに整える方法について解説します。

WordPressでブログやサイトを運営していると、カテゴリーがどんどん増えてきて、視認性やユーザビリティが悪くなることがあります。

サイドバーにカテゴリー一覧を表示させることもできますが、カテゴリーが増えてくると、縦に長くなってしまい、目的のカテゴリーにたどり着きにくくなってしまいます。

また、最近ではシングルカラムのレイアウトも多いので、カテゴリーの一覧をフッターに設置する場面も多くなっているのではないでしょうか。

フッターにカテゴリーを表示させる手順

1. footer.phpにウィジェットを追加する
2. ウィジェットにカテゴリーを追加する
3. CSSでデザインを整える

footer.phpに全てのカテゴリーリストを表示させるコードを書くという方法もありますが、ここではウィジェットを使用することにしました。

理由としては、管理が楽そうだということと、デフォルトで親子カテゴリーを全て取得してくれるので、書くコードが少なくて済むという点です。

footer.phpにウィジェットエリアを追加して、CSSを整えるだけなので、簡単にカテゴリー一覧を表示させる事ができます。

footer.phpにウィジェットを設置する

まずは、フッターエリアに新たにウィジェットを作ります。

ウィジェットを機能させるためには、functions.phpにRegister Sidebarという記述を追加し、フッター用のウィジェットを有効にします。

次に、有効にしたウィジェット機能を、フッターエリアに表示するために、Dynamic Sidebarという記述を追加し、functions.phpで有効にしたウィジェットを、フッターエリアで表示されるようにします。

ウィジェットにカテゴリーの項目を追加する

上記のコードが正しく反映されれば、ウィジェットに新たに『Footer Category』というエリアが追加されていると思います。

ここに、カテゴリーの項目をドラッグすれば、フッターエリアにカテゴリー一覧が表示されます。

ここで『階層を表示』という項目にチェックを入れると、カテゴリーの親子関係が階層で表示されます。

ここでは階層表示にチェックを入れた状態で、保存を押します。

CSSで出力されるカテゴリーリストのデザインを整える

無事にフッターエリアにカテゴリーの一覧が表示されましたが、デフォルトでは、このように縦長にカテゴリーの一覧が並んでしまいます。

カテゴリーが増えれば増えるほど、縦に長くなっていくので、視認性が悪くなってしまいます。

そこで、CSSで見やすくデザインすることにします。

ウィジェットのカテゴリーで出力されるHTMLを確認する

WordPressのウィジェットにカテゴリーをドラッグすると、上記のようなHTMLが出力されるようになっています。

カテゴリー全体が<li></li>で囲まれ、さらにカテゴリーごとに<li></li>で出力されています。

子要素は、さらにその下にリストスタイルで出力されるので、入子構造が少し複雑になっています。

ここでしっかりとHTMLを読み込み込み、CSSを考えることにします。

Flex Boxを使って親のグループを横並びにする

最終的なデザインは、上の画像のようになりました。

Flex BoxというCSSのプロパティを使うと、少ないCSSでカテゴリーのリストを簡単に横並びにすることができます。

もちろんレスポンシブ対応なので、横幅を縮小すると、カテゴリーリストも自動でカラム数が変化します。

カテゴリー同士の間隔も自動で調整してくれるので、とても便利で簡単です。

実際に書いたCSSは、下記のようになっています。

Flex Boxは、親要素に記述すると、その子要素が全て横並びになるプロパティです。

そのため、一番上の要素に書くと、子カテゴリーまで横並びになってしまいます。

そこで、子カテゴリーの要素には、flex-directionで縦に並ぶように記述しています。

横並びと縦並びをそれぞれ指定することで、親カテゴリーは横並びに、子カテゴリーは縦並びにという少し変則的な指定方法なのですが、Flex Boxのレイアウトは本当に自由度が高いと感じました。

フッターにカテゴリー一覧を出力したまとめ

WordPressのウィジェット機能を使って、フッターエリアにカテゴリーリストを出力する方法を試してみました。

これでどれだけカテゴリーが増えても、どんどん横並びに追加されていくので、縦長のカテゴリーリストと比較して見やすくなったのではないかと思います。

また、親子関係もしっかりと分かるので、どこにどのカテゴリーがあるか一目瞭然です。

CSSのデザインとしては、よく見る形ですが、Flex Boxを使用することで、簡単に実装することができました。

フッターエリアのメニューだけでなく、他のエリアにも応用できるかもしれません。

WordPressのフッターに全てのカテゴリーの表示を検討しているという方は、参考にしてみて下さい。

Wordpress