2WordPressテーマのフッターエリアに、親子関係を含めた全てのカテゴリーを出力し、CSSでデザインをきれいに整える方法について解説します。WordPressでブログやサイトを運営していると、カテゴリーがどんどん増えてきて、視認性やユーザビリティが悪くなることがあります。サイドバーにカテゴリー一覧を表示させることもできますが、カテゴリーが増えてくると、縦に長くなってしまい、目的のカテゴリーにたどり着きにくくなってしまいます。最近ではシングルカラムのレイアウトも多いので、カテゴリーの一覧をフッターに設置する場面も多くなっているのではないでしょうか。CSSでデザインを整えるfooter.phpに全てのカテゴリーリストを表示させるコードを書くという方法もありますが、ここではウィジェットを使用することにしました。理由としては、管理が楽そうだということと、デフォルトで親子カテゴリーを全て取得してくれるので、書くコードが少なくて済むという点です。footer.phpにウィジェットエリアを追加して、CSSを整えるだけなので、簡単にカテゴリー一覧を表示させる事ができます。footer.phpにウィジェットを設置するまずは、フッターエリアに新たにウィジェットを作ります。Sidebarという記述を追加し、フッター用のウィジェットを有効にします。Sidebarという記述を追加し、functions.phpで有効にしたウィジェットを、フッターエリアで表示されるようにします。Category』というエリアが追加されていると思います。ここに、カテゴリーの項目をドラッグすれば、フッターエリアにカテゴリー一覧が表示されます。ここで『階層を表示』という項目にチェックを入れると、カテゴリーの親子関係が階層で表示されます。ここでは階層表示にチェックを入れた状態で、保存を押します。CSSで出力されるカテゴリーリストのデザインを整える無事にフッターエリアにカテゴリーの一覧が表示されましたが、デフォルトでは、このように縦長にカテゴリーの一覧が並んでしまいます。カテゴリーが増えれば増えるほど、縦に長くなっていくので、視認性が悪くなってしまいます。そこで、CSSで見やすくデザインすることにします。ウィジェットのカテゴリーで出力されるHTMLを確認するWordPressのウィジェットにカテゴリーをドラッグすると、上記のようなHTMLが出力されるようになっています。カテゴリー全体が<li></li>で囲まれ、さらにカテゴリーごとに<li></li>で出力されています。子要素は、さらにその下にリストスタイルで出力されるので、入子構造が少し複雑になっています。ここでしっかりとHTMLを読み込み込み、CSSを考えることにします。Boxを使って親のグループを横並びにする最終的なデザインは、上の画像のようになりました。BoxというCSSのプロパティを使うと、少ないCSSでカテゴリーのリストを簡単に横並びにすることができます。レスポンシブ対応なので、横幅を縮小すると、カテゴリーリストも自動でカラム数が変化します。カテゴリー同士の間隔も自動で調整してくれるので、とても便利で簡単です。実際に書いたCSSは、下記のようになっています。Boxは、親要素に記述すると、その子要素が全て横並びになるプロパティです。そのため、一番上の要素に書くと、子カテゴリーまで横並びになってしまいます。そこで、子カテゴリーの要素には、flex-directionで縦に並ぶように記述しています。Boxのレイアウトは本当に自由度が高いと感じました。フッターにカテゴリー一覧を出力したまとめWordPressのウィジェット機能を使って、フッターエリアにカテゴリーリストを出力する方法を試してみました。これでどれだけカテゴリーが増えても、どんどん横並びに追加されていくので、縦長のカテゴリーリストと比較して見やすくなったのではないかと思います。親子関係もしっかりと分かるので、どこにどのカテゴリーがあるか一目瞭然です。Boxを使用することで、簡単に実装することができました。フッターエリアのメニューだけでなく、他のエリアにも応用できるかもしれません。WordPressのフッターに全てのカテゴリーの表示を検討しているという方は、参考にしてみて下さい。MoreWordPressのカテゴリートップに固定ページの内容を表示させる方法WordPressのカテゴリーを指定して生成されるパーマリンクとパンくずリストBoostrap4を使ってレスポンシブなWordPressテーマを作成Boostrap4でパンくずリストの段落を落とさずに綺麗に表示する方法About30代。妻と3人の子供と暮らしています。下の子供は男の子と女の子の二卵性双生児です。シンプルに生きていきたいと願いながら、情報を集めすぎる毎日。Wordpressサイトの制作を趣味でやっています。良いデザインのものや、生活の質を良くするものが好きです。