0から始めるWordPress自作テーマ作成【footer.php作成編】
更新日:2021年10月8日 / 投稿日:2020年08月27日
前回では、WordPressの自作テーマ作成でheader.phpの作成方法をご紹介いたしました。
今回はWordPressの自作テーマ作成の続きになる、footer.phpの作成方法をご紹介いたします。
前回のおさらい
前回のheader.phpの作成方法ではTOPページにあたるindex.phpからヘッダー部分にあたるコードを切り取り、新規作成したファイルにヘッダーのコードを貼り付けてheader.phpを作成しました。
今回はheader.phpと同じように上記の画像の赤枠のfooter.phpにあたる部分を作成していきます。
header.phpの詳しい作成方法はこちら
ではさっそく、前回同様footer.phpの作成を順を追ってご紹介していきます。
上の画像の赤枠でfooter.phpにあたる箇所のコードを、index.phpから切り取ります。
次に、新たに新規作成したファイルに、先程切り取ったフッターにあたるコードを貼り付け、名前を「footer.php」にして保存をします。
ここまでで、現在index.phpとfooter.phpのファイルの中身は以下のようになっているかと思います。
index.phpの中身
<main>
<!--
中身はここでは割愛いたします。
ここにはメインコンテンツにあたるコードが入っている状態です。
-->
</main>
<footer>
<!--
中身はここでは割愛いたします。
ここにはフッターにあたるコードが入っている状態です。
-->
</footer>
以上で、footr.phpの作成は完了です。作業内容は前回ご紹介したheader.phpと同じく、コピペで済む作業ですので難しくはないと思いますが、いかがでしょうか。
3つのファイルでTOPページを表示させます。
ここからは、また次回以降にご紹介をするのですが、現在TOPページを作成したHTMLファイルが、index.php(TOPページのメインコンテンツが入っているファイル)、header.php(ヘッダーのコードが入っているファイル)、footer.php(フッターのコードが入っているファイル)と3つのファイルに別れている状態となっているかと思います。
WordPressではこの3つのファイルを、簡単に説明するとタグによって連結し、TOPページを表示をさせています。
次回は、基本になるテンプレートタグについてご紹介をしていきたいと思います。
徐々にではありますが、ゆっくりとWordPressの独自テーマ作成についてご紹介をしていきますので、お楽しみに。
この記事を書いた人
KNOWLEDGE BASEの中の人
2013年よりWEB制作会社に入社し、デザイン・コーディングからディレクションと幅広く従事。