こんにちは朱夏です。
今回もWordPressの自作テーマ進めていきたいと思います。
前回は、ヘッダーのナビゲーションバーを作成していきました。
今回はフッター部分をWordPress化していきます。
勉強させていただく動画はこちら。
フッターのリンク部分を、ポートフォリオリンクにしていきます。
コード
コードはこんな感じになりました。
<!-- テキストリンク -->
<div class="col-lg-4 p-5 border-secondary border-right border-left">
<h4 class="font-weight-bolder text-center text-light border-bottom">Portfolio</h4>
<div class="py-3">
<?php
$defaults = array(
'menu_class' => 'list-unstyled',
'container' => false,
'link_before' => '<span class="text-light">',
'link_after' => '</span>',
'theme_location' => 'footer-navigation',
);
wp_nav_menu( $defaults );
?>
</div>
</div>
<!-- テキストリンク END -->
前回、ナビゲーションバーを作った時とやることはほぼ一緒ですね。
おさらいも兼ねてみていきます。
‘menu_class’でリンクにclassを付与しています。
ポートフォリオの欄では、リストのスタイルを消すために’list-unstyled’を指定しています。
リンクの文字色を経こうするために、’link_befoer’に<span>、’link_after’に</span>を付与する様に書きました。
そして<span>タグに文字色を白くするclassを指定しています。
そして、次は管理画面からの操作になります。
手順は以下の通りです。
-
- 外観＞メニューを表示
- 「新しいメニューを作成しましょう。」リンクを押下
- 「メニュー名」を入力
- 「メニューを作成」を押下
- メニュー項目を追加＞カスタムリンクを表示
- URLとリンク文字列を入力し、「メニューに追加」を押下
- メニュー設定＞メニューの位置＞フッターにチェック
- 「メニューを保存」を押下
簡単に操作順に番号を振ってみました。
今回は、カスタムリンクで、このブログのトップページのURLを入力して作りました。
実行結果
結果を表示するとこのような感じになりました。
Portfolioにリンクが表示されて、指定したブログを開く事が出来るようになりました。
あとがき
というわけで、フッターにポートフォリオのリンクを作成しました。
ナビゲーションとほぼ同じ作業だったため、繰り返しでいい練習になったかと思います。
今回は以上になります。
次回もよろしくお願いします。
