テンプレートとは何かについては、「WordPressのテーマに必要なファイルを押さえよう」で解説しました。
本記事では、テンプレートファイルの中でも「テンプレートパーツファイル」というファイルの種類があるので、テンプレートパーツファイルについて詳しく解説していきます。
テンプレートパーツファイルはサイトを作成する上で高確率で使用する上に、WordPressの便利な機能でもあるので、マスターしていきましょう。
- WordPressのテンプレートファイルについて
案件が取れなくて悩んでいるあなたへ
プログラミング案件獲得のために必要なスキルは、単に技術力だけではありません。営業力、コミュニケーション力、人脈などの幅広いスキルや要素が求められてきます。
営業からライティング、SEOまで学べるフリーランス特化型プログラミングスクールZeroPlusで、フリーランスエンジニアに必要なすべてを手に入れませんか？
- またゼロからやり直さないといけないの？
- 本当にフリーランスになれるの？
といった不安にも、超フレンドリーな相談員が親切に相談にのります。スクール以外のご質問もOK！
＼お申し込みは30秒で終わります。／
新しい一歩を、今踏み出してみませんか？
目次
テンプレートパーツファイルとは
複数ページがある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 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は、サイドバー部分をテンプレートパーツファイルとして作成することができるファイルです。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>コード例はあくまでもパーツにすべき部分を例として書き出しているだけなので、実際に実装する上で必要なWordPress関数はあります。
分割した各ファイルの呼び出し
上記で紹介した、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();をしてそれぞれを読み込みます。
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を呼び出す
<?php get_template_part( 'content' ); ?>あとは、content.php呼び出したいところに上記コードを記述します。
独自のテンプレートパーツファイルを呼fび出すには、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化）する際にテンプレートパーツファイルにできそうな部分を見極めて使いこなしましょう。
