【WordPressの勉強】header.php と footer.phpの配置

こんにちは！！ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。

今回はサイトに必須となる「header.php」と「footer.php」を配置します。

なんだかちょっと難しい感じがしますがやっていきます。

ちなみに、このブログを書きながら「header.php」と「footer.php」の配置作業を進めています。

初めてやります。笑

今回はこちらのサイトを参考にさせていただきました。

参考WordPressのテーマを作っていこう【header.php、footer.php編その１】

前回 #001 のおさらい
ヘッダーとフッターを読み込むコードを記入
- ヘッダー（header.php）
- フッター（footer.php）
オリジナルのヘッダーとフッターを配置してみる
- header-gcb.phpの中身
- footer-gcb.phpの中身
front-page.phpを書き換えてみよう！
おわりに

前回 #001 のおさらい

簡単におさらいをすると、前回 #001 ではワードプレスのテーマを作成し、ワードプレスのテーマ作成で必要最低限の以下のファイルを配置しました。

front-page.php
index.php
style.css

参考【WordPressの勉強】自作テーマをつくってみた！#001

そして、「Hello World！」という文字を表示しました。

【WordPressの勉強】自作テーマをつくってみた！#001

こんにちは！！ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。普段の...

gcbgarden.com

2019-01-30 19:03

ヘッダーとフッターを読み込むコードを記入

まずはじめに「front-page.php」にヘッダー（header.php）とフッター（footer.php）を読み込むコードを記入します。

ヘッダー（header.php）

<?php get_header(); ?>

1	<?php get_header(); ?>

参考関数リファレンス/get header

フッター（footer.php）

<?php get_footer(); ?>

1	<?php get_footer(); ?>

参考関数リファレンス/get footer

front-page.phpの中身

「front-page.php」はこんな感じになりました。

[test]$ cat front-page.php 
<?php get_header(); ?>

<?php
echo "Hello World!!";
?>

<?php get_footer(); ?>

[test]$ cat front-page.php

<?php get_header(); ?>

<?php

echo "Hello World!!";

<?php get_footer(); ?>

サイトにアクセスしてみると、、、

なんだかよくわかりませんがこんな感じになりました。

どうやら管理ページ→設定→一般の情報を拾ってきていることがわかりました。

「header.php」と「footer.php」ファイルはまだ配置していませんがワードプレス本体がなんらかの処理をしてくれていることがわかりました。

そこで、「is proudly powered by」という文字列でファイル中身全体を検索してみると以下のパスに

＊PATH
Root/wp-includes/theme-compat/

.
├── comments.php
├── embed-404.php
├── embed-content.php
├── embed.php
├── footer-embed.php
├── footer.php
├── header-embed.php
├── header.php
└── sidebar.php

├── comments.php

├── embed-404.php

├── embed-content.php

├── embed.php

├── footer-embed.php

├── footer.php

├── header-embed.php

├── header.php

└── sidebar.php

「header.php」と「footer.php」ファイルを発見、「footer.php」ファイル内に「is proudly powered by」とマッチする文字列がありました。

おそらくRoot/wp-includes/theme-compat/配下の「header.php」と「footer.php」ファイルが読み込まれていたのだと思います。

んん〜〜〜、、難しい。笑

リファレンスに書いてありました！！

header.php ファイルがテーマに含まれていない場合は、デフォルトテーマの wp-includes/theme-compat/header.php を読み込みます。

納得です。

オリジナルのヘッダーとフッターを配置してみる

リファレンスを読んでみるとヘッダーとフッターファイルを指定のフォーマットで自由に決めることができるみたいでした。

現在のテーマディレクトリの header.php テンプレートファイルを読み込みます。名前（name）を指定すると、指定したヘッダー header-{name}.php を読み込みます。

使い方

<?php get_header( $name ); ?>

1	<?php get_header( $name ); ?>

上のように記述することで、「header-name.php」を読み込むようになるみたいです。

そこで、

header-gcb.php
footer-gcb.php

2つのファイルを用意してみました。

それぞれ簡単に以下のように準備しました。

header-gcb.phpの中身

[test]$ cat header-gcb.php 
<?php
echo 'ヘッダーです。';
?>

[test]$ cat header-gcb.php

<?php

echo 'ヘッダーです。';

footer-gcb.phpの中身

[test]$ cat footer-gcb.php 
<?php
echo 'フッターです。';
?>

[test]$ cat footer-gcb.php

<?php

echo 'フッターです。';

テーマ「test」の配下は以下のようになりました。

test/
├── footer-gcb.php
├── front-page.php
├── header-gcb.php
├── index.php
└── style.css

test/

├── footer-gcb.php

├── front-page.php

├── header-gcb.php

├── index.php

└── style.css

front-page.phpを書き換えてみよう！

「header-gcb.php」と「footer-gcb.php」の準備ができたので、「front-page.php」のヘッダー関数とフッター関数を書き換えます。

具体的にはget_header()とget_footer()に引数nameを渡します。

[test]$ cat front-page.php 
<?php get_header('gcb'); ?>

<?php
echo "Hello World!!";
?>

<?php get_footer('gcb'); ?>

[test]$ cat front-page.php

<?php get_header('gcb'); ?>

<?php

echo "Hello World!!";

<?php get_footer('gcb'); ?>

上のように書き換えました。

それではページにアクセスしてみます！！

トップページへアクセス！！

echo しているだけなので文字列が横に並びました。

おわりに

テーマファイルに「header.php」と「footer.php」ファイルがないとデフォルトテーマの wp-includes/theme-compat/header.php を読み込むことがわかりました。

ヘッダーもフッターもそれぞれ「header-gcb.php」と「footer-gcb.php」のようにテーマ内に用意し、関数に名前を指定<?php get_header( $name ); ?>して読み込むことができることがわかりました。

ページに応じて表示したいヘッダーやフッターを変更できる点はとても便利に感じます。

今回はヘッダーとフッダーの振る舞いについて調べて実装してみました。

おしまい。

sakurabaaa_g

この記事を書いた人。
20代。とあるネットベンチャーでがんばる働き屋さん、ブロガー。
書きたいことを気ままに書いてます！
Python、プログラミング、米株、カメラ、野球観戦がすき。趣味は新宿散策。