WordPressの固定ページ用テンプレートを用意する では、固定ページ専用のテンプレート page.php について紹介しました。
トップページ専用のテンプレート front-page.php や特定の固定ページ専用のテンプレート page-ページID.php や page-スラッグ.php を用意することで、固定ページの内容に応じてデザインを変更することができるようになります。
実際ウェブサイトを構築する際は、各ページのデザインが異なっていたとしても、ヘッダーとフッターが共通デザインになることが往々にしてあります。
そこで今回は、ヘッダーおよびフッターを共通化する方法を紹介します。
ヘッダー専用テンプレート
WordPressにはヘッダー専用テンプレートがあります。それが、header.php です。
早速、header.php を作ってみましょう。作成する場所は、style.css を同じ階層です。
-
mytheme
- header.php
- index.php
- page.php
- page-19.php
- page-21.php
- page-test3.php
- screenshot.png
- style.css
※ c:\User\ユーザー名\Documents\test\app\public\wp-content\themes\ を省略しています。
これまでにpage.php、page-19.php、page-21.php、page-test3.phpと４つの固定ページ専用テンプレートを作成しました。
その内容は、10行目を除いて全く同じものでした。
<!DOCTYPE html>
<html>
<head>
<title><?php the_title();?></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>'/style.css'">
</head>
<body>
<h1><?php the_title();?></h1>
<?php the_content();?>
<p>page.phpです</p>
</body>
</html>そこで、今回は1～9行目を共通ヘッダーとして header.php に移動します。
<!DOCTYPE html>
<html>
<head>
<title><?php the_title();?></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>'/style.css'">
</head>
<body>
<h1><?php the_title();?></h1>
<?php the_content();?>そして、page.phpでは、header.php を読み込む設定に変更します。
<?php get_header(); ?>
<p>page.phpです</p>
</body>
</html>header.php を読み込む関数は、get_header() です。
他のテンプレートも header.php を読み込むように変更しましょう。
<?php get_header(); ?>
<p>page-19.phpです</p>
</body>
</html><?php get_header(); ?>
<p>page-21.phpです</p>
</body>
</html><?php get_header(); ?>
<p>page-test3.phpです</p>
</body>
</html>これで、４つの固定ページ専用テンプレートに共通ヘッダーを適用することができました。
ヘッダーを変更する際は、header.php を変更するだけで４つ全ての固定ページ専用テンプレートに反映されるようになります。
フッター専用テンプレート
同じように、フッター専用テンプレートもあります。footer.php です。
-
mytheme
- footer.php
- header.php
- index.php
- page.php
- page-19.php
- page-21.php
- page-test3.php
- screenshot.png
- style.css
footer.php は header.php と同様に使うことができます。3～4行目を footer.php に移動しましょう。
<?php get_header(); ?>
<p>page.phpです</p>
</body>
</html></body>
</html>そしてヘッダー同様にfooter.phpを関数で読み込みます。フッターを読み込む関数は get_footer() です。
<?php get_header(); ?>
<p>page.phpです</p>
<?php get_footer(); ?>
他のテンプレートも同様に変更します。
<?php get_header(); ?>
<p>page-19.phpです</p>
<?php get_footer(); ?><?php get_header(); ?>
<p>page-21.phpです</p>
<?php get_footer(); ?><?php get_header(); ?>
<p>page-test3.phpです</p>
<?php get_footer(); ?>これで、フッターも共通化できました。
heaer.phpとfooter.phpの使いどころ
ウェブサイトを構築する際、ロゴやナビゲーションメニューは、全ページ共通にすることが一般的です。
すなわち、ロゴやナビゲーションメニューをheader.phpに記述することで、全ページ共通のフッターデザインにすることができます。
同じようにフッターには、社名や住所、SNSへのリンク、プライバシーポリシーへのリンク、Copyrightなどを記述することが一般的で、これらをfooter.phpに記述することで、全ページ共通のフッターデザインにすることができます。
トップページだけデザインを変更したいのであれば、トップページだけheader.phpを読み込まずに直接front-page.phpにヘッダー部を記述することもできます。
まとめ
今回は、ヘッダーとフッターの共通化について紹介しました。
header.php を get_header関数で読み込む、footer.php を get_footer関数で読み込むことで共通化できることを覚えておくとよいでしょう。
