Luxeritas の Footer に横並びのメニューを作ってみる

公開日2018年9月13日更新日

WordPress Luxeritas Theme でフッターにプライバシーポリシーページやお問い合わせページのナビゲーションメニューを配置しようと思うも苦戦する。
Luxeritas にはテーマでメニューを配置出来る箇所は「ヘッダーナビ(グローバルナビ)」と「ヘッダーの上の帯状メニュー」の2箇所なんですね。
ウィジェットにはフッター左・中央・右と3箇所あるので、そこにメニュー入れれば簡単に出来るけど、やりたいのはそれじゃ無い。
フッターに横一列にセンタリングしてメニューを置きたいんです。

フッターエリアの結合

まずはフッター3箇所に分かれてるのを1つに結合します。
「Luxeritas」→「カスタマイズ (外観)」→「ヘッダー / フッター」でフッターウィジェットエリア表示数のボックスで「横1列(中央)」を選択。
ウィジェット画面へ行き、「フッター中央 (タイトル H4)」に カスタム HTML をセットする。
フッターエリアを結合した場合はこの中央エリアを使う様ですね。

フッターメニューの作成

フッターエリアにはデフォルトで Luxeritas の CSS

#foot-in ul li{list-style-type:none;line-height:1.8;margin:0 10px;padding:0}
#foot-in ul li li{margin-left:15px}

が当てられているので、これを有難く利用させてもらう事に。


 <ul class="footer-navi">
  <li>メニュー1</li>
  <li>メニュー2</li>
  <li>メニュー3</li>
 </ul>

こんな感じでリストを書いて行きます。class名はお好みで。

子テーマの編集

このままだと縦にリストが並んでしまうので、「Luxeritas」→「子テーマの編集」で CSS を書き加えて整形します。

.footer-navi{display:flex;justify-content:center;flex-wrap:wrap;}

display:flex; でリストを横並びにして
justify-content:center; でセンタリングしています。
flex-wrap:wrap; でスマホで見た時等にメニューが画面幅一杯になると下段に折り返す様にしてメニューの追加にも対応します。

とりあえず作ってて一番感じた事。
プライバシーポリシーさん、あなたは何故に10文字も使うのですか。おかげでレイアウトがとても大変です。
何か問題や、もっと良い方法があればご指摘お待ちしています。
そして、プライバシーポリシーさん、さっきはあんな事言ってごめんなさい。