WordPressのテーマファイルをのぞいてみると、ふだん見かけないPHPの命令がずらりと並んでいて、思わず「うっ」となった経験はないでしょうか。私もWeberNoteを立ち上げたばかりの頃は、テーマの中身がまるで暗号のように見えて、どこをいじればいいのか分からず固まっていました。
その正体の多くが「テンプレートタグ」です。記事のタイトルや本文、サイト名といった情報を、データベースから取り出して画面に表示してくれる、WordPressならではの便利な仕組みです。
この記事では、WordPressでよく使う基本的なテンプレートタグを、現行の推奨仕様にそって一覧で整理し、初心者の方が「どのタグが何を出すのか」をひと目でつかめるようにまとめました。
あわせて、文字を安全に出力するためのesc_url()やesc_html()といったエスケープの基本にも軽く触れていきます。昔の解説記事に載っている書き方の中には、今では推奨されなくなったものもあるので、その違いも分かるようにしておきました。
さらに記事の後半では、最近増えてきた「ブロックテーマ(FSE)」では、こうしたテンプレートタグの立ち位置がどう変わったのかも補足します。タグを丸暗記する必要はありません。「こういうものがあって、こんな役割を持っている」とざっくり把握しておくだけで、テーマファイルを読むハードルがぐっと下がります。長年Web制作をしてきた私が、自分がつまずいたポイントも交えながら、できるだけかみ砕いてお話ししていきますね。
そもそもテンプレートタグとは?
テンプレートタグとは、ひとことで言えばWordPressがあらかじめ用意してくれている、情報を取り出して表示するためのPHP関数のことです。テーマファイル(index.phpやheader.phpなど)の中に書いておくと、その場所に「記事のタイトル」や「サイト名」といった中身が差し込まれて表示されます。
たとえば記事のタイトルを表示したいときは、テーマファイルの該当箇所に次のように書きます。
<?php the_title(); ?>
すると、その場所に今表示している記事のタイトルが自動で出力されます。タイトルは記事ごとに違いますが、テンプレートタグを置いておけば、WordPressがページに合わせて中身を入れ替えてくれるわけです。一度仕組みを書いておけば、あとはWordPressが代わりに働いてくれる。これがテーマづくりの土台になっています。
公式の開発者向けドキュメント(テーマハンドブック)でも、テンプレートタグは「テーマ内でデータベースからコンテンツを取り出すために使う」関数として説明されています。難しく考えず、まずは「中身を呼び出す合図」くらいに捉えておけば十分です。
参考: Template Tags – WordPress Theme Handbook(公式)
関連記事:WordPressのトップページ、front-page.phpとindex.phpの違いと使い分け
サイトの基本情報を出力するタグ
まずは、サイト名やURLといった「サイト全体の基本情報」を表示するタグから確認していきます。これらはループ(後述)の外でも使えるので、header.phpなどでよく登場します。
サイトのURLを出力する
リンクを指定するときなどに使う、サイトのトップページのURLです。古い記事だとbloginfo('url')という書き方をよく見かけますが、現在はURLを安全に出力するためにhome_url()をesc_url()で囲む書き方が推奨されています。
<?php echo esc_url( home_url() ); ?>
URLを出力するときは、そのまま表示するのではなくesc_url()を通して安全な形に整える、という考え方を最初に覚えておくと安心です。エスケープについては後の章でもう少しだけ補足します。
テーマフォルダのURLを出力する
テーマフォルダ内の画像を読み込むときなどに使います。こちらも昔はbloginfo('template_url')と書いていましたが、現在はget_template_directory_uri()を使うのが一般的です。
<?php echo esc_url( get_template_directory_uri() ); ?>
サイトのタイトルとキャッチフレーズを出力する
サイト名(タイトル)と、その下に添える説明文(キャッチフレーズ)です。管理画面の「設定」→「一般設定」で入力した内容が表示されます。
<?php bloginfo('name'); ?>
<?php bloginfo('description'); ?>
ここでbloginfo()について一点だけ補足します。bloginfo()は値をその場で画面に出力する関数です。もし値をいったん変数に入れて加工したい、といった場合は、文字列を返してくれるget_bloginfo()のほうを使います。公式リファレンスでも、変数として扱いたいときはget_bloginfo()を使うよう案内されています。表示するだけならbloginfo()、PHPの中で扱いたいならget_bloginfo()、と覚えておくとよいでしょう。
スタイルシートのURLを出力する
テーマのstyle.cssのURLです。これも古いbloginfo('stylesheet_url')から、専用の関数を使う書き方に変わっています。style.cssそのもののURLが欲しいときはget_stylesheet_uri()、テーマフォルダ(子テーマを含む)のURLが欲しいときはget_stylesheet_directory_uri()を使います。
<?php echo esc_url( get_stylesheet_uri() ); ?>
なお、CSSやJavaScriptをテーマに読み込ませる場合、本来はfunctions.phpでwp_enqueue_style()などを使って登録するのがWordPress公式の作法です。ここでは「URLを取り出すタグ」として紹介していますが、実際の読み込み方法は別途おさえておくと、よりきれいなテーマになります。
参考: bloginfo() – WordPress Developer Resources(公式)
関連記事:WordPress高速化の鍵!header.phpとLCP改善完全ガイド
記事の情報を出力するタグ(ループ内で使う)
続いて、記事のタイトルや本文など「個々の記事の情報」を表示するタグです。これらは基本的に「ループ(The Loop)」と呼ばれる繰り返し処理の中でだけ正しく動くのがポイントです。
ループとは、ざっくり言うと「表示すべき記事を1件ずつ順番に取り出して処理する」WordPressの仕組みのことです。今どの記事を扱っているかをWordPressが把握している状態なので、その中でthe_title()などを呼ぶと、その記事のタイトルが取り出せる、というわけですね。公式ドキュメントでも、これらのタグはループ内で使う前提だと説明されています。
記事のタイトルを出力する
<?php the_title(); ?>
記事の本文を出力する
<?php the_content(); ?>
記事の抜粋を出力する
本文の代わりに短い抜粋を表示したいときはthe_excerpt()を使います。一覧ページなどでよく使うタグです。
<?php the_excerpt(); ?>
記事のカテゴリーを出力する
<?php the_category(); ?>
投稿日・投稿時刻を出力する
投稿日を表示するthe_date()には、ひとつ注意点があります。同じ日に複数の記事を投稿した場合、the_date()は最初の1件だけしか日付を表示しません。これは私も昔ハマったポイントで、「なぜか2件目以降の日付が消える」と悩んだ末に仕様だと気づきました。記事ごとに必ず日付を出したいときは、the_time()に日付の書式を渡す方法がよく使われます。
<?php the_date(); ?>
<?php the_time('Y年n月j日'); ?>
参考: Template Tags – WordPress Theme Handbook(公式)
関連記事:WordPressで投稿した記事の一覧(新着情報)を簡単に出力する方法
エスケープの基本だけ押さえておこう
タグの一覧の中で、URLをesc_url()で囲む書き方が何度か出てきました。この「エスケープ」という考え方は、初心者のうちはピンとこないかもしれませんが、安全なサイトを作るうえでとても大切なので、ここで少しだけ補足します。
エスケープとは、ひとことで言えば画面に出力する値を、そのまま使うのではなく「安全な形」に整えてから出す処理のことです。たとえば、悪意のあるコードが紛れ込んだ値をそのまま表示してしまうと、サイトが攻撃の足がかりにされてしまうことがあります。そこで、出力する直前に値をチェックして無害化するわけです。
よく使うエスケープ関数には、次のようなものがあります。
<?php echo esc_html( $text ); ?> // テキストとして出力
<?php echo esc_url( $url ); ?> // URLとして出力
<?php echo esc_attr( $value ); ?> // 属性値として出力
用途に応じて使い分けますが、初心者のうちは「URLを出すときはesc_url()」「自分で用意した文字をそのまま表示するときはesc_html()」という2つだけでも覚えておくと役立ちます。なお、the_title()のようにWordPressが用意した多くのテンプレートタグは、内部で適切な処理をしてくれるものも多いので、すべてを手動でエスケープする必要はありません。「外部から来た値や、自分でURLを組み立てたときは特に気をつける」くらいの意識でまずは十分です。
ブロックテーマ(FSE)が増えた今、テンプレートタグの立ち位置は?
ここまで紹介してきたテンプレートタグは、いわゆる「クラシックテーマ」と呼ばれる、PHPファイルでテーマを組み立てる方式で使うものです。長らくWordPressのテーマづくりの基本でしたが、近年は事情が少し変わってきました。
WordPress 5.9以降、「ブロックテーマ(フルサイト編集/FSE)」という新しい方式が登場しました。こちらは、ヘッダーやフッターも含めたサイト全体を、管理画面のエディター上でブロックを並べるように編集していく仕組みです。テンプレートはPHPファイルではなく、ブロックを記述したHTMLテンプレート(templatesフォルダ内の.htmlファイル)として管理されます。標準テーマの「Twenty Twenty-Five」などもこのブロックテーマです。
ブロックテーマでは、タイトルや本文の表示も、PHPのテンプレートタグではなく「タイトルブロック」「投稿コンテンツブロック」といったブロックで担うようになりました。つまり、ブロックテーマだけで完結するなら、今回紹介したPHPのテンプレートタグを直接書く場面はぐっと減ります。
では、テンプレートタグはもう不要なのかというと、そんなことはありません。クラシックテーマを使ったり、既存テーマを子テーマでカスタマイズしたりする場面では、テンプレートタグは今も現役で必要な知識です。世の中で動いているサイトには、まだまだクラシックテーマや、両方の良いところを取り入れたハイブリッド型のテーマがたくさんあります。古いテーマの修正を頼まれることもあるでしょう。
ですから、これからWordPressを学ぶ方も「ブロックテーマがあるからPHPのタグは覚えなくていい」と切り捨てるのはもったいないところです。テンプレートタグの考え方を知っておくと、ブロックがどんな情報を表示しているのかも理解しやすくなります。両方をゆるくつかんでおくのが、遠回りなようでいちばん近道だと感じています。
参考: Template Tags – WordPress Theme Handbook(公式)
まとめ:タグの役割をつかめば、テーマファイルは怖くない
テンプレートタグは、WordPressがあらかじめ用意してくれた「情報を取り出して表示するための合図」であり、その役割さえつかんでおけば、暗号のように見えたテーマファイルもぐっと読みやすくなります。
今回ご紹介した中でも、サイト名を出すbloginfo('name')、記事タイトルのthe_title()、本文のthe_content()あたりは登場頻度が高いので、まずはこのあたりから「これは何を出すタグだったかな」と思い出せるようになれば十分です。
そして、URLを出すときはesc_url()を通すといったエスケープの習慣や、古いbloginfo('url')ではなくhome_url()を使うといった現行の書き方も、少しずつ手になじませていきましょう。最初は見比べながらで構いません。
ブロックテーマが広がってきた今も、クラシックテーマや子テーマのカスタマイズではテンプレートタグの知識が役に立ちます。焦って丸暗記する必要はないので、テーマファイルを開くたびに「あ、これは前に見たタグだ」と少しずつ顔なじみを増やしていってください。それが、自分でテーマをいじれるようになる確かな一歩になります。
分からないタグに出会ったら、公式の開発者ドキュメントで名前を検索してみるのがいちばん確実です。関数名さえ分かれば、引数や戻り値、使用例まで載っているので、この記事をブックマークしておきつつ、迷ったら一次ソースで確認する——この二段構えで進めれば、テーマ編集でつまずく場面はかなり減るはずです。