テンプレートとは何かについては、「WordPressのテーマに必要なファイルを押さえよう」で解説しました。
本記事では、テンプレートファイルの中でも「テンプレートパーツファイル」というファイルの種類について、詳しく解説していきます。
テンプレートパーツファイルはサイトを作成する上で高確率で使用するうえに、WordPressの便利な機能でもあるので、マスターしていきましょう。
テンプレートパーツファイルとは
複数ページがあるWebサイトには、共通となる部分がいくつかあります。例えば、ヘッダーやフッター、サイドバーなどはひとつのWebサイトにおいて同じパーツとして扱われることが多いです。
そのような共通となる部分は、HTMLで作成すると複数のページにおいて同じ記述をすることになりますが、WordPressでは、それぞれ一つのテンプレートファイルとして作成することができます。テンプレートパーツファイルとして作成することで、使いたいところで呼び出して使い回すことができます。
既存のテンプレートパーツファイル
WordPressには、既存で用意されているテンプレートパーツファイルがあります。まずはそれらのファイルから紹介します。
「デザインデータからコーディング！ブログサイトを作ってみよう」で作成したHTMLに対し、必要最低限のWordPress化を行って解説していきます。
header.php
header.phpは、ヘッダー部分をテンプレートパーツファイルとして作成することができるファイルです。
header.phpのコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>ZeroPlus Blog</title>
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap"
rel="stylesheet"
/>
<!-- css -->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<?php wp_head(); ?>
</head>
<body>
<header class="header">
<div class="header-inner">
<h1 class="logo">
<a href="index.html" class="logo-link">ZeroPlus Blog</a>
</h1>
<p class="header-heading">日々の学習を記録するブログ</p>
</div>
</header>
header.phpとしてまとめておくことができる範囲は、<!DOCTYPE html>から</header>までのコードです。
また、</head>の直前に<?php wp_head(); ?>を記述する必要があります。
wp_head()
wp_head()を実行することで、WordPressで用意されたHTMLを出力してくれます。
例えば、WordPressの管理画面からインストールし有効化にしている拡張機能で、必要なHTMLなどを出力してくれるようになります。逆にこの関数を実行していないと、うまく機能してくれません。
footer.php
footer.phpは、フッター部分をテンプレートパーツファイルとして作成することができるファイルです。
footer.phpのコード例
<footer class="footer">
<small class="footer-copyright">© 2018 sample inc.</small>
</footer>
<?php wp_footer(); ?>
</body>
</html>footer.phpとしてまとめておくことができる範囲は、<footer>から</html>までのコードです。
また、</body>の直前に<?php wp_footer(); ?>を記述する必要があります。
wp_footer()
wp_footer()を実行することで、wp_head()と同じように、WordPressで用意されたHTMLを出力してくれます。
wp_head()はheadタグ内で必要なHTMLを出力し、wp_footer()はbodyの閉じタグの直前に必要なHTMLを出力してくれます。
sidebar.php
sidebar.phpは、サイドバー部分をテンプレートパーツファイルとして作成することができるファイルです。asideタグのあるサイトで使用します。
header.phpやfooter.phpのようにWordPressで用意されたHTMLが出力されることはないので、作成や記述は必須ではありません。
sidebar.phpのコード例
<aside class="aside">
<div class="recommend">
<h2 class="recommend-title">おすすめ記事</h2>
<ul class="recommend-list">
<li class="recommend-item">
<a href="" class="recommend-item-link">・web制作</a>
</li>
<li class="recommend-item">
<a href="" class="recommend-item-link">・プログラミング</a>
</li>
<li class="recommend-item">
<a href="" class="recommend-item-link">・webデザイン</a>
</li>
<li class="recommend-item">
<a href="" class="recommend-item-link">・マーケティング</a>
</li>
</ul>
</div>
<div class="aside-bnrs">
<a href="" class="bnr-item">
<img
src="img/bnr_advertising.jpg"
alt=""
width="686"
height="272"
class="bnr-img"
/>
</a>
<a href="" class="bnr-item">
<img
src="img/bnr_advertising02.jpg"
alt=""
width="686"
height="272"
class="bnr-img"
/>
</a>
<a href="contact.html" class="bnr-item">
<img
src="img/img_contact-form.jpg"
alt=""
width="686"
height="272"
class="bnr-img"
/>
</a>
</div>
</aside>
分割した各ファイルの呼び出し
上記で紹介した、header.php、footer.php、sidebar.phpを呼び出すには、それぞれ特定の呼び出し関数があります。
| ファイル名 | 関数 |
|---|---|
| header.php | get_header() |
| footer.php | get_footer() |
| sidebar.php | get_sidebar() |
例えばheader部分を読み込むには、テンプレートファイルにget_header();と記述します。
index.phpにて、各テンプレートパーツファイルを読み込むコード例
<!-- header部分の読み込み -->
<?php get_header(); ?>
<div class="top-container">
<main class="main">
<div class="posts">
<article class="post">
<a href="" class="post-thumb-wrapper">
<img
src="img/thumb_article.jpg"
alt=""
width="686"
height="384"
class="post-thumb"
/>
</a>
<div class="post-txts">
<h3 class="post-title">
<a href="">初心者のやりがちなミス</a>
</h3>
<p class="post-content">
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。な…
</p>
<div class="post-btn-wrapper">
<a href="" class="post-btn">続きを読む</a>
</div>
</div>
</article>
<article class="post">
<a href="" class="post-thumb-wrapper">
<img
src="img/thumb_article06.jpg"
alt=""
width="686"
height="384"
class="post-thumb"
/>
</a>
<div class="post-txts">
<h3 class="post-title">
<a href="">穴場のコワーキングスペース！</a>
</h3>
<p class="post-content">
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。な…
</p>
<div class="post-btn-wrapper">
<a href="" class="post-btn">続きを読む</a>
</div>
</div>
</article>
<!-- ・・・ -->
<!-- コードの割愛 -->
<!-- ・・・ -->
</div>
</main>
<!-- sidebar部分の読み込み -->
<?php get_sidebar(); ?>
</div>
<!-- footer部分の読み込み -->
<?php get_footer(); ?>
元々header部分があったところは、header.phpに分割したのでget_header()と実行しています。
このように、元々トップページとしてあったコードの中に、それぞれのパーツに相当する位置で関数を記述します。
複数のヘッダー、フッターを使用する
制作するサイトによっては、ヘッダーまたはフッターデザインが数種類存在する場合があります。
1種類目のヘッダー、フッターは上記セクションで解説した通り、header.php、footer.phpとして作成し、get_header();、get_footer();を使ってそれぞれ読み込みます。
header-$name.php / footer-$name.php
2種類目以降のヘッダー、フッターがある場合は、以下のようにテンプレートファイルを作成します。
header-$name.php
footer-$name.php
この$nameに入る部分は任意の命名になります。
例えば、コーポレートページのヘッダーがheader.phpであれば、ブログページのヘッダーをheader-blog.phpなどとしたりします。フッターも同様です。
各ファイルの呼び出し
header-$name.php、footer-$name.phpのような作成したテンプレートパーツファイルを呼び出すには、同じようにget_header();、get_footer();を使用しますが、引数を指定する必要があります。
| ファイル名 | 関数 |
|---|---|
| header-$name.php | get_header($name) |
| footer-$name.php | get_footer($name) |
このように、$nameで指定した任意の名前を()の中に指定します。
例えば、header-blog.phpを読み込むには、get_header(’blog’);と記述して呼び出します。
独自のテンプレートパーツファイル
header.php、footer.php、sidebar.phpなどはWordPressにデフォルトで用意されたテンプレートパーツファイルです。一方で、独自でテンプレートパーツファイルを作ることもできます。
独自のテンプレートパーツファイルは、そのサイト独自の繰り返し表示したい部分に適用します。
ZeroPlusのサービスサイトにて複数回出現するコンテンツ
ZeroPlusのサービスサイトを例にすると、上記の画像の赤く囲った部分は複数ページで使用されています。
このようなコンテンツはページに何度も記述するのではなく、独自にテンプレートパーツファイルとして作成し呼び出すことがあります。
作り方
ファイルを作成する
まずは、独自でテンプレート階層に被らないような名前のファイルを作成します。
画像の例はcontent.phpを作成しています。
content.phpのコード
<?php echo "content.phpです。" ?>
content.phpの中身は、読み込んだ際に分かるように「content.phpです。」としました。
content.phpを呼び出す
<?php get_template_part( 'content' ); ?>あとは、content.phpを呼び出したいところに上記のコードを記述します。
独自のテンプレートパーツファイルを呼び出すには、get_template_part()を使用します。
引数には、’content’としていますが、呼び出したいファイル名が同じ階層のcontent.phpになるので、ファイル名のcontentを入れています。
結果の表示
実際に表示するとこのようになります。
「これはindex.phpです。」はあらかじめ、index.phpにて記述しておいた内容です。その下に「content.phpです。」が表示されています。
前述したように、 content.phpの内容が表示されているのが分かるかと思います。
フォルダでまとめよう
独自のテンプレートパーツファイルの使い方について解説しましたが、実際に使用する際は、独自のテンプレートパーツ用のフォルダにまとめると分かりやすいです。
画像の例では、template-partsというフォルダがあり、その中にcontent.phpを内包しています。フォルダ名は任意になりますが、慣例で template-parts という命名にされることが多いです。
別階層のテンプレートパーツファイルの呼び出し（index.php）
<?php get_template_part( 'template-parts/content' ); ?>先ほどの画像の例でindex.phpから template-partsフォルダの中にあるcontent.phpを呼び出すには、'template-parts/content' のように、引数にフォルダ名/ファイル名を指定します。
まとめ
ヘッダー部、フッター部はほとんどのサイトで使用するので、必ず押さえておきましょう。
また、独自のテンプレートパーツファイルを使えば無駄なコードを省くこともできます。静的サイトから動的サイト（WordPress化）する際には、テンプレートパーツファイルにできそうな部分を見極めましょう。
