Webサイトを開発してみる（入門編）ー第4章1.4 ー
第4章 1.4 ② footer.php のソースコードと詳細
1.4 ② footer.php のソースコードと解説
解説） footer.php は表示されるサイト画面下部で共有に使用されるプログラムです。ここでは画面上部と同じメニューとCopyrightの表示を行います。
下図の赤線で囲んだ部分（フッター部）を表示します。
以下が今回のプログラムソースです。
<div class="text-center p-3 navbar-dark bg-info bg-opacity-25">
<div>
<?php wp_nav_menu(array(
'theme_location' => 'main-menu',
'container' => 'nav',
'container_class' => 'navbar-nav mx-auto',
'menu_class' => 'row tom-menu h2',
));
?>
</div>
<div class="h6 text-center">Copyright © Tom Works All Rights Reserved</div>
</div>
<?php wp_footer(); ?>
</body>
</html>解説
主なプログラムソースを解説します。
3/9：
3 <?php wp_nav_menu(array(
4 ‘theme_location’ => ‘main-menu’,
5 ‘container’ => ‘nav’,
6 ‘container_class’ => ‘navbar-nav mx-auto’,
7 ‘menu_class’ => ‘row tom-menu h2’,
8 ));
9 ?>
3 wp_nav_menu()：
ナビゲーションメニューをカスタマイズし表示する関数です。（第4章1.3と同じ：ヘッダーで表示しているメニューと同じものをフッターでも表示します。）
4 ‘theme_location’ => ‘main-menu’：
メニューの表示位置を定義します。（functions.phpにてregister_nav_menus(array(‘main-menu’ => ‘tom-header-menu’,
と定義しておりWordPressの管理画面の「外観」>「メニュー」欄にてtom-header-menuに紐づけされたメニューを表示します。）
*メニューの設定方法は第5章の4で解説します。
5 ‘container’ => ‘nav’：
メニューのul要素を囲むタグ（nav）を指定します。
6 ‘container_class’ => ‘navbar-nav mx-auto’：
上記のcontainerで指定したタグ（nav）のクラスを定義します。navbar-nav、mx-auto もBootstrapのCSSクラスです。
7 ‘menu_class’ => ‘row tom-menu h2’：
メニューのul要素に指定するクラスを定義します。row は通常のcssのクラス、tom-menu はcssのカスタムクラスでtom-custom.css内で定義しています。h2 はBootstrapのCSSクラスです。
11：<div class=”h6 text-center“>Copyright © Tom Works All Rights Reserved</div>
Copyrightの表示をします。h6とtext-centerはBoostrapのCSSクラスです。
14：<?php wp_footer(); ?>
wp_footer() はwp_header()と同様にWordPressのテーマを自作するために必須となる関数です。通常 </body>タグの直前に記載します。プラグインやテーマで用意されている特にjavascriptのコードを出力します。
17：</html>
header.phpでhtml宣言した <html>に対して、その締めとなる</html>をこのfooter.phpの最終行にて記載します。
いいなと思ったら応援しよう！
