【WordPress】フッター用テンプレートファイルの作り方【テーマ自作】

  • PR
  • WordPress
【WordPress】フッター用テンプレートファイルの作り方【テーマ自作】

今回は、WordPressのオリジナルテーマ制作で役立つ『フッター用テンプレートファイル』の作り方を解説してゆきます。



▼この記事のポイント

  • フッター部分のHTMLは、テンプレートファイル 「footer.php」に移設する
  • 各ページで 「get_footer()」関数を使えば、footer.phpの内容が呼び出せる



▼この記事を書いたひと

フリーランスみやしも（@miyashimo_blog）です。プログラミングやWebサイト制作に関するITの情報を幅広くお届けしていきます。

目次

フッター用テンプレートファイルについて

WordPressのテーマでは、ヘッダー・フッターなどのページごとに繰り返し使う同じデザインを『テンプレートファイル』という仕組みを使って共通化することが出来ます。



また、テンプレートファイルの利用には例えば次のようなメリットがあり、ゼロからWordPressテーマを作る上でも欠かす事が出来ない作業となっています。



▼テンプレートファイル利用のメリット

  • 各ページに簡単にヘッダー・フッターが挿入できる
  • コードやデザインなどの管理がしやすくなる
今回は、数あるテンプレートファイルの『フッター（footer.php)』にのみ焦点をあて、その作り方の解説をしてゆきます。

テーマ制作のデザインサンプル

また今回は、次のようなデザインをもとに、テンプレートの作り方について解説を進めてゆきます。

テーマ制作用のデザインサンプル
デザインサンプル
それでは早速作業を始めてゆきましょう！

STEP1. テンプレート「footer.php」を作成する

STEP1. テンプレートファイルを作成する

まずはフッター用に利用する「テンプレートファイル」の作成から行います。

テンプレートファイルの作り方

フッターのテンプレートファイルはWordPressであらかじめ名前が決められており、具体的には次のような名前でファイルを作成する必要があります。

▼テンプレートファイル
/wp-content/themes/＜テーマ名＞/ footer.php

フッター用のテンプレートファイルを作成したら、続けて内容を編集してゆきます。

テンプレートにHTMLを移設する

フッター用のテンプレートファイルには、基本的にはそのテーマで扱うフッター部分のHTMLを書き込んでゆきます。

テーマ内の『index.php』などのファイルから、フッター部分のHTMLのみを『footer.php』に移設させるといったイメージで作業を行えばOKです。
HTML移設のイメージ
HTML移設のイメージ

この際には、フッターとして共通化する部分からファイルの末尾までを対象にして、HTMLを『footer.php』に移設させましょう。



また、基本的にはページ下部で毎ページ必ず表示する様なデザインは全て『footer.php』に含める様にするのが適切な移設となります。とはいえデザインにもよるため、作業時には「どこまでをfooter.phpに含めるか？」を検討してみることも大切です。

作成したテンプレートファイルの使い方について、引き続き解説してゆきます！

STEP2. テンプレート「footer.php」の利用方法

STEP2. 各ページにPHPコードを追加する

フッター用テンプレートファイル利用するために、各ページの編集をしてゆきましょう。

各ページにPHPコードを追加する

フッター用のテンプレートファイルは、WordPressの『get_footer()』関数を各ページのファイルの末尾に追加することで適切に利用できます。



▼PHPコード

<?php get_footer();



たとえば『index.php』なら、次のようにPHPコードを埋め込んでゆけばOKです。

PHPコードの追加イメージ
PHPコードの追加イメージ

またこの際のポイントとして、PHPの終了タグ「?>」は記述しない様にします。



PHPはファイル末尾に全角スペースなどが含まれると誤動作の原因となるため、終了タグを書かないことがこれらの予防になります。このためにも、必要ない限り終了タグは書かないのが慣例となっています。

基本的には上記の要領で、テーマ内で扱うページ全てにPHPコードを埋め込んでゆきましょう。

ブラウザで動作確認をする

PHPコードの埋め込みが終わったら、今度はそのページをブラウザで開き、見た目やHTMLの状態を確認してみましょう。（※HTMLはページのソースを表示させるか、検証ツール等で確認すればOK）



上手くいくと<footer>タグや<html>の終了タグといった、『footer.php』に移設したHTMLが出力されていると思います。

テンプレートファイル埋め込みの確認
テンプレートファイルの動作を確認する

基本的には「get_footer()」関数のPHPコードを埋め込んだ全ページ確認しておくと、間違いがなくて良いと思います。

以上で、フッター用テンプレートファイルの作り方の解説は終わりです。
ここまでの作業、お疲れ様でした！

WordPressテーマ制作のおススメ情報

WordPressのオリジナルテーマ制作で役立つ、おススメ情報を紹介いたします。

おススメ動画：『WordPress開発マスター講座』

WordPress開発マスター講座
Udemy - WordPress開発マスター講座

Udemyでも人気の「WordPress開発マスター講座」は、WordPressの仕組みからサイト制作への活かし方まで、初心者でも分かりやすく学ぶことができる動画教材です。



WordPress開発マスター講座

WordPressのイメージの持ちづらい。。なんて方は、まずは動画から学習するのがおススメです！

おススメ書籍：『WordPressデザインレシピ集』

WordPressデザインレシピ集
WordPressデザインレシピ集

本記事でも解説してきた、WordPressのテーマ実装に関する情報がまとめられた書籍です。目的別にレシピが整理されているので、『あの実装はどうやるんだっけ？』なんて時にこそ確実に役立つ一冊です。


WordPressデザインレシピ集

テーマの実装を進めている、情報をまとめて抑えておきたい方におススメです！

この記事のまとめ

今回は、WordPressのオリジナルテーマ制作で役立つ『フッター用テンプレートファイル』の作り方について、詳しく解説をしてゆきました。



▼この記事のポイント

  • フッター部分のHTMLは、テンプレートファイル 「footer.php」に移設する
  • 各ページで 「get_footer()」関数を使えば、footer.phpの内容が呼び出せる



ヘッダーやフッターなどの繰り返し使う部分を共通化すれば、各ページでの再利用が簡単になるほか、コードやデザインの管理もしやすくなります。



オリジナルテーマを自作する際には、ぜひ参考にして頂きたい情報です。



このほか当ブログではWordPressに関する情報を多数掲載しています。あわせてご活用くださいませ。



▼関連記事を探す

WordPressの記事一覧

今回は以上となります。最後までお読みいただき、ありがとうございました！

関連記事