GCN プログラミング教材

テーマ制作【基礎３】「ヘッダーとフッターを分割しテンプレート化する」

index.phpのヘッダーとフッターを分割する

header.php ヘッダー部分（ナビゲーション等を含む）
footer.php フッター部分
sidebar.php サイドバー部分（今回作るテーマではサイドバーはないので作成しない）

ヘッダーをテンプレート化

header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet">
<?php wp_head(); ?>
</head>
<body>
<!-- .containerここから -->
<div class="container"> 

  <!--ヘッダーここから-->
  <h1><a href="<?php echo home_url(); ?>/index.html"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.gif" alt="フルーツアンドフラワーショップ タブロ" width="299" height="42"></a></h1>
  <ul class="nav">
    <li><a href="<?php echo home_url(); ?>/index.html">ホーム</a></li>
    <li><a href="<?php echo home_url(); ?>/news.html">ニュース</a></li>
    <li><a href="<?php echo home_url(); ?>/fruit.html">フルーツ</a></li>
    <li><a href="<?php echo home_url(); ?>/flower.html">フラワー</a></li>
    <li><a href="<?php echo home_url(); ?>/company.html">店舗情報</a></li>
    <li><a href="<?php echo home_url(); ?>/contact.html">お問い合わせ</a></li>
  </ul>
  <!--ヘッダーここまで-->

フッターをテンプレート化

footer.php
  <!--フッターここから-->
  <p class="footer"> タブロ生花果物店<br>
    Copyright Fruits and Flowers Shop Tableau. All rights reserved. </p>
  <!--フッターここまで--> 

</div>
<!-- .containerここまで -->
<?php wp_footer(); ?>
</body>
</html>

index.phpに各テンプレートを読み込む

index.php
<?php get_header(); ?>

  <!--メインここから-->
  <div class="main">
    <p><img src="<?php echo get_template_directory_uri(); ?>/images/top_photo.jpg" alt="Fruit &amp; Flower Shop Tableau フルーツアンドフラワーショップ タブロ" width="770" height="300"></p>
    <p>産地直送にこだわった新鮮なフルーツと、季節のお花をお届けします。<br>
      フルーツとお花の本質を知り尽くした<strong>「フルーツアンドフラワーショップ　タブロ」</strong>です。<br>
      果物全般、生花全般を取り扱っており、学校、病院、葬祭場、洋菓子店の納入も行っております。<br>
      お花のアレンジメントや果物の詰め合わせなど、ご予算に応じてお作りします。</p>
    <h2>News</h2>
    <p>店舗へのアクセス方法を追記いたしました。詳細は<a href="<?php echo home_url(); ?>/company.html">店舗情報のページ</a>でご確認ください。</p>
  </div>
  <!--メインここまで--> 

<?php get_sidebar(); ?>

index.phpの上部にheader.phpを読み込むコードを追加します。

<?php get_header(); ?>

index.phpの下部にfooter.phpを読み込むコードを追加します。

<?php get_footer(); ?>
※サイドバーをテンプレート化した場合は、sidebar.phpを読み込むコードを追加する必要がありますが、今回作るテーマではサイドバーはないので使いません。

<?php get_sidebar(); ?>

テンプレート化したヘッダーとフッターはTOPページ以外でも使うので、読み込む方法は覚えておきましょう。

コピーできました！