つぶやき
-ブログ-

テンプレートを分割するとheaderやfooterを複数ページで使い回せる

2022年1月26日
  giv_design

WordPressではテンプレートを分割することで、headerやfooterなどを複数のページで使い回せます。これによりページごとに、headerやfooterのコードを記述する必要がなくなります。本記事ではテンプレートを分割する方法を解説します。


テンプレートを分割するとheaderやfooterを共有パーツ化できる

下記の画像のようにindex.php内のheaderやfooterは「header.php」や「footer.php」のファイルに分割できます。画像には載せていませんが、sidebarも「sidebar.php」で分割できます。


そして分割したheader.phpやfooter.php、sidebar.phpは次のコードで各ファイルから呼び出せます。

・header.phpは”<? php get_header(); ?>”で呼び出せる
・footer.phpは”<?php get_footer(); ?>”で呼び出せる
・sidebar.phpは”<?php get_sidebar(); ?>”で呼び出せる

例えば、トップページや投稿一覧、問い合わせのページで同じheaderを表示させたい場合は、とだけ記述すれば、同じheaderが呼び出せるようになります。headerのコードを何回も記述しなくてもよくなりますね。


テンプレートを分割する手順を紹介

では実際にテンプレートを分割する手順を紹介します。

今回はheader.phpとfooter.phpを作成する方法を説明します。

sidebar.phpでも同じように作成可能です。今回は次のindex.phpのheaderとfooter部分をheader.phpとfooter.phpに分割します。cssファイルも載せています。

See the Pen Untitled by wataru🐧 (@mimori_5046) on CodePen.


header.phpを作成する

①header.phpを作成する

header.phpのサンプル画像

header.phpを作成する際には、ファイル名を間違えないようにしましょう。間違えるとheaderが読み込めなくなります。

②index.phpの<!DOCTYPE html>~</header>までのタグをコピーしてheader.phpにペーストする

③index.phpの先頭に<?php get_header(); ?>と記述する

これで分割したheader.phpをindex.phpで呼び出せます。


footer.phpを作成する

①footer.phpを作成する

header.phpと同様にファイル名を間違えないようにしましょう。

間違えるとfooterが読み込めなくなります。

②index.phpの<footer>~</html>までのタグをコピーしてfooter.phpにペーストする

③index.phpの文末に<?php get_footer(); ?>と記述する

WordPress footerの分割

これで分割したfooter.phpをindex.phpで呼び出せます。


Wp_head関数、Wp_footer関数を記述する

WordPressではheadタグの中に「wp_head」関数を記述することが推奨されています。

記述しておかないと、プラグインなどのWordPressの機能が使えなくなることがあります。

header.phpの</head>の前に<?php wp_head(); ?>と記入しましょう。

またfooter.phpにも「wp_footer関数」を記述する必要があります。こちらも記述しておかないと、プラグインなどのWordPressの機能が使えなくなることがあります。こちらはfooter.phpの</body>の前に<?php wp_footer(); ?>と記述しましょう。

このようにWordPressではheaderやfooterを使い回せるので、何度も同じコードを記入する必要がありません。しっかり使いこなしていきましょう。


GIV株式会社は、埼玉県川越市にあるWEB(ホームページ)制作会社です。

お困りごと、ご相談、お気軽にご連絡ください。

お問い合わせは、こちらから。


制作に関する
ご相談はこちら