WordPressのテンプレートは、ウェブ上でサイトをどのように表示させるかコントロールできるファイルです。
そしてWordPress全体で使うテンプレート(雛形)をパーツにして読み込むことで、記述も少なくなるし、使い回しができるファイルとして簡単に呼び出せる利点を生み出します。
今回はWordPressのテンプレートを読み込む基本的な内容ですが、何かの参考になればと思います。
WordPressのテンプレートにするファイルを作成する
WordPressのテンプレートをパーツにするために必要なファイルを作成して準備します。
WordPressに必要なファイルは「header.php」「footer.php」「index.php」「single.php」「functions.php」「style.css」の6ファイルです。
今回は例として作成する必要なファイル構成にしています。
WordPressのテンプレートのほとんどはphpファイルで構成され、テンプレートのパーツを動的に組み合わせていくことでウェブサイトを一つにまとめます。
テンプレート作成を分かりやすくするために、まずはテンプレートの中には何もない状態でテンプレート作成します。
- functions.php
- index.php
- single.php
- header.php
- footer.php
上記のファイルの拡張子は「.php」です。
style.cssの拡張子は「.css」です。
作成ファイルの保存形式は「utf-8」で保存。
テンプレートにするファイルの中身は空ですが、これでWordPressのテンプレートにするファイルは作れたことになります。
テンプレートファイルをテンプレートタグで読み込む
WordPressのテンプレートをパーツにするために、それぞれのテンプレートファイルに必要なテンプレートタグを使用してインクルード(読み込み)します。
特にWordPressのサイト全体で使用する共通テンプレートは、同じ記述を何回も書いていると非効率なので、便利なWordPressのテンプレートタグを使用します。
| ファイル名 | テンプレートタグ |
|---|---|
| header.php | get_header() |
| sidebar.php | get_sidebar() |
| footer.php | get_footer() |
上記のWordPressのテンプレートタグはサイトで共通して使うテンプレートを読み込めるテンプレートタグです。
タグ名で使用目的は理解できるかと思います。
- get_headerはヘッダー
- get_footerはフッター
- get_sidebarはサイドバー
テンプレートタグ名と同じ要素なので覚えやすいテンプレートタグでインクルードすることができます。
テンプレートを読み込む(インクルード)ときの書き方は以下です。
header.phpの読み込み
<?php get_header(); ?>
footer.phpの読み込み
<?php get_footer(); ?>
sidebar.phpの読み込み
<?php get_sidebar(); ?>
WordPressのテンプレートタグはPHP言語にWordPress関数を組み合わせて動作します。
ゆるく例えるとPHPとWordPressのコラボです。
サザエさんとドラゴンボールがコラボして「サザエさんボール」とか面白そうになる感じです。
WordPressのテンプレートタグのファイル自体はwp-includesディレクトリ(フォルダ)にあります。
そしてincludesディレクトリの中のgeneral-template.phpでテンプレートタグを使うテンプレートは、他のテンプレートを読み込むことができる処理をしてます。
header.php
作成したファイルにHTMLとWordPressのテンプレートタグを記述してテンプレートをパーツにしていきます。
まずはWordPressのヘッダー部分のテンプレートパーツです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="<?php echo get_template_directory_uri(); ?>/style.css" rel="stylesheet" type="text/css" media="all"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/admin.js"></script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
</header>
header.phpには通常のHTMLのheadとheaderまでを記述します。
そしてWordPressのパーツ化でheader.phpを作成した場合は「wp_head」をheadの閉じタグの前に記述します。
wp_headはWordPressのシステムを動かすためのものと考えてください。
プラグインで出力される情報は、この関数から出力されます。これがないとheadで読み込むスタイルやスクリプトが動作しないことがあるので必ず記述します。
add_theme_support(‘title-tag’ );
headにtitleタグがありませんが、上記の記述をfunctions.phpに記述するとHTMLのタイトルタグが出力されます。
wp_headが実行するときに_wp_render_title_tagのアクションでタイトルは出力できます。
そして例で書いてるheader.phpの記述では<div class”header-inner”>から</div>の中がheaderのコンテンツになる部分です。
これでheaderテンプレートは、他のテンプレートで<?php get header(); ?>を記述することで、headerのパーツとして読み込むことができます。
footer.php
次はfooter.phpのテンプレートパーツを読み込めるようにします。
<footer>
<div class="footer-inner">
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
フッターには、テンプレートタグのwp_footer()をbodyの閉じタグの前に記述します。
header.phpのwp_headと同じく、footer.phpにはwp_footer()を書かないと読み込むスタイルやスクリプトが動作しないことがあるので必ず記述します。
例で書いてるfooter.phpでは<div class”footer-inner”>から</div>の中がフッターのコンテンツになる部分です。
WordPressのfooter.phpの最後にはHTMLのbodyの閉じタグを書いて、その下にhtmlの閉じタグを記述します。
これで他のテンプレートで<?php get footer(); ?>を記述するとフッターの読み込みができるテンプレートパーツになります。
HTMLファイルならhtmlの開始タグも終了タグも同じファイル内に記述してますが、WordPressのテンプレートをパーツにして切り分けてるので、閉じタグが別のテンプレートにあるということがよくあるので閉じタグの迷子に注意です。
index.php/single.php
次にindex.phpとsingle.phpのテンプレートパーツを作成します。
<?php get_header(); ?>
<div class="container">
<div class="contents">
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
index.phpとsingle.phpには先に作成したheader.phpとfooter.phpをページのヘッダーとフッターにするためにWordPressのテンプレートタグで読み込みます。
<div class”contents”>から</div>はコンテンツになる部分です。
そして<div class”container”>の上にheader.phpを<?php get header(); ?>と記述して読み込み。footer.phpを<?php get footer(); ?>でテンプレートの最後で読み込むようにindex.phpとsingle.php記述します。
このときにWordPressテーマにサイドバーがある場合はsidebar.phpも<?php get sidebar(); ?>をcontainerを閉じてるタグの</div>の前に記述してsidebarのテンプレートを読み込みます。
index.phpとsingle.phpで使うテンプレートタグはサイトで共通するテンプレートを表示するためにテンプレートタグが共通してますが、それぞれコンテンツの中身は違います。
index.phpはトップページやカテゴリ、タグやエラーページなども一覧ページを生成するためのコンテンツ作成。
single.phpは記事用のコンテンツ作成になります。
コンテンツについてはデータベースから情報を読み込むWordPressのループで読み込むことになります。
sidebar.php
次にsidebar.phpのテンプレートパーツ作成です。
sidebar.phpはサイトのサイドバーになる部分のパーツです。index.phpやsingle.phpで読み込みます。
<aside id="sidebar">
<div class="sidebar-inner">
</div>
</aside>
クラス属性をつけてるsidebar-inner要素の中がサイドバーのコンテンツ作成する部分です。
sidebar.phpにはheader.phpやfooter.phpは読み込みません。なのでコンテンツが入る枠組みだけの記述です。
WordPressのテンプレートをパーツとして共通するheader.php、footer.php、sidebar.phpをテンプレートタグで読み込むとサイトの全体にテンプレートパーツが集まって一つのページになります。
WordPressのテンプレートをパラメーターで読み込む
get_header()
get_footer()
get_sidebar()
上記の3つをテンプレートパーツにしてきましたが、この3つのテンプレートタグはパラメータを受け取って任意のテンプレートを読み込むこともできます。
header.phpを例とします。
<?php get_header( $name ); ?>
(neme)の部分を指定すると、指定したheader.phpを読み込めます。
例えばheader-sazae.phpをインクルードする場合
<?php get_header( ‘sazae’); ?>
というように新たに作成したテンプレートのnameを指定して読み込むことができます。
テンプレートをパーツにしてるのでヘッダーだけを変更するときに便利です。
そしてget_header()、get_footer()、get_sidebar()と同じくテンプレートを読み込むWordPressの関数に「get_template_part」があります。
get_template_partは独自で作成したテンプレートを別のテンプレートにインクルードして使い回しがしやすく、テーマの一部をカスタマイズしたり必要なときだけ使用するコンテンツをパーツで読み込むのに便利な関数です。
get_template_part関数でインクルードする場合も気になったら読んで見てください。
関連 get_template_part関数で独自のテンプレートをインクルードする
WordPressのテンプレートパーツ作成のポイント
WordPressのテンプレートをパーツにするときにHTMLのアウトラインを作成してからだと、テンプレートパーツにしやすいです。
逆にテンプレートをパーツにして分かりづらくなってしまったときには、使用したWordPressのテンプレートタグを外してHTML構造だけに戻してみることで理解し直せることもあります。
少し先述してますが、大事なポイントは開始タグと終了タグを見失わないことです。
WordPressのテンプレートはパーツにしてるので、それぞれに作成したテンプレートにHTMLの開始タグと終了タグが分割してる部分もあります。
タグを見失なわないようにするポイントは、テンプレート作成の初めの段階で開始タグと終了タグにコメントをつけておくようにすると大丈夫です。
