Webサイトを開発してみる（入門編）ー第4章1.4 ー

TomWorks

2024年5月10日 17:00

ー第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クラスです。

14：<?php wp_footer(); ?>
wp_footer() はwp_header()と同様にWordPressのテーマを自作するために必須となる関数です。通常 </body>タグの直前に記載します。プラグインやテーマで用意されている特にjavascriptのコードを出力します。

17：</html>
header.phpでhtml宣言した <html>に対して、その締めとなる</html>をこのfooter.phpの最終行にて記載します。

この記事が気に入ったらサポートをしてみませんか？