0から始めるWordPress自作テーマ作成【footer.php作成編】

更新日:2021年10月8日 /  投稿日:2020年08月27日

0から始めるWordPress自作テーマ作成【footer.php作成編】

前回では、WordPressの自作テーマ作成でheader.phpの作成方法をご紹介いたしました。
今回はWordPressの自作テーマ作成の続きになる、footer.phpの作成方法をご紹介いたします。

前回のおさらい

前回のheader.phpの作成方法ではTOPページにあたるindex.phpからヘッダー部分にあたるコードを切り取り、新規作成したファイルにヘッダーのコードを貼り付けてheader.phpを作成しました。

今回はheader.phpと同じように上記の画像の赤枠のfooter.phpにあたる部分を作成していきます。

header.phpの詳しい作成方法はこちら

footer.php作成の手順

ではさっそく、前回同様footer.phpの作成を順を追ってご紹介していきます。

TOPページを以下の図のように各パーツへ切り分け

上の画像の赤枠でfooter.phpにあたる箇所のコードを、index.phpから切り取ります。

次に、新たに新規作成したファイルに、先程切り取ったフッターにあたるコードを貼り付け、名前を「footer.php」にして保存をします。

ここまでで、現在index.phpとfooter.phpのファイルの中身は以下のようになっているかと思います。

index.phpの中身

<main>
<!--
中身はここでは割愛いたします。
ここにはメインコンテンツにあたるコードが入っている状態です。
-->
</main>

footer.phpの中身

<footer>
<!--
中身はここでは割愛いたします。
ここにはフッターにあたるコードが入っている状態です。
-->
</footer>

以上で、footr.phpの作成は完了です。作業内容は前回ご紹介したheader.phpと同じく、コピペで済む作業ですので難しくはないと思いますが、いかがでしょうか。

3つのファイルでTOPページを表示させます。

ここからは、また次回以降にご紹介をするのですが、現在TOPページを作成したHTMLファイルが、index.php(TOPページのメインコンテンツが入っているファイル)、header.php(ヘッダーのコードが入っているファイル)、footer.php(フッターのコードが入っているファイル)と3つのファイルに別れている状態となっているかと思います。

WordPressではこの3つのファイルを、簡単に説明するとタグによって連結し、TOPページを表示をさせています。

次回は、基本になるテンプレートタグについてご紹介をしていきたいと思います。
徐々にではありますが、ゆっくりとWordPressの独自テーマ作成についてご紹介をしていきますので、お楽しみに。

この記事を書いた人

KNOWLEDGE BASEの中の人

KNOWLEDGE BASEの中の人

2013年よりWEB制作会社に入社し、デザイン・コーディングからディレクションと幅広く従事。

その他の関連記事はこちら