LoginSignup
2
2

More than 1 year has passed since last update.

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

Posted at

ファイルの構造や解説等、Wordpress(以下、WP)のテーマを自作する際の基本的な部分は、こちらの記事で紹介しています。

ここでは、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">&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' => 'フッターナビ'部分を削除してください。

functions.php
//++++++++++++++++++++++++++++++++++++++++++
//ナビゲーション
//++++++++++++++++++++++++++++++++++++++++++
function register_my_menus() {
  register_nav_menus( array(
    'nav-head' => 'ヘッダーナビ',
    'nav-foot' => 'フッターナビ'
  ));
}
add_action( 'after_setup_theme', 'register_my_menus' );

カスタムナビゲーションに自動でidclassが付与され、デザインを適用するのも煩雑になってしまうため、下記コードでidclassを削除しています。
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にこのコードを入れておくと便利です。本番環境でうっかり見えてしまうのを防ぐために<!-- -->で囲って、デベロッパーツールで確認するのがいいかも。

<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');'はサイト名が入るので、サイト名と運営会社名が違う場合は注意が必要です。

<span id="copy">&copy; 2022 <?php bloginfo('name'); ?></span>

まとめ

他のファイルと比べてもfooter.phpはコードも少なめですが、jQuery等を設置する場合だと、/bodyの直前にコードを書かなくてはいけないので、もっと多くなります。

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

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2