Learning site for website creation

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