【簡単2STEP】さくらインターネットSSL「Let’s Encrypt」設定方法
kanri
空創デザインオフィス
【たった１行追加でOK】自作WordPressテーマheader・footer.phpを作ろう
kanri
本記事はこんな方にオススメです
- 自作（オリジナル）WordPressテーマを作成したいとお考えの方
- WordPressテーマのheader.phpとfooter.phpについて詳しく知りたい方
- WordPressを利用している or 利用予定 の方
- Webデザイナーを目指している方
今回は、自作WordPressテーマ作成に必須のファイル「ヘッダー（header.php）」と「フッター（footer.php）」の作り方について解説します。
WordPressにはたくさんの便利なタグが用意されていますが、今回は最低限必要な記述に絞って解説しています。
自作WordPressテーマ作成については、下記記事でまとめてご紹介しています。ぜひあわせてご覧ください！
あわせて読みたい
自作WordPressテーマを作ろう【過去記事まとめ】
Contents
自作WordPressテーマに必須のheader.php、footer.phpとは
その名の通り、header.phpはヘッダーを表示するためのファイル、footer.phpはフッターを表示するためのファイルです。
このheader.phpとfooter.phpは、WordPressテーマに必須です。
自作WordPressテーマ「ヘッダー（header.php）」の作り方
まず、静的にコーディングしたヘッダー部分のコード※を、「header.php」としてWordPressテーマフォルダ内に保存します。
その後、下記のように、一部のコードをWordPress専用コードに書き換えましょう。
【必須】＜/head＞の直前にwp_headを追加
1<?php wp_head(); ?>
2</head>
これだけ必須です！
bodyにclassを追加する
各ページのbodyに、ページ毎に異なるclassを追加することができます。
ページ毎にデザインを指定する時に非常に便利なので、ぜひ追加しておきましょう。
変更前
1<body>変更後
1<body <?php body_class(); ?>>これで、自動でページ毎に違ったclassがつきます。
自作WordPressテーマ「フッター（footer.php）」の作り方
ヘッダーと同じように、静的にコーディングしたフッター部分のコードを「footer.php」としてWordPressテーマフォルダ内に保存します。
その後、下記のように、一部のコードをWordPress専用コードに書き換えましょう。
【必須】＜/body＞の直前にwp_footerを追加
1<?php wp_footer(); ?>
2</body>
フッターもこれだけ必須です！
ヘッダーとフッターを呼び出す方法
トップページを表示するためのファイル「index.php」を作成して、上記で作成したヘッダー（header.php）とフッター（footer.php）を呼び出してみましょう。
index.phpに下記を記載して、UPします。
1<?php get_header(); ?>
2<!-- ここにコンテンツを記述します -->
3<?php get_footer(); ?>「get_header」でヘッダー、「get_footer」でフッターを呼び出すことが出来ます。
とっても簡単ですね！
コンテンツは、get_headerとget_footerの間（「ここにコンテンツを記述します」と書かれてあるところ）に記述していってください。
まとめ：header.phpとfooter.phpを作成する際のポイント
header.phpとfooter.phpを作成する際のポイントをまとめました。
header.phpにはwp_headを必ず入れる
1<?php wp_head(); ?>
2</head>
footer.phpにはwp_footerを必ず入れる
1<?php wp_footer(); ?>
2</body>
ヘッダー（header.php）とフッター（footer.php）を呼び出す方法
1<?php get_header(); ?>
2<!-- ここにコンテンツを記述します -->
3<?php get_footer(); ?>空創デザインオフィスでは、ホームページ制作・リニューアル、WordPress導入、自分でホームページを作りたい方へのサポートなども承っております。
下記ボタンよりお気軽にお問い合わせください！（お見積りは無料です）
あわせて読みたい
自作WordPressテーマを作ろう【過去記事まとめ】
ABOUT ME
2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです！
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです！
