Web反響ラボ

  • 投稿日

【プロが厳選】Web制作で多用するWordPress必須テンプレートタグ一覧

【プロが厳選】Web制作で多用するWordPress必須テンプレートタグ一覧

Web制作やコーディングの現場でオリジナルテーマを構築する際、欠かせない存在となるのがWordPressの「テンプレートタグ」です。

テンプレートタグを利用することで、記事タイトルや本文、投稿日、アイキャッチ画像などの情報を簡単に取得・表示できるほか、共通パーツの管理やページごとの表示切り替えなども効率的に実装できます。

一方で、WordPressには数多くのテンプレートタグが用意されているため、「どのタグから覚えればよいのか分からない」「似たような名前のタグが多く、使い分けに迷う」と感じることも少なくありません。

本記事では、Web制作やコーディングの現場で多用される、WordPressの必須テンプレートタグを厳選して紹介します。それぞれの役割や基本的な使い方に加え、実務で活用される場面や保守性・セキュリティを考慮した実装方法についても解説します。

WordPressテーマ制作の基礎を整理したい方から、制作効率の向上や品質担保を目指す方まで参考になる内容です。

サンゼンデザインへの
お問い合わせはこちら

目次　- Index -

18090文字

読み終わる時間の目安：約31分

WordPressテンプレートタグとは？

 WordPressには、記事やカテゴリ、投稿日時、URLなど、サイト内の様々な情報を取得・表示するための「テンプレートタグ」が用意されています。

PHPだけでも同様の処理を書けますが、テンプレートタグを利用することでWordPress本来の機能を最大限活かしながら、安全かつ効率的に開発できます。

例えば、以下のような処理はすべてテンプレートタグだけで簡単に実装できます。

  • 記事タイトルを表示する
  • 投稿日を表示する
  • アイキャッチ画像を表示する
  • 共通ヘッダーを読み込む
  • サイトURLを取得する

テンプレートタグの役割

WordPressのテンプレートタグは、データベースに保存されている情報を取得・表示するための専用関数です。コーディングにおいて、記事情報やサイト情報、ユーザー情報などを動的に出力する役割を担っています。

通常のHTMLサイトでは、タイトルや本文、画像などを各ページに直接記述します。しかし、WordPressでは投稿や固定ページの内容はデータベースで管理されているため、その情報を画面へ表示するための「橋渡し役」としてテンプレートタグが利用されています。

例えば、記事タイトルを表示する場合、HTMLだけでは投稿ごとに内容を書き換える必要があります。一方、WordPressでは次のようにテンプレートタグをループ内で記述するだけで、その投稿に登録されているタイトルが自動的に表示されます。 

<?php the_title(); ?>

同様に、記事本文や投稿日、アイキャッチ画像、カテゴリ、投稿者名なども専用のテンプレートタグを使用することで取得・表示できます。

<?php the_content(); ?> /* 記事本文 */

<?php the_time('Y.m.d'); ?> /* 投稿日 */

<?php the_post_thumbnail(); ?> /* アイキャッチ画像 */

<?php the_category(); ?> /* カテゴリ */

<?php the_author(); ?> /* 投稿者名 */

これらはページごとに異なる情報を自動で表示するため、1つのテンプレートファイルを使い回すだけで多数のページを管理できるようになります。

WordPressがCMS（コンテンツ管理システム）として高い利便性を持つ理由の一つも、この仕組みにあります。

テンプレートタグを使用するメリット

テンプレートタグを活用することで、次のようなメリットがあります。

  • 投稿や固定ページの情報を自動で取得・表示できる
  • 1つのテンプレートで複数のページを管理できる
  • ヘッダーやフッターなどの共通パーツを一元管理できる
  • コードの重複を減らし、保守性を向上できる
  • WordPress標準機能との互換性を保ちやすい
  • 更新作業の効率化につながる
  • テーマ全体の再利用性や拡張性を高められる

単に情報を表示するための関数ではなく、「管理のしやすさ」「保守性」「拡張性」を支える重要な役割を持つ仕組みであることが、テンプレートタグの大きな特徴です。WordPressテーマ制作では、これらの役割を理解したうえで適切なテンプレートタグを選択することが、品質の高いWebサイト構築につながります。

the_○○()とget_○○()の違い

WordPressのテンプレートタグには、the_○○() と get_○○() の2種類が用意されているものが数多くあります。

代表的な例として、記事タイトルを扱う場合には the_title() と get_the_title()、記事本文には the_content() と get_the_content() のように、似た名前のテンプレートタグが存在します。

名前は似ていますが、それぞれの役割は異なります。

この違いを理解しておくことで、実装の幅が広がり、保守性の高いコードを書くことにもつながります。

the_○○()は「取得して、そのまま表示する」タグ

the_○○() は、WordPressが保持しているデータを取得し、その場で画面へ出力するテンプレートタグです。

例えば、ループ内で記事タイトル（「WordPressテンプレートタグとは？」とする）を表示する場合は次のように記述します。

<h2><?php the_title(); ?></h2>

ブラウザには以下のように表示されます。

<h2>WordPressテンプレートタグとは？</h2>

HTMLへそのまま出力するだけであれば、the_○○() を使用するケースが一般的です。

get_○○()は「値だけ取得する」タグ

一方、get_○○() は値を画面へ表示せず、PHPの変数として取得します。

例えば記事タイトルを取得する場合は次のようになります。

$title = get_the_title();

この時点ではブラウザには何も表示されません。

取得した値は自由に加工したり、条件分岐に利用したりできます。

$title = get_the_title();

echo esc_html( strtoupper( $title ) );

// $title に格納されている文字列をすべて大文字に変換します。

あるいは、文字数を制限した表示もできます。

$title = get_the_title();

echo esc_html( mb_strimwidth( $title, 0, 30, '…' ) );

// $title に格納されている文字列を半角換算で30文字分の幅に収まるように切り詰め、はみ出した場合は末尾に … を付加する

このように、一度変数へ格納できることが get_○○() の大きな特徴です。

実務における使い分けの目安

テンプレートタグは用途によって使い分けることが重要です。

使用場面適したタグ理由
そのまま表示するthe_○○()コードを簡潔に記述できるため
値を加工して表示するget_○○()変数へ格納して自由に処理できるため
条件分岐で使用するget_○○()値の有無を判定しやすいため
エスケープ処理を行うget_○○()出力前に esc_html() や esc_url() を適用できるため
APIやJavaScriptへ値を渡すget_○○()データとして扱いやすいため

実務ではどちらを選ぶべきか

the_○○() と get_○○() は優劣があるわけではなく、用途に応じて使い分けることが重要です。

シンプルに情報を表示するだけであれば the_○○() で十分対応できます。

一方、データの加工や条件分岐、エスケープ処理を行う場合には get_○○() の方が柔軟に実装できます。

近年のWordPressテーマ開発では、セキュリティや保守性を考慮し、get_○○() で値を取得し、適切なエスケープ処理を行ってから出力するという書き方が採用される場面が増えています。

それぞれの役割を理解して使い分けることで、可読性が高く、安全性にも配慮したコードを書きやすくなります。

サイトの骨格を支える基本のタグ

WordPressテーマは、ヘッダーやフッター、サイドバーなどの共通パーツを組み合わせて構成されています。これらの共通パーツを効率的に管理するために用意されているのが、サイトの骨格を支える基本的なテンプレートタグです。

もしすべてのページに同じHTMLを直接記述した場合、ヘッダーやフッターを変更するたびに、すべてのファイルを修正しなければなりません。ページ数が多いサイトでは、修正漏れや管理コストの増加につながる可能性があります。

一方、テンプレートタグを利用すると、共通部分を1つのファイルとして管理できるため、修正作業の効率化や保守性の向上が期待できます。

ここでは、WordPressテーマ制作で特に使用頻度の高い4つのテンプレートタグを紹介します。

get_header()

get_header() は、ヘッダーファイル（header.php）を読み込むためのテンプレートタグです。

WordPressテーマでは、サイトロゴやグローバルナビゲーション、<head> タグ内の情報など、多くのページで共通となる内容を header.php にまとめて管理します。

各テンプレートファイルでは、次のように記述するだけでヘッダーを読み込めます。

<?php get_header(); ?>

このコードを記述すると、header.php の内容がその位置に展開されます。

例えばトップページや固定ページ、投稿ページなど、それぞれ異なるテンプレートを使用していても、ヘッダーは共通の header.php が読み込まれるため、サイト全体で統一したデザインやナビゲーションを維持できます。

別のヘッダーを読み込むことも可能

ページによって異なるヘッダーを表示したい場合は、引数を指定できます。

<?php get_header('news'); ?>

この場合は、header-news.phpが読み込まれます。
例えば、用途に応じて使い分けることができます。

  • 採用ページ専用ヘッダー
  • ランディングページ専用ヘッダー
  • キャンペーンページ専用ヘッダー

get_footer()

get_footer() は、フッターファイル（footer.php）を読み込むテンプレートタグです。

<?php get_footer(); ?>

このコードを記述すると、footer.php の内容が読み込まれます。
フッターには次のような情報を配置するケースが一般的です。

  • フッターメニュー
  • お問い合わせ情報
  • SNSリンク
  • コピーライト
  • JavaScriptの読み込み
  • wp_footer()

JavaScriptを適切な位置で読み込める

WordPressでは、JavaScriptはページの最後で読み込むことが推奨されています。
そのため、多くのテーマでは<?php wp_footer(); ?>が footer.php 内に記述されています。
これにより、プラグインが必要なJavaScriptも自動で読み込まれる仕組みになっています。

別のフッターを読み込む場合

<?php get_footer('contact'); ?>

この場合、footer-contact.phpを読み込みます。
お問い合わせページだけ異なるフッターを表示したい場合などに利用されます。

get_sidebar()

get_sidebar() は、サイドバー（sidebar.php）を読み込むテンプレートタグです。

<?php get_sidebar(); ?>

ブログサイトでは非常によく利用されています。
サイドバーには次のようなコンテンツが配置されることが一般的です。

  • カテゴリ一覧
  • 人気記事ランキング
  • 新着記事
  • 検索フォーム
  • バナー
  • プロフィール
  • アーカイブ一覧

これらを sidebar.php にまとめておくことで、ブログ一覧や記事ページなど複数のページで共通利用できます。

複数のサイドバーにも対応

用途に応じて別のサイドバーを表示することもできます。

<?php get_sidebar('blog'); ?>

sidebar-blog.phpが読み込まれます。
例えば、ページごとに異なるサイドバーを管理できます。

  • ブログ専用
  • ショッピングページ専用
  • 採用ページ専用

home_url()

home_url() は、サイトのトップURLを取得するテンプレートタグです。

WordPressテーマではリンク先を記述する場面が数多くありますが、URLを直接入力するのではなく、home_url() を利用する方法が一般的です。

基本的な使い方は次のとおりです。

<a href="<?php echo esc_url( home_url() ); ?>">トップページ</a>

これにより、現在のサイトURLが自動的に取得されます。

home_url()を利用するメリット

・URLを直接記述する必要がない

例えば、https://example.comをHTMLへ直接記述すると、

開発環境→テスト環境→本番環境

と移行するたびにURLを書き換える必要があります。

一方、home_url()を利用すれば、WordPressに設定されているサイトURLが自動で取得されるため、環境が変わってもコードを修正する必要がありません。

・内部リンクを安全に作成できる

お問い合わせページ（urlをcontactにした場合）へのリンクを作成する場合は、次のように記述します。

<a href="<?php echo esc_url( home_url('/contact/') ); ?>">お問い合わせ</a>

固定URLを記述するよりも管理しやすく、URL変更にも柔軟に対応できます。

エスケープ処理との組み合わせが基本

home_url() はURLを取得する関数のため、出力時には esc_url() と組み合わせる書き方が一般的です。
WordPressのコーディング規約でも、URLを出力する際はエスケープ処理を行うことが推奨されています。

記事情報を表示する「ループ」内の必須タグ

WordPressでは、投稿一覧ページやブログ詳細ページなどで記事情報を表示する際に、「ループ」と呼ばれる仕組みを利用します。

ループとは、WordPressがデータベースから取得した投稿データを1件ずつ読み込み、その情報を画面へ表示するための処理です。記事タイトルや本文、投稿日、カテゴリ、アイキャッチ画像など、多くのテンプレートタグはループ内で使用することを前提としています。

例えば、新着記事一覧を表示する場合は、次のようなコードが基本形になります。

<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
    <!-- 投稿情報を表示 -->
  <?php endwhile; ?>
<?php endif; ?>

have_posts() は投稿の有無を確認し、the_post() は投稿データを現在の投稿としてセットする役割があります。

このループ内で the_title() や the_content() などのテンプレートタグを使用することで、その投稿に登録されている情報を取得・表示できます。

このループ内で使用する、使用頻度の高いテンプレートタグを紹介します。

the_title()

the_title() は、投稿や固定ページのタイトルを表示するテンプレートタグです。

最も使用頻度の高いテンプレートタグの一つであり、ブログ一覧や詳細ページ、関連記事など、ほぼすべてのテーマファイルで利用されています。

基本的な使い方

<h2><?php the_title(); ?></h2>

記事タイトル（「WordPressテンプレートタグとは？」とする場合）

ブラウザには以下のように表示されます。

<h2>WordPressテンプレートタグとは？</h2>

タイトルは管理画面で入力した内容がそのまま表示されます。

使用される場面

  • ブログ一覧
  • 投稿詳細ページ
  • 新着記事一覧
  • 関連記事
  • 人気記事ランキング
  • カスタム投稿一覧

WordPressサイトでは、記事タイトルを表示しないページの方が少ないため、テーマ制作では最も使用頻度が高いテンプレートタグの一つといえます。

the_content()

the_content() は、記事本文を表示するテンプレートタグです。
WordPressのブロックエディターやクラシックエディターで入力した内容が、そのまま出力されます。

<?php the_content(); ?>

the_content()の特徴

the_content() は本文を表示するだけではありません。
WordPress内部でさまざまな処理が自動的に行われます。

例えば、以下の内容も自動で適用されます。

  • 改行の変換
  • 段落の自動生成
  • ブロックエディターの表示
  • YouTube埋め込み
  • ショートコード展開
  • プラグインのフィルター処理

そのため、投稿本文を表示する場合は基本的に the_content() を使用します。

一覧ページでは抜粋を表示するケースも多い

記事一覧では本文すべてではなく、抜粋を表示するケースが一般的です。

その場合は

<?php the_excerpt(); ?>

が利用されます。

抜粋文は以下の優先順位で表示されます。

  1. 抜粋欄に入力がある場合
    投稿編集画面の「抜粋」に入力された文章が表示されます。
  2. 抜粋欄が空の場合
    本文の冒頭から自動で110文字（英語は55語）が抽出されます。
    ※WP Multibyte Patch等のマルチバイト対応プラグイン有効時
  3. 省略記号
    文字数制限を超えた場合、末尾に「[…]」が自動的に付与されます。

用途に応じて使い分けることで、読みやすい一覧ページを作成できます。

the_time()

the_time() は、投稿日時を表示するテンプレートタグです。

<?php the_time( 'Y.m.d' ); ?>
/* 表示例　2026.07.21 */

日付フォーマットを自由に変更できる

PHPの日付フォーマットを利用するため、さまざまな表示方法に対応しています。

<?php the_time('Y/m/d' ); ?>
/* 表示例　2026/07/21 */

<?php the_time( 'Y年n月j日' ); ?>
/* 表示例　2026年7月21日 */

更新日を表示したい場合は the_modified_time() を利用します。

企業サイトでは更新日を表示するケースも増えており、SEOの観点からも活用されています。

the_category()

the_category() は、投稿に設定されているカテゴリを表示するためのテンプレートタグです。

ブログ記事やお知らせなどの投稿では、カテゴリを設定して記事を分類することが一般的です。the_category() を使用すると、現在表示している投稿に紐づくカテゴリ名を自動で取得し、画面に表示できます。

カテゴリはユーザーが記事を探しやすくする役割だけでなく、サイト全体の構造を整理するうえでも重要な要素です。そのため、ブログ一覧や記事詳細ページ、新着記事一覧など、さまざまな場面で利用されています。

最も基本的な書き方は以下のとおりです。

<?php the_category(); ?>

カテゴリが複数設定されている場合は、すべてのカテゴリが表示されます。

区切り文字を指定できる

the_category() の引数には区切り文字を指定できます。

<?php the_category(', '); ?>
/* 表示例 WordPress, PHP, HTML */

スラッシュ区切りにする場合は、

<?php the_category(' / '); ?>
/* 表示例 WordPress / PHP / HTML */

デザインに合わせて区切り文字を変更できるため、一覧ページや記事詳細ページなどで使い分けられています。

親カテゴリだけ表示したい場合

制作現場では、子カテゴリまで表示するのではなく、親カテゴリのみを表示したいという要件もよくあります。

例えば、

WordPress
　└ テンプレートタグ

というカテゴリ構成の場合、一覧ページでは「WordPress」のみ表示したいケースがあります。

このような場合は the_category() ではなく、get_the_category() を使用してカテゴリ情報を取得し、親カテゴリかどうかを判定します。

<?php
$categories = get_the_category();
if (! empty($categories)) {
  if ( $categories[0]->parent ) {
    echo esc_html( get_category( $categories[0]->parent )->cat_name );
  } else {
    echo esc_html( $categories[0]->cat_name );
  }
}
?>

このように get_the_category() を組み合わせることで、表示方法を柔軟にカスタマイズできます。

カテゴリ未設定の記事への対応

カテゴリが設定されていない投稿では、配列の先頭を直接取得しようとするとエラーが発生する可能性があります。

例えば、次のようなコードです。

$category = get_the_category()[0];

カテゴリが存在しない場合は、

Undefined array key 0

というエラーが表示されます。

そのため、実務では empty() や ! empty() を使用して、カテゴリが存在することを確認してから処理を行う書き方が一般的です。

<?php
$categories = get_the_category();
if (! empty($categories)) {
  echo esc_html( $categories[0]->cat_name );
}
?>

このように記述することで、カテゴリ未設定の記事にも安全に対応できます。

the_post_thumbnail()

the_post_thumbnail() は、アイキャッチ画像を表示するテンプレートタグです。

ブログ一覧や関連記事、詳細ページなどで頻繁に使用されます。

<?php the_post_thumbnail(); ?>

サイズを指定する

WordPressには標準サイズが用意されています。

<?php the_post_thumbnail( 'thumbnail' ); ?>

<?php the_post_thumbnail( 'medium' ); ?>

<?php the_post_thumbnail( 'medium_large' ); ?>

<?php the_post_thumbnail( 'large' ); ?>

<?php the_post_thumbnail( 'full' ); ?>
  • ‘thumbnail’
    初期設定 150×150px（正方形にトリミング）
  • ‘medium’
    初期設定 最大300×300px
  • ‘medium_large’
    幅768px（高さは制限なしで縦横比を維持）
  • ‘large’
    初期設定 最大1024×1024px
  • ‘full’
    アップロードした元のサイズ

アイキャッチ画像がない場合の対応

アイキャッチ画像が設定されていない投稿も存在します。

そのまま表示すると画像が表示されず、レイアウトが崩れる原因になるため、実務では has_post_thumbnail() と組み合わせて使用するケースが一般的です。

<?php if ( has_post_thumbnail() ) : ?>
  <?php the_post_thumbnail( 'large' ); ?>
<?php else : ?>
  <img src="<?php echo esc_url( get_template_directory_uri() . '/assets/img/noimage.jpg' ); ?>" alt="NoImage">
<?php endif; ?>

このように記述することで、アイキャッチ画像が登録されていない場合でも、代替画像（No Image画像）を表示できます。

if文との組み合わせは実務で頻繁に利用される

the_post_thumbnail() は、if 文と組み合わせて使用する場面が非常に多いテンプレートタグです。

例えば、アイキャッチ画像が存在する場合だけ画像を表示したり、画像サイズを切り替えたり、カテゴリによって表示内容を変更したりと、さまざまな条件分岐に対応できます。

このような柔軟な実装が可能なことから、the_post_thumbnail() は単独で使用するよりも、has_post_thumbnail() や条件分岐タグと組み合わせて利用されるケースが一般的です。

SEOと運用効率を高める応用タグ

条件分岐タグ

条件分岐タグとは、現在表示しているページの種類や状況を判定し、その結果に応じて表示内容を切り替えるためのテンプレートタグです。

WordPressでは、トップページ、投稿ページ、固定ページ、カテゴリページなど、さまざまなページが同じテーマ内で管理されています。条件分岐タグを利用することで、「現在どのページを表示しているのか」を判定し、ページごとに異なるコンテンツやレイアウトを表示できます。

例えば、トップページだけメインビジュアルを表示したり、投稿ページだけ関連記事やSNSシェアボタンを表示したりといった実装ができます。テンプレートファイルを増やすことなく、1つのファイル内で表示内容を切り替えられるため、保守性や再利用性の向上にもつながります。

基本的な書き方

条件分岐タグは、PHPの if 文と組み合わせて使用します。

<?php if (条件分岐タグ) : ?>
  <!-- 表示したい内容 -->
<?php endif; ?>

例えば、トップページだけ見出しを表示する場合は次のように記述します。

<?php if ( is_front_page() ) : ?>
  <h1>トップページ限定コンテンツ</h1>
<?php endif; ?>

is_front_page() が true（トップページ）であればHTMLが出力され、それ以外のページでは何も表示されません。

代表的な条件分岐タグ

WordPressには用途に応じたさまざまな条件分岐タグが用意されています。

テンプレートタグ判定内容
is_front_page()トップページ（固定ページが表示されたトップページ）
is_home()トップページ（最新の投稿一覧が表示されたページ）
is_single()投稿詳細ページ
is_page()固定ページ
is_archive()アーカイブページ
is_category()カテゴリページ
is_tag()タグページ
is_search()検索結果ページ
is_404()404エラーページ

これらを使い分けることで、ページの種類に応じた柔軟な表示制御が行えます。

条件分岐タグを活用するメリット

条件分岐タグを活用することで、ページごとに最適なコンテンツを表示できるだけでなく、テンプレートファイルの数を増やすことなく柔軟なレイアウト設計が可能になります。

また、共通のテンプレートを使いながら表示内容だけを切り替えられるため、コードの重複を減らし、修正や機能追加にも対応しやすくなります。

WordPressテーマ制作では、ヘッダーやサイドバーの切り替え、バナーの表示制御、関連記事やCTAの表示など、さまざまな場面で利用されており、保守性と拡張性を高めるための重要なテンプレートタグといえます。

カスタムフィールドを扱うタグ

カスタムフィールドを扱うタグとは、WordPressの投稿や固定ページに登録した独自の情報を取得・表示するためのテンプレートタグです。

WordPressには、記事タイトルや本文、投稿日などの標準的な情報を管理する機能が備わっています。しかし、Webサイトによっては、それ以外の情報を管理したいケースも少なくありません。

例えば、企業サイトやECサイト、不動産サイトでは、次のような情報を投稿ごとに登録したい場面があります。

  • 商品価格
  • 商品コード
  • 営業時間
  • 所在地
  • 電話番号
  • PDF資料
  • イベント開催日
  • スタッフ名

こうした情報を管理するために利用されるのがカスタムフィールドです。

カスタムフィールドに登録したデータは、専用のテンプレートタグを利用することで、必要な場所へ自由に表示できます。

get_post_meta()

カスタムフィールドを取得する際に最もよく利用されるテンプレートタグが get_post_meta() です。

投稿IDとカスタムフィールド名を指定することで、登録されているデータを取得できます。

基本的な書き方は次のとおりです。

<?php
$price = get_post_meta( get_the_ID(), 'price', true );
echo esc_html( $price );
?>

この例では、「price」という名前のカスタムフィールドに登録された値を取得し、画面へ表示しています。

活用例

商品価格を表示する

<p>価格：
<?php
  echo esc_html( get_post_meta( get_the_ID(), 'price', true ) );
?>
円</p>

管理画面で価格を変更するだけで、Webサイトにも自動で反映されます。

PDF資料のダウンロードボタンを表示する

カスタムフィールドにPDFファイルのURLを登録している場合は、ダウンロードボタンを表示することもできます。

<?php
$pdf = get_post_meta( get_the_ID(), 'pdf', true );
if ( $pdf ) :
?>
  <a href="<?php echo esc_url( $pdf ); ?>">資料ダウンロード</a>
<?php endif; ?>

値が登録されている場合のみボタンを表示できるため、リンク切れの防止にもつながります。

ACF（Advanced Custom Fields）との関係

WordPress制作では、カスタムフィールドをより扱いやすくするために、Advanced Custom Fields（ACF） を導入するケースも多くあります。

ACFでは get_field() や the_field() を使用して値を取得できますが、保存されたデータはWordPress標準のカスタムフィールドとして管理されています。

そのため、get_post_meta() の仕組みを理解しておくと、ACFを利用する場合でもデータの取得方法や管理方法を理解しやすくなります。

保守性の高いコードを書くためのタグ

WordPressテーマは、一度制作して終わりではなく、公開後もコンテンツの追加や機能の拡張、デザインの変更など、継続的に運用されることが一般的です。そのため、「動作するコード」を書くだけではなく、「修正しやすく、安全に運用できるコード」を意識することが重要になります。

同じようなコードを複数のテンプレートに記述していると、仕様変更が発生した際にすべてのファイルを修正する必要があり、修正漏れや不具合の原因になることがあります。また、取得したデータをそのまま画面へ出力すると、セキュリティ上のリスクにつながる可能性もあります。

こうした問題を防ぐために、WordPressにはコードの再利用性や安全性を高めるためのテンプレートタグが用意されています。

ここでは、テーマ制作で特に使用頻度の高い get_template_part() と esc_html()、esc_url() の役割や活用方法について紹介します。

テンプレートパーツ：get_template_part()

get_template_part() は、共通パーツを別ファイルとして読み込むためのテンプレートタグです。

WordPressテーマでは、記事カードやCTA（行動喚起）、パンくずリストなど、複数のページで同じデザインやレイアウトを使用する場面が数多くあります。

そのような共通部分をテンプレートパーツとして切り出し、必要な場所で読み込むことで、コードの重複を減らし、保守性を高めることができます。

基本的な使い方

例えば、template-parts フォルダ内に card.php を作成した場合は、次のように読み込みます。

<?php get_template_part( 'template-parts/card' ); ?>

このコードを記述すると、template-parts/card.php の内容がその位置に読み込まれます。

記事一覧や関連記事、人気記事などで同じカードデザインを使用する場合、それぞれのテンプレートに同じHTMLを書く必要はありません。

共通パーツとして管理することで、1つのファイルを修正するだけで、すべてのページに変更内容を反映できます。

デザインの変更やHTML構造の修正が発生した場合でも、テンプレートパーツだけを修正すれば対応できます。

修正箇所が少なくなることで、更新作業の効率化や修正漏れの防止につながります。

チーム開発にも適している

テンプレートを部品ごとに分けることで、複数人での開発でも作業を分担しやすくなります。

例えば、以下のような単位で管理できるため、プロジェクト全体の見通しも良くなります。

  • ヘッダー
  • フッター
  • 記事カード
  • CTA
  • パンくずリスト

エスケープ処理：esc_html()、esc_url()

WordPressでは、取得したデータをそのまま画面へ出力せず、エスケープ処理を行ってから表示することが推奨されています。

エスケープ処理とは、HTMLやJavaScriptとして解釈される可能性がある文字を、安全な文字列へ変換する処理です。

これにより、不正なコードが実行されるリスクを軽減できます。

esc_html()の例

esc_html() は、HTMLとして表示する文字列を安全に出力するための関数です。

例えば、記事タイトルやカスタムフィールドなどのテキストを表示する際によく利用されます。

<?php echo esc_html( get_the_title() ); ?>

カスタムフィールドの場合も同様です。

<?php echo esc_html( get_post_meta( get_the_ID(), 'price', true ) ); ?>

取得した値をそのまま表示するのではなく、esc_html() を通すことで、安全に画面へ出力できます。

esc_url()の例

esc_url() は、URLを安全に出力するための関数です。

リンク先のURLを表示する場合に利用します。

<a href="<?php echo esc_url( home_url( '/contact/' ) ); ?>">お問い合わせ</a>

また、カスタムフィールドで登録したPDFや外部リンクを表示する場合にも利用されます。

<a href="<?php echo esc_url( $pdf ); ?>">資料ダウンロード</a>

URLには esc_url() を使用することが、WordPressのコーディング規約でも推奨されています。

なぜエスケープ処理が必要なのか

エスケープ処理が重要とされる理由は、セキュリティ対策にあります。

例えば、ユーザーが入力した内容やカスタムフィールドのデータをそのまま表示すると、不正なHTMLやJavaScriptが実行される可能性があります。

このような攻撃は「クロスサイトスクリプティング（XSS）」と呼ばれ、Webサイトの改ざんや情報漏えいにつながる原因の一つとされています。

そのため、悪意のあるスクリプトが入力された場合でも、esc_html() を使用していれば、HTMLタグとして解釈されず、単なる文字列として表示させることができます。これにより、意図しないプログラムが実行されるリスクを抑えることができます。

WordPress公式でも推奨されている

WordPressでは、「Escape late（出力時にエスケープする）」という考え方が推奨されています。

これは、データを取得した時点ではなく、画面へ表示する直前にエスケープ処理を行うという考え方です。

出力内容に応じて適切なエスケープ関数を使用することで、安全性の高いテーマを構築できます。

WordPressテーマ制作では、記事タイトルやカスタムフィールド、URLなど、さまざまなデータを画面へ表示します。これらを安全に扱うためには、「表示する前にエスケープ処理を行う」という習慣を身に付けることが重要です。

esc_html() や esc_url() は一見すると小さな処理に思えるかもしれませんが、Webサイトの安全性や品質を支える重要な役割を担っています。

また、get_template_part() を利用したパーツの共通化と組み合わせることで、保守性・再利用性・セキュリティを兼ね備えたテーマを構築しやすくなります。これらのテンプレートタグを適切に活用することは、長期的な運用を見据えたWordPressテーマ制作において欠かせないポイントといえるでしょう。

まとめ

WordPressテーマ制作では、多くのテンプレートタグを組み合わせながらページを構築します。実務で使用されるテンプレートタグはある程度決まっており、それぞれの役割を理解することで、テーマ制作の効率やコードの品質を高めることができます。

テンプレートタグは単に情報を表示するための関数ではなく、更新しやすいテーマを構築するための基盤でもあります。適切に使い分けることで、コードの重複を減らし、保守性や再利用性を高められるだけでなく、セキュリティにも配慮したテーマ制作につながります。

WordPressは標準機能だけでも多くのテンプレートタグが用意されており、それぞれに役割があります。まずは使用頻度の高いテンプレートタグから理解を深め、実際にテーマ制作の中で活用していくことで、より柔軟で品質の高いWebサイトを構築しやすくなります。

テンプレートタグの特徴や使いどころを理解しておくことは、初心者にとってはテーマ制作の基礎固めにつながり、実務に携わる制作者にとっては開発効率や保守性の向上につながる重要な知識です。

本記事が、WordPressテーマ制作をより効率的かつ安全に進めるための参考になれば幸いです。

同じカテゴリの記事一覧
Web反響ラボTOPへ

同じカテゴリの記事

よく読まれている記事

GOTOP