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

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

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

＝ 2020/5/6　追記 ＝

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

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

参考：　関数リファレンス 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を使ってリスト形式でメニューを作ります。

<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です。

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

タイトル属性

アイコンフォントのみだとわかりにくいものもあるので、タイトル属性を記述しておくと以下のように、カーソルが載った際に文字が出ます。

<a href="URL" title="privacy-policy">

ちなみにおうちマークは以下です。

<i class="fas fa-home"> </i>

以上です！