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

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

フッターエリアの結合

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

フッターメニューの作成

セットしたカスタム HTML ウィジェットにコードを記述します。

 <ul class="footer-navi">
  <li>メニュー１</li>
  <li>メニュー２</li>
  <li>メニュー３</li>
 </ul>

こんな感じでリストを書いて行きます。class名はお好みで。CSS で利用します。
メニューは例えばプライバシーポリシーページなら
<a href="https://example.com/privacy-policy/">プライバシーポリシー</a>
アドレスは自身のサイトのアドレスに置き換えて下さい。

子テーマの編集

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

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

が当てられているので、これを利用して更に CSS を書き加えます。

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

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

Luxeritas 3.8.2 で追加されたフッターナビの機能と併せる事で、フッターメニューを2段にしたり、フッターを分割しながら横並びのメニューも作れる様になったので、そちらも確認して下さい。