【初心者向け】Wordpressテーマを自作する［footer.php］

:::note info
ファイルの構造や解説等、Wordpress（以下、WP）のテーマを自作する際の基本的な部分は、こちらの記事で紹介しています。
+ [【初心者向け】Wordpressテーマを自作する際に分かってると良いかもしれない事](
https://qiita.com/makkie/items/dc764c2845492079c0af)
+ `index.php`のコードを知りたいよって方はこちら
[【初心者向け】Wordpressテーマを自作する[index.php]](https://qiita.com/makkie/items/b5231a9f63b076c70af8)
+ `header.php`のコードを知りたいよって方はこちら
[【初心者向け】Wordpressテーマを自作する[header.php]](https://qiita.com/makkie/items/6d19ec0da990486ec6ab)
:::

ここでは、WPのテーマを作る上で必須の`footer.php`のコードを交えた解説を行います。
とりあえず解説はいいからコードだけ、の方は以下をどうぞ。

## コード（HTMLとPHP）
ファイルの先頭には、テーマカスタマイザーからもわかるように`Template Name: Footer`を入れています。
```diff_php
<?php
//====================================================
//  Template Name: Footer
//====================================================
?>
            <footer>
                <div class="foot-flex">
                    <nav id="nav-foot">
                        <?php
                        //囲みdiv、ul等全て削除
                        $menuParametersf = array(
                            'container' => false,
                            'echo' => false,
                            'theme_location' => 'nav-foot', //オプション：表示したいメニューの名称
                            'items_wrap' => '%3$s',
                            'depth' => 0,
                        );
                        echo strip_tags(wp_nav_menu( $menuParametersf ), '<a>' );
                        ?>
                    </nav>
                    <ul id="foot-widget-area">
                        <?php dynamic_sidebar('footbar');?>
                    </ul>
                </div><!--//class="foot-flex"-->
<p>
<?php
//なんのテンプレート使ってる？
global $template;
$template_name = basename($template, '.php');
?>
ここで使用しているテンプレートは「<?php echo $template_name; ?>」です
</p>
                <span id="copy">&copy; 2022 <?php bloginfo('name'); ?></span>
            </footer>
        </div><!--//class="wrap"-->
<?php wp_footer(); ?>
    </body>
</html>
```
## 解説
### footer.phpとは
WPのテーマを自作する際の**必須ファイル**です。
Webサイトの「フッター」と呼ばれる下段部分のコンテンツを表示するファイルです。
詳しい説明はCodexをご覧ください。ただし、翻訳の関係なのかわかりにくい表現の日本語があります。
また日本語版は、最新の情報が掲載されていない事が多々ありますので、英語版も合わせてみると良いです。

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4

テーマフォルダの中に`index.php` `header.php` `footer.php` `sidebar.php` があればとりあえずのテーマができます。

### 必須なコード
`wp_footer();`を`/body`の手前に入れないと正常に読み込まれません。
忘れずに入れましょう。

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_footer

ファイルの最後で`/body` `/html`を書くのを忘れずに。
```diff_php
<?php wp_footer(); ?>
    </body>
</html>
```

### bodyタグの中
#### カスタムナビゲーション
これは`header.php`とほぼ同じです。
[【初心者向け】Wordpressテーマを自作する[header.php]](https://qiita.com/makkie/items/6d19ec0da990486ec6ab)
※カスタムナビゲーションは標準だと`wp_nav_menu();`で表示しますが、それだと`ul` `li`で囲まれてしまうので、`strip_tags`で付与されないようにしています。`ul` `li`が欲しい方は、上記コードを削除し`wp_nav_menu();`でカスタムナビゲーションを表示してください。

`functions.php`でカスタムナビゲーションを複数設置する様にしていますので、フッター専用のナビです。
```diff_php
                    <nav id="nav-foot">
                        <?php
                        //囲みdiv、ul等全て削除
                        $menuParametersf = array(
                            'container' => false,
                            'echo' => false,
                            'theme_location' => 'nav-foot', //オプション：表示したいメニューの名称
                            'items_wrap' => '%3$s',
                            'depth' => 0,
                        );
                        echo strip_tags(wp_nav_menu( $menuParametersf ), '<a>' );
                        ?>
                    </nav>
```
`header.php`と共通（同じ）でいい場合は、下記コードの`'nav-foot' => 'フッターナビ'`部分を削除してください。
```functions.php
//++++++++++++++++++++++++++++++++++++++++++
//ナビゲーション
//++++++++++++++++++++++++++++++++++++++++++
function register_my_menus() {
  register_nav_menus( array(
    'nav-head' => 'ヘッダーナビ',
    'nav-foot' => 'フッターナビ'
  ));
}
add_action( 'after_setup_theme', 'register_my_menus' );
```
カスタムナビゲーションに自動で`id`や`class`が付与され、デザインを適用するのも煩雑になってしまうため、下記コードで`id`や`class`を削除しています。
CSSを適用する時は、`wp_nav_menu();`を`nav`で囲んでCSSを適用してください。
```functions.php
//カスタムメニューで自動挿入されるタグ（id + class）を削除
function my_nav_menu_id($menu_id){
	$id = NULL;
    return $id;
}
add_filter('nav_menu_item_id', 'my_nav_menu_id');

function remove_menu_aria_current( $atts, $item, $args ){
	unset ( $atts['aria-current'] );
	return $atts;
}
add_filter('nav_menu_link_attributes', 'remove_menu_aria_current', 11, 5);
```
#### あると幸せになれるかもしれないコード
カスタム投稿等、テーマファイルが増えた時に、きちんと条件分岐で該当のファイルで表示されているかを確認するために`footer.php`にこのコードを入れておくと便利です。本番環境でうっかり見えてしまうのを防ぐために`<!-- -->`で囲って、デベロッパーツールで確認するのがいいかも。
```diff_php 
<p>
<?php
//なんのテンプレート使ってる？
global $template;
$template_name = basename($template, '.php');
?>
ここで使用しているテンプレートは「<?php echo $template_name; ?>」です
</p>
```
#### AllrightReservedはもう古い？！
ちょっと小耳にはさんだのですが、今まで当たり前にWebサイトの一番下に入れていた`AllrightReserved.`がどうやら`&copy;`が入っていれば入れる必要がないと知り、さらに、毎年「年」を更新しなきゃないと`&copy;`の後ろに`echo date('Y');`を入れていたのですが、これも不要とのことでこんなにシンプルになってます。
`&copy;`の後ろには、なんとなく寂しいので新規でサイトを立ち上げた「年」を直接入れています。入れなくても問題ないです。
一番シンプルなのは`&copy; <?php bloginfo('name'); ?>`で良いみたいです。
' bloginfo('name');'はサイト名が入るので、サイト名と運営会社名が違う場合は注意が必要です。
```diff_php
<span id="copy">&copy; 2022 <?php bloginfo('name'); ?></span>
```
## まとめ
他のファイルと比べても`footer.php`はコードも少なめですが、jQuery等を設置する場合だと、`/body`の直前にコードを書かなくてはいけないので、もっと多くなります。


10年以上WPでWEBサイト制作をしていますが、独学のため、色々間違えている個所などありましたらご指摘いただけますと幸いです。