閉じる

WordPressのthe_titleとthe_contentでタイトル・本文を表示・カスタマイズする手順と注意点

広告

WordPressで動的なウェブサイトを構築する際、最も頻繁に使用される関数がthe_title()とthe_content()です。

これらは投稿や固定ページの「タイトル」と「本文」を出力するための基本的な命令ですが、単に出力するだけでなく、出力形式をカスタマイズしたり、セキュリティに配慮した記述を行ったりすることが、プロフェッショナルなテーマ開発には欠かせません。

本記事では、これらの関数の基本的な使い方から、実務で役立つ応用的なカスタマイズ手法、そしてエンジニアが陥りやすい注意点について詳しく解説します。

目次 [ close ]
  1. WordPressにおけるタイトルと本文表示の基本
    1. the_title関数の基本的な役割
    2. the_content関数の基本的な役割
  2. the_title関数の引数とカスタマイズ
    1. 引数の構造
    2. 実践的な使用例
  3. the_content関数の特徴とフックの仕組み
    1. 自動整形機能 (wpautop)
    2. 続きを読む (moreタグ) の処理
  4. 表示と取得の使い分け (the vs get)
    1. get_ 関数との決定的な違い
    2. get_the_content使用時の注意点
  5. タイトルと本文のカスタマイズ実践
    1. 文字数制限をかけたタイトルの表示
    2. 特定の条件下でタイトルを変更する
  6. セキュリティとエスケープ処理
    1. タイトルのエスケープ
    2. 本文のエスケープ
  7. 2026年現在のブロックエディタ環境での挙動
    1. ブロック固有のスタイル
    2. サーバーサイドレンダリング (SSR) との関係
  8. トラブルシューティング：表示されない時のチェックリスト
  9. 実践：特定の文字列を自動置換する
  10. まとめ

WordPressにおけるタイトルと本文表示の基本

WordPressのテーマ開発において、投稿データを画面に表示させるためには「ループ (The Loop)」と呼ばれる仕組みを理解しておく必要があります。

ループの中でこれらの関数を呼び出すことで、WordPressは現在処理している投稿の情報をデータベースから取得し、適切なHTMLとしてレンダリングします。

the_title関数の基本的な役割

the_title()は、現在表示中の投稿や固定ページのタイトルを表示するための関数です。

この関数は、主にHTMLのh1タグやh2タグの中で使用されます。

基本的な記述例は以下の通りです。

PHP
<?php
// ループ内での基本的なタイトル表示
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        ?>
        <h2><?php the_title(); ?></h2>
        <?php
    endwhile;
endif;
?>

実行結果は、ブラウザ上に以下のように出力されます。

HTML
<!-- 出力結果 -->
<h2>サンプル投稿のタイトル</h2>

the_content関数の基本的な役割

the_content()は、投稿のメインとなる本文を出力するための関数です。

WordPressの管理画面にあるエディタ (ブロックエディタやクラシックエディタ) で入力された内容を、HTMLとして整形した状態で表示します。

PHP
<?php
// ループ内での本文表示
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        the_content();
    endwhile;
endif;
?>

この関数が実行されると、単なるテキストだけでなく、画像や埋め込み動画、段落タグ (<p>) などが適切に処理された状態で出力されます。

the_title関数の引数とカスタマイズ

the_title()には、出力を柔軟に変更するための3つの引数が用意されています。

これらを活用することで、PHP側でHTMLタグを補完することが可能です。

引数の構造

関数の定義は以下のようになっています。

the_title( $before, $after, $echo )

引数型内容デフォルト値
$beforestringタイトルの前に表示する文字列”
$afterstringタイトルの後に表示する文字列”
$echoboolその場で表示するか (true) 、値を返すか (false)true

実践的な使用例

例えば、タイトルを特定のタグで囲みたい場合、以下のように記述できます。

PHP
<?php
// タイトルの前後にHTMLタグを挿入する
the_title( '<h1 class="entry-title">', '</h1>' );
?>
HTML
<h1 class="entry-title">最新のニュース記事</h1>

このように、テンプレートファイル内でHTMLタグを直接書かずに、関数内で一括管理することができます。

ただし、可読性の観点からHTMLタグはテンプレート側に記述し、関数は値の出力のみに留めるという設計手法も一般的です。

the_content関数の特徴とフックの仕組み

the_content()は、WordPressの中でも非常に多機能な関数の一つです。

単にデータベースの post\_content カラムを表示しているだけではありません。

自動整形機能 (wpautop)

the_content()が呼び出されると、WordPress内部で「フィルターフック」が実行されます。

その代表例が wpautop です。

これにより、改行が自動的に <p> タグや <br /> タグに変換されます。

もし、この自動整形を無効化したい場合は、functions.php に以下の記述を追加します。

PHP
<?php
// 本文の自動整形 (pタグ挿入) を無効にする
remove_filter( 'the_content', 'wpautop' );

続きを読む (moreタグ) の処理

クラシックエディタ等で <!--more--> タグを使用している場合、the_content() の第一引数に「続きを読む」のテキストを指定することで、アーカイブページ等での表示を制御できます。

PHP
<?php
// 続きを読むのテキストをカスタマイズする
the_content( '記事の続きをチェックする' );
?>

表示と取得の使い分け (the vs get)

WordPressには、the_title() に対応する get_the_title() 、the_content() に対応する get_the_content() という関数が存在します。

これらの違いを正しく理解することは、バグの少ないコードを書く上で極めて重要です。

get_ 関数との決定的な違い

「the_」で始まる関数は結果を直接ブラウザに出力 (echo) し、「get_the_」で始まる関数は値を返却 (return) します。

以下の比較コードを見てみましょう。

PHP
<?php
// the_titleの場合：そのまま表示される
the_title();

// get_the_titleの場合：変数に代入できる
$my_title = get_the_title();
echo 'タイトル：' . $my_title;
?>

get_the_content使用時の注意点

ここで最も注意すべきなのは、get_the_content() はフィルターフックが適用されないという点です。

the_content() を使うとショートコードが実行され、画像も適切に表示されますが、get_the_content() で取得した文字列には、ショートコードの文字列がそのまま残っていたり、段落タグが付与されなかったりします。

もし、変数に代入しつつも the_content() と同じ整形結果を得たい場合は、以下のように記述します。

PHP
<?php
// フィルターを適用した状態で本文を取得する
$content = get_the_content();
$content = apply_filters( 'the_content', $content );
$content = str_replace( ']]>', ']]&gt;', $content );
echo $content;
?>

この処理を忘れると、ショートコードが展開されず、意図しない表示になるため注意してください。

タイトルと本文のカスタマイズ実践

実際のプロジェクトでよく使われる、表示のカスタマイズ例をいくつか紹介します。

文字数制限をかけたタイトルの表示

タイトルの長さを一定以下に制限したい場合、get_the_title() とPHPの文字列操作関数を組み合わせます。

PHP
<?php
$title = get_the_title();
$limit = 20; // 20文字で制限

if ( mb_strlen( $title ) > $limit ) {
    $title = mb_substr( $title, 0, $limit ) . '...';
}

echo '<p>' . esc_html( $title ) . '</p>';
?>

特定の条件下でタイトルを変更する

the_title フィルターフックを利用すると、テーマ内の全ての the_title() 出力を一括で制御できます。

例えば、非公開記事に「【限定】」というプレフィックスを付ける場合は以下の通りです。

PHP
<?php
function customize_post_title( $title, $id ) {
    $status = get_post_status( $id );
    if ( $status === 'private' ) {
        return '【限定】' . $title;
    }
    return $title;
}
add_filter( 'the_title', 'customize_post_title', 10, 2 );

セキュリティとエスケープ処理

WordPress開発において、セキュリティ対策は必須です。

特にユーザーが入力したデータを表示する際は、クロスサイトスクリプティング (XSS) 攻撃を防ぐための対策が必要です。

タイトルのエスケープ

the_title() 関数自体は、内部で最低限のサニタイズ処理が行われていますが、属性値の中（例えば title 属性など）で使う場合は、必ず the_title_attribute() を使用するか、エスケープ関数を通すべきです。

PHP
<!-- 推奨されない書き方 -->
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">リンク</a>

<!-- 推奨される書き方 -->
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">リンク</a>

本文のエスケープ

the_content() はHTMLタグを出力することが前提の関数であるため、esc_html() を使うことはできません（タグがすべて消えてしまうため）。

しかし、信頼できないソースからの入力を表示する可能性がある場合は、wp_kses_post() を検討してください。

これにより、投稿で使用可能な安全なHTMLタグのみを許可し、スクリプトの混入を防ぐことができます。

PHP
<?php
// 安全なタグのみを許可して本文を表示
echo wp_kses_post( get_the_content() );
?>

2026年現在のブロックエディタ環境での挙動

2026年のWordPress開発において、多くのサイトはブロックエディタ (Gutenberg) をベースに運用されています。

クラシックエディタ時代と比べ、the_content() が出力するHTMLは非常に複雑化しています。

ブロック固有のスタイル

現在の the_content() は、各ブロック（カラム、グループ、カバーなど）が必要とするインラインCSSや、ブロック間の余白を制御するHTML構造を出力します。

そのため、CSSの設計において、テーマ独自のスタイルがブロックエディタの標準スタイルと競合しないよう注意が必要です。

サーバーサイドレンダリング (SSR) との関係

カスタムブロックを使用している場合、the_content() 内でそのブロックがレンダリングされる際に、サーバー側で動的な処理が行われることがあります。

これは、PHP側で the_content フィルターを多用しすぎると、ページの読み込み速度 (TTFB) に悪影響を及ぼす可能性があることを意味します。

パフォーマンスを最適化するためには、本文の内容を書き換える重い処理は、投稿保存時 (save_post) に事前計算しておくか、フロントエンド側でJavaScriptを用いて処理するなどの工夫が求められます。

トラブルシューティング：表示されない時のチェックリスト

タイトルや本文が期待通りに表示されない場合、以下のポイントを確認してください。

  1. ループ外で使用していないか: the_post() が実行される前に呼び出すと、正しいデータが取得できません。
  2. グローバル変数の汚染: 他のクエリ (new WP_Query) を実行した後に wp_reset_postdata() を忘れると、メインループのデータが上書きされます。
  3. 空のコンテンツ: ブロックエディタで「空の段落」が残っている場合、見た目上は何も表示されませんが、HTMLソースには空のタグが出力されていることがあります。
  4. フィルターの競合: プラグインが the_content フィルターに干渉して、出力を空にしているケースがあります。

特に、カスタム投稿タイプを使用している際に表示されない場合は、投稿タイプ登録時の supports パラメータに 'title' や 'editor' が含まれているか確認してください。

PHP
<?php
// カスタム投稿タイプでタイトルとエディタを有効にする例
register_post_type( 'portfolio', [
    'supports' => [ 'title', 'editor', 'thumbnail' ],
    // その他の設定...
]);
?>

実践：特定の文字列を自動置換する

実務でよくある要望として、「本文中の特定のキーワードに自動でリンクを貼る」「特定の単語を装飾する」といったものがあります。

これは the_content フィルターを使えば簡単に実装可能です。

PHP
<?php
function add_internal_link_to_content( $content ) {
    $target_word = 'WordPress';
    $replacement = '<a href="https://wordpress.org">' . $target_word . '</a>';
    
    // 文字列を置換
    $content = str_replace( $target_word, $replacement, $content );
    
    return $content;
}
add_filter( 'the_content', 'add_internal_link_to_content' );

このコードを functions.php に追加すると、サイト全体の本文内にある「WordPress」という単語がすべて公式サイトへのリンクに変わります。

ただし、HTMLタグ内の属性値（imgタグのalt属性など）まで置換してしまわないよう、正規表現を用いるなど精度を高める工夫が必要になる場合もあります。

まとめ

the_title() と the_content() は、WordPressサイトの根幹を支える非常に重要な関数です。

基本は単純な出力関数ですが、その裏側にあるフィルターフックの仕組みや、get_ 系関数との違いを深く理解することで、より高度なサイト制作が可能になります。

特に、2026年現在のモダンな開発環境では、ブロックエディタとの親和性やセキュリティ、表示速度への影響を常に考慮しなければなりません。

本記事で紹介したカスタマイズ手法やエスケープ処理を適切に組み合わせ、安全で柔軟なテーマ開発を心がけましょう。

最後に、これらの関数を使用する際は常に「その出力がユーザーにとって最適か」「アクセシビリティやSEOの観点から適切なHTML構造になっているか」を自問自答することが、質の高いウェブサイト制作への第一歩となります。

クラウドSSLサイトシールは安心の証です。

URLをコピーしました！