ファイルの構造や解説等、Wordpress(以下、WP)のテーマを自作する際の基本的な部分は、こちらの記事で紹介しています。
- 【初心者向け】Wordpressテーマを自作する際に分かってると良いかもしれない事
-
index.php
のコードを知りたいよって方はこちら
【初心者向け】Wordpressテーマを自作する[index.php] -
header.php
のコードを知りたいよって方はこちら
【初心者向け】Wordpressテーマを自作する[header.php]
ここでは、WPのテーマを作る上で必須のfooter.php
のコードを交えた解説を行います。
とりあえず解説はいいからコードだけ、の方は以下をどうぞ。
コード(HTMLとPHP)
ファイルの先頭には、テーマカスタマイザーからもわかるようにTemplate Name: Footer
を入れています。
<?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">© 2022 <?php bloginfo('name'); ?></span>
</footer>
</div><!--//class="wrap"-->
<?php wp_footer(); ?>
</body>
</html>
解説
footer.phpとは
WPのテーマを自作する際の必須ファイルです。
Webサイトの「フッター」と呼ばれる下段部分のコンテンツを表示するファイルです。
詳しい説明はCodexをご覧ください。ただし、翻訳の関係なのかわかりにくい表現の日本語があります。
また日本語版は、最新の情報が掲載されていない事が多々ありますので、英語版も合わせてみると良いです。
テーマフォルダの中にindex.php
header.php
footer.php
sidebar.php
があればとりあえずのテーマができます。
必須なコード
wp_footer();
を/body
の手前に入れないと正常に読み込まれません。
忘れずに入れましょう。
ファイルの最後で/body
/html
を書くのを忘れずに。
<?php wp_footer(); ?>
</body>
</html>
bodyタグの中
カスタムナビゲーション
これはheader.php
とほぼ同じです。
【初心者向け】Wordpressテーマを自作する[header.php]
※カスタムナビゲーションは標準だとwp_nav_menu();
で表示しますが、それだとul
li
で囲まれてしまうので、strip_tags
で付与されないようにしています。ul
li
が欲しい方は、上記コードを削除しwp_nav_menu();
でカスタムナビゲーションを表示してください。
functions.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' => 'フッターナビ'
部分を削除してください。
//++++++++++++++++++++++++++++++++++++++++++
//ナビゲーション
//++++++++++++++++++++++++++++++++++++++++++
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を適用してください。
//カスタムメニューで自動挿入されるタグ(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
にこのコードを入れておくと便利です。本番環境でうっかり見えてしまうのを防ぐために<!-- -->
で囲って、デベロッパーツールで確認するのがいいかも。
<p>
<?php
//なんのテンプレート使ってる?
global $template;
$template_name = basename($template, '.php');
?>
ここで使用しているテンプレートは「<?php echo $template_name; ?>」です
</p>
AllrightReservedはもう古い?!
ちょっと小耳にはさんだのですが、今まで当たり前にWebサイトの一番下に入れていたAllrightReserved.
がどうやら©
が入っていれば入れる必要がないと知り、さらに、毎年「年」を更新しなきゃないと©
の後ろにecho date('Y');
を入れていたのですが、これも不要とのことでこんなにシンプルになってます。
©
の後ろには、なんとなく寂しいので新規でサイトを立ち上げた「年」を直接入れています。入れなくても問題ないです。
一番シンプルなのは© <?php bloginfo('name'); ?>
で良いみたいです。
' bloginfo('name');'はサイト名が入るので、サイト名と運営会社名が違う場合は注意が必要です。
<span id="copy">© 2022 <?php bloginfo('name'); ?></span>
まとめ
他のファイルと比べてもfooter.php
はコードも少なめですが、jQuery等を設置する場合だと、/body
の直前にコードを書かなくてはいけないので、もっと多くなります。
10年以上WPでWEBサイト制作をしていますが、独学のため、色々間違えている個所などありましたらご指摘いただけますと幸いです。