テンプレートパーツとは

1つのページを”部品”に分ける

一般的なサイト構造は、ヘッダー、投稿記事、サイドメニュー、フッターなどから構成されています。

 

WordPressでは、通常、それぞれの部分に対応したPHPファイルを作成します。これらのPHPファイルは”部品”のような役割を果たすので、テンプレートパーツと呼ばれます。

 

インクルードタグで読み込み

テンプレートパーツは、「インクルードタグ」で読み込み、サイトに反映させることが出来ます。インクルードタグはWordPressで用意されている関数です。下図は、テンプレートindex.phpに書いた各種インクルードタグで、テンプレートパーツを読み込んでいる様子を示しています。

 

ファイルを分割する理由

異なるテンプレート間でパーツを共用できる

テンプレートパーツ化すると、異なるテンプレート(トップページ用、カテゴリ表示用、固定ページ用・・・etc)間でパーツを共用できます。

 

パーツ化するとメンテナンス性が向上する

テンプレートパーツを利用することで、サイトのメンテナンスが容易になります。例えば、上図のサイトでメニューバーを変更する場合は、header.phpのファイル1つを修正するだけで済みます。

 

テンプレートパーツを作成する

1. テンプレートファイルを分割して、パーツファイルを作成する

index.phpファイルを分割して、4つのPHPファイルを新規作成します。

  • header.php new!
  • content.php new!
  • sidebar.php new!
  • footer.php new!
  • index.php
header.php

今回は、index.phpファイルの先頭から<div id=”main”>タグまでをヘッダー部品とします。

<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<title><?php bloginfo('name'); ?></title>
</head>
<body>
    <div id="container">
<!-- header -->
        <header id="header">
            <hgroup>
                <h1 id="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
                <h2 id="site-description">WordPress tips and lessons.</h2>
            </hgroup>
            <nav>
                <ul id="main-nav">
                    <li><a href="dummy.html">WordPress Tips</a></li>
                    <li><a href="dummy.html">このサイトについて</a></li>
                </ul>
            </nav>
        </header>
        <div id="main">
content.php

ループ内の、投稿記事を表示する部分を抜き出します。

<article class="post">
    <header>
        <h1 class="post-title"><?php the_title(); ?></h1>
        <p class="post-meta"><?php the_date(); ?></p>
    </header>
    <div class="post-content">
        <?php the_content(); ?>
    </div>
</article>
sidebar.php

サイドメニューの部分を切り出して、sidebar.phpとします。

<!-- sidebar -->
<aside id="sidebar">
    <h4>サイドバー</h4>
    <ul><li>サイドバー設置予定</li></ul>
</aside>
footer.php

div#mainの終了タグから、元のHTMLファイルの最後までをfooter.phpとします。div#main開始タグまでをheader.phpに入れたので、それに対応する形にしています。

        </div><!--main-->
<!-- footer -->
        <footer>
            <p>©<?php bloginfo('name'); ?>, All rights reserved.</p>
        </footer>
    </div><!--container-->
</body>
</html>
index.php(仮)

元のHTMLファイルのうち、以上の4つのパーツが切り取られた残りを、とりあえずindex.phpとしておきます。既に大部分が切り取られていましたね。

<!-- header.phpへ移動した -->
<div id="content">
<?php if(have_posts()): while(have_posts()): the_post(); ?>
 <!-- content.phpへ移動した -->
<?php endwhile; endif; ?>
</div>
<!-- sidebar.phpへ移動した -->
<!-- footer.phpへ移動した -->


2. index.phpにインクルードタグを挿入する

パーツとして切り取られた場所に、インクルードタグを書きます。ヘッダー、サイドバー、フッターに関しては専用のWP関数が用意されています。content.phpは、パーツファイルを読み込むための汎用のWP関数を使います。

index.php
<?php get_header(); ?>
<div id="content">
<?php
 if(have_posts()): while(have_posts()): the_post();
  get_template_part('content');
 endwhile; endif; ?>
</div>
<?php get_sidebar(); get_footer();
get_template_part()

テンプレートパーツを読み込むWordPress関数。引数に、インクルードするファイル名を指定する。拡張子(.php)は省略して指定する。

ファイル最後のPHPブロック終了タグは省略OK

PHPブロックの終了タグがファイルの最後にくる場合は、省略できます。

 

まとめ

2ステップで完了します。手順はシンプルですね。

  1. index.phpを分割して、header.php、content.php、sidebar.php、footer.phpにカット&ペースト。
  2. index.phpにインクルードタグを挿入する。

 

関連記事

第4回 テンプレートファイル分割&インクルードタグの使い方

プレゼン形式で、同様の内容を解説しています。