●目次
WordPressでのオリジナルテーマ開発は、ウェブサイトのデザインや機能をカスタマイズする重要なプロセスです。
特に、ヘッダーとフッターを独立したファイルとして分割することは、テーマ全体の効率的な構造を作る上で欠かせない手法です。
ヘッダーとフッターの分割とは？
HTMLのテンプレート構造では、通常index.phpファイルがサイト全体のレイアウトを管理しています。
このindex.phpを分割して、header.phpとfooter.phpにすることで、ページ全体で共通部分を管理しやすくなります。
たとえば、ナビゲーションメニューやフッターのリンクを各ページに再利用でき、保守性も向上します。
ファイルの分割手順
変更前のindex.php
まず、もとのHTMLコードを確認しましょう。以下のようなシンプルなindex.phpを分割します。
PHP-WordPress（index.php）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php the_title(); ?> | <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/asset/css/reset.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/asset/css/layout.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/asset/css/component.css">
</head>
<body>
<header class="header">
<a href="<?php echo home_url(); ?>/" class="headerLogo">
HTML&CSS+JS
</a>
<nav class="headerNav">
<ul>
<li>
<a href="<?php echo home_url(); ?>/">ホーム</a>
</li>
<li>
<a href="<?php echo home_url(); ?>/service">サービス内容</a>
</li>
<li>
<a href="<?php echo home_url(); ?>/news">新着ニュース</a>
</li>
<li>
<a href="<?php echo home_url(); ?>/contact">お問い合わせ</a>
</li>
</ul>
</nav>
</header>
<div class="wrapper">
<div class="cover--top">
<div class="coverBox">
<h1 class="heading01 top">
<?php bloginfo('name'); ?>
</h1>
</div>
</div>
<div class="container col_1_2">
<!-- 省略 -->
</div>
</div>
<footer class="footer">
<div class="footerBar">
<p>
<small><?php bloginfo('name'); ?> © 2021</small>
</p>
</div>
</footer>
<script src="<?php echo get_template_directory_uri(); ?>/asset/js/layout.js"></script>
</body>
</html>header.php
ヘッダー部分のHTMLコードをheader.phpに移行します。WordPressテンプレートタグで動的にファイルパスを取得します。
</head>の前に<?php wp_head(); ?>を追加！
PHP-WordPress（header.php）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML&CSS+JS</title>
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ;?>/style.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ;?>/asset/css/reset.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ;?>/asset/css/layout.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ;?>/asset/css/component.css">
<?php wp_head(); ?>
</head>
<body>
<header class="header">
<a href="<?php echo home_url(); ?>" class="headerLogo">
HTML&CSS+JS
</a>
<nav class="headerNav">
<ul>
<li>
<a href="<?php echo esc_url(home_url('/'));?>">ホーム</a>
</li>
<li>
<a href="<?php echo esc_url(home_url('/'));?>service">サービス内容</a>
</li>
<li>
<a href="<?php echo esc_url(home_url('/'));?>news">新着ニュース</a>
</li>
<li>
<a href="<?php echo esc_url(home_url('/'));?>contact">お問い合わせ</a>
</li>
</ul>
</nav>
</header>footer.php
フッター部分のHTMLコードをfooter.phpに移行し、wp_footer()関数で必要なフッタースクリプトを読み込みます。
</body>の前に<?php wp_footer(); ?>
PHP-WordPress（footer.php）
<footer class="footer">
<section class="footerSection">
<!-- 省略 -->
</section>
<div class="footerMenu">
<a href="<?php echo home_url(); ?>/" class="footerLogo">
<?php bloginfo('name'); ?>
</a>
<nav class="footerNav">
<ul>
<li>
<a href="<?php echo home_url(); ?>/">ホーム</a>
</li>
<li>
<a href="<?php echo home_url(); ?>/service">サービス内容</a>
</li>
<li>
<a href="<?php echo home_url(); ?>/news">新着ニュース</a>
</li>
<li>
<a href="<?php echo home_url(); ?>/contact">お問い合わせ</a>
</li>
<li>
<a href="<?php echo home_url(); ?>/privacy-policy">個人情報保護方針</a>
</li>
<li>
<a href="<?php echo home_url(); ?>/term-of-use">利用規約</a>
</li>
</ul>
</nav>
</div>
<div class="footerBar">
<p>
<small><?php bloginfo('name'); ?> © 2021</small>
</p>
</div>
</footer>
<script src="<?php echo get_template_directory_uri(); ?>/asset/js/layout.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/asset/js/component.js"></script>
<?php wp_footer(); ?>
</body>
</html>分割したパーツを読み込む
ヘッダー（header.php）とフッター（footer.php）を読み込むシンプルな構造になります。
index.phpで読み込む
PHP-WordPress（index.php）
<?php get_header(); ?>
<div class="wrapper">
<div class="cover--top">
<div class="coverBox">
<h1 class="heading01 top">
<?php bloginfo('name'); ?>
</h1>
</div>
</div>
<div class="container col_1_2">
<!-- 省略 -->
</div>
</div>
<?php get_footer(); ?>まとめ
このようにファイルを分割することで、効率的なテーマ開発が可能になります。また、ナビゲーションメニューやフッターの変更を1箇所で行うだけで、全ページに反映できるので、管理の手間が大幅に削減されます。