簡単！Luxeritasルクセリタスにフッターメニューを作る

ルクセリタスに用意されているメニューは

グローバルナビバーとヘッダー上の帯状メニューの２つで、フッターにはありません。

＝ 2020/5/6　追記＝

Ver.3.8.2～機能追加されました。

詳細は以下をご覧ください。

ルクセリタスでフッターにナビメニューを設置する

ルクセリタスにはフッターメニューが無かったのですが、 Ver.3.8.2～機能追加されました。以前のバージョンでもフッターウィジェット（左・中央・右）エリアを利用すれば可能。今回はその新機能の設定サンプルです。メニュー作成まずフッタ...

この記事は、
フッターにメニューが無かった（Ver.3.8.1まで）際のフッターウィジェットを使ったメニュー作成方法になります。

今回はフッターメニューエリアを追加する方法ではありませんが、メニュー自体を追加する場合は、以下の関数で可能です。

参考：　関数リファレンス register_nav_menu

【例】以下のコードをfunction.phpに追記すればメニューエリアが追加されます。

<?php
// カスタムメニューの設定
register_nav_menu( 'footer_navi', 'フッターナビ' );
?>

※更に、作成したメニューを出力するコードが必要です。

話が逸れましたが、今回はフッターエリアにデザインを少し施したリンクを表示する方法になります。

普通にフッターのコピーライトの上に出せるウィジェットは３つもあるので、それを使う事もできます。

シンプルでスマホでも見やすくしたい！

‥という事で、以下のようにしてみました。

フッターサンプル

横一列のメニューのように表示
- フッターウィジェットエリアを１つにする
カスタマイズ不要なメニュー
デザインカスタマイズを使ったメニュー

横一列のメニューのように表示

フッターウィジェットエリアを１つにする

　「外観」→「カスタマイズ」

メニュー画面

　「ヘッダー／フッター」

メニュー画面

　「ウィジェットエリア表示数」を「横１列（中央）」にします。

フッターウィジェットエリア表示数

これで、３つに分かれているエリアが１つに結合され、横幅いっぱい使えます。

カスタマイズ不要なメニュー

このまま、フッター中央ウィジェットエリアに改行をせずにリンクを羅列するだけでもメニューらしきリンクは出来ます！

<center><a href="URL">メニュー１</a> ｜ <a href="URL">メニュー２</a> ｜ <a href="URL">メニュー３</a></center>

フッターサンプル

これだけでも十分な気がしますが、興味のある方はこの先へお進み下さい。

デザインカスタマイズを使ったメニュー

フッター中央にメニューに入れたいリンクを作る

メニュー画面

カスタムHTMLを使ってリスト形式でメニューを作ります。

　あとでスタイルを編集するので、任意のクラス名をつけておきます。
（例：footer-menu）

<ul class="footer-menu"> /*任意のクラス名をつける*/
<li><a href="URL">メニュー１</a></li>
<li><a href="URL">メニュー２</a></li>
<li><a href="URL">メニュー３</a></li>
<li><a href="URL">メニュー４</a></li>
<li><a href="URL">メニュー５</a></li>
</ul>

このままだと左端に出力され、更にリストが縦に並ぶのでCSSで調整します。

フッターメニュー途中経過

スタイルシートに追記

横並びにし、中央に表示し、装飾する為、子テーマのスタイルシートにCSSを追記します。

メニュー画面

「Luxeritas」→「子テーマの編集」で「スタイルシート」を選択します。（Ver.3.7.9以前は「style.cssタブ」）

/*フッターメニュー設定*/
.footer-menu{
display:flex; /*横並びに*/
justify-content:center; /*中央に出す*/
flex-wrap:wrap; /*スマホなどであふれたら改行*/
padding: 5px; /*余白*/
margin: 0;
font-size: 18px; /*文字サイズ*/
border-top:solid 1px #9d9d9d; /*上に線を入れる・色指定*/
border-bottom:solid 1px #9d9d9d; /*下に線を入れる・色指定*/
}

　結果

フッターメニュー

メニューバーのように背景色をつけたい場合

background: #;

スマホでも見やすく改良

長々と出るとスマホでは改行されて見にくいので、アイコンフォントを使ってシンプルに出してみました。

ルクセリタスでのアイコンフォントの利用方法は以下をご覧ください。

ルクセリタスでアイコンフォントを使う

<ul class="footer-menu">
<li><a href="URL" target="_blank" title="Twitter" rel="nofollow noopener">&nbsp;<i class="fab fa-twitter"></i>&nbsp;</a></li>
<li><a href="URL" target="_blank" title="Facebook" rel="nofollow noopener">&nbsp;<i class="fab fa-facebook-f"></i>&nbsp;</a></li>
</ul>

１項目目はツイッター、２項目目はFacebookです。

※プライバシーポリシーのアイコンは、決まったものがないので、サンプルコードには記載していません。

　スマホでの見え方