09：共通するヘッダーとフッターをパーツ化して読み込む
公開日:2018年11月04日
更新日:2018年11月05日
WordPressは共通部分をモジュール化（パーツ化）することができます。これにより共通部分の修正や更新が楽になります。
WordPressは以下のモジュールテンプレートとモジュール読み込み用関数が用意されています。
| パーツ | モジュールテンプレート名 | モジュール読み込み関数 |
|---|---|---|
| ヘッダー | header.php | get_header() |
| フッター | footer.php | get_footer() |
| サイドバー | sidebar.php | get_sidebar() |
| 検索フォーム | searchform.php | get_search_form() |
| コメント | comments.php | get_comments_template() |
カスタムテンプレート（好きなファイル名をつけたモジュールテンプレート）を作成することができます。
| カスタムテンプレート名 | カスタムテンプレート読み込み関数 |
|---|---|
| example.php | get_template_part(‘example’) |
| content-example.php | get_template_part(‘content’, ‘example’) |
カスタムテンプレートは半角英数で好きなファイル名をつけることができます。作成したカスタムテンプレートを読み込む際は「get_template_part();」を使用し引数にカスタムテンプレート名を指定します。ファイル名に「-（ハイフン）」を使用した場合は、ハイフンを区切りにファイル名を分割して引数に指定します。
変更前
index.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><?php bloginfo('name'); ?><?php wp_title('|'); ?></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" />
</head>
<body>
<div class="container">
<div class="header">
<div class="inner">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>
<p><?php echo get_template(); ?></p>
<div class="theme_img"><img src="<?php echo get_template_directory_uri(); ?>/img/image.png" alt="テーマ内画像" /></div>
</div><!-- /.inner -->
</div><!-- /.header -->
<div class="global_nav">
<div class="inner">
<?php wp_nav_menu(); ?>
</div><!-- /.inner -->
</div><!-- /.nav -->
<div class="content">
<div class="main">
メインコンテンツ
</div><!-- /.main -->
<div class="sidebar">
サイドバーコンテンツ
</div><!-- /sidebar -->
</div><!-- /.content -->
<div class="footer">
<div class="inner">
<div class="copyright">
© <?php echo date('Y'); ?>
<a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>.
</div>
</div><!-- /.inner -->
</div><!-- /.footer -->
</div><!-- /.container -->
</body>
</html>
変更後
「index.php」の前半部分をヘッダーモジュール「header.php」、後半部分をフッターモジュール「footer.php」にします。
「header.php」と「footer.php」を作成し共通部分をカート＆ペーストしましょう。
header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><?php bloginfo('name'); ?><?php wp_title('|'); ?></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" />
</head>
<body>
<div class="container <?php echo $temp_name; ?> <?php echo $slug_name; ?>">
<div class="header">
<div class="inner">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>
<p><?php echo get_template(); ?></p>
<div class="theme_img"><img src="<?php echo get_template_directory_uri(); ?>/img/image.png" alt="テーマ内画像" /></div>
</div><!-- /.inner -->
</div><!-- /.header -->
<div class="global_nav">
<div class="inner">
<?php wp_nav_menu(); ?>
</div><!-- /.inner -->
</div><!-- /.nav -->
index.php
<?php get_header(); ?>
<div class="content">
<div class="main">
メインコンテンツ
</div><!-- /.main -->
<?php get_sidebar(); ?>
</div><!-- /.content -->
<?php
get_footer();
footer.php
<div class="footer">
<div class="inner">
<div class="copyright">
© <?php echo date('Y'); ?>
<a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>.
</div>
</div><!-- /.inner -->
</div><!-- /.footer -->
</div><!-- /.container -->
</body>
</html>
sidebar.php
<div class="sidebar">
サイドバーコンテンツ
</div><!-- /.sidebar -->
ヘッダー・フッターモジュールの読み込み
「index.php」の上部で「ヘッダーモジュール」を読み込みます。
<?php get_header(); ?>
<div class=”content”>
「index.php」の下部で「フッターモジュール」を読み込みます。
<?php
get_footer();
サイドバーモジュールの読み込み
「index.php」の任意の位置で「サイドバーモジュール」を読み込みます。
<?php get_sidebar(); ?>
公開サイトで固定ページを表示して、モジュール化しても元と同じ表示結果になっていることを確認します。
欠席者対応：wireframe03
同じタグのコンテンツ
同じカテゴリーのコンテンツ
