the_title_attribute()とは？
WordPressのテンプレート開発において、投稿タイトルはもっとも基本的かつ重要な情報の一つです。通常、タイトルは the_title() を使って出力しますが、「HTML属性として安全に扱いたい」「カスタム属性に使いたい」といった場合には the_title_attribute() が有効です。
この関数は、投稿タイトルをHTML属性内で使える形に整形し、エスケープされた文字列として出力または取得できる関数です。本記事では the_title_attribute() の目的・使い方・出力例・注意点などを徹底的に解説します。
the_title_attribute()の基本情報
| 項目 | 内容 |
|---|---|
| 関数名 | the_title_attribute() |
| 目的 | 投稿タイトルを属性値として安全に出力・取得する |
| 返り値 | タイトル文字列（表示または取得） |
| 主な用途 | HTMLのtitle属性やdata属性など、属性値内に投稿タイトルを使いたいとき |
| エスケープ処理 | esc_attr() による属性用エスケープ |
the_title() との違い
| 関数名 | 主な用途 | エスケープ | 戻り値 | 用途 |
|---|---|---|---|---|
the_title() | タイトルの画面出力 | esc_html()（HTML用） | なし（echo） | ページ内表示（見出しなど） |
the_title_attribute() | タイトルの属性出力 | esc_attr()（属性用） | 文字列（return） | title=""やaria-label=""など |
例：
<a href="<?php the_permalink(); ?>" title="<?php echo the_title_attribute( array( 'echo' => false ) ); ?>">
<?php the_title(); ?>
</a>このように、the_title() はHTMLコンテンツ内、the_title_attribute() は属性値に向いています。
the_title_attribute()の基本的使い方
デフォルトで出力
<?php the_title_attribute(); ?>この場合、投稿タイトルが echo されます。たとえば現在の投稿タイトルが「テスト投稿」の場合：
テスト投稿※ the_title() と見た目は変わりませんが、内部的には属性向けにエスケープされています。
echo => false で値として取得
<?php
$title = the_title_attribute( array( 'echo' => false ) );
echo '<span title="' . $title . '">内容</span>';このように値として取得すれば、属性に直接埋め込む際に柔軟に使えます。
the_title_attribute()のパラメータ一覧と使い方
the_title_attribute() は配列形式の引数で複数のパラメータを指定できます。
the_title_attribute()の使用可能なパラメータ
| キー | 説明 | 初期値 |
|---|---|---|
before | 出力前に付け加える文字列 | 空文字 |
after | 出力後に付け加える文字列 | 空文字 |
echo | 出力（true）または戻り値として取得（false） | true |
post | 投稿IDまたはオブジェクト | 現在の投稿 |
the_title_attribute()の使用例
<?php
echo the_title_attribute( array(
'before' => 'タイトル：',
'after' => ' です',
'echo' => true
) );→ 出力結果例：タイトル：テスト投稿 です
the_title_attribute()の実践的な使用例
リスト項目に title 属性を付ける
<ul>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li title="<?php echo the_title_attribute( array( 'echo' => false ) ); ?>">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; endif; ?>
</ul>目的：マウスホバー時に投稿タイトルを表示（ブラウザ標準のtitle属性ツールチップ）。
アイコンに aria-label を付与してアクセシビリティ対応
<span class="icon" aria-label="<?php echo the_title_attribute( array( 'echo' => false ) ); ?>"></span>目的：スクリーンリーダーが投稿タイトルを読み上げられるようにする。
カスタム投稿でも使用可能
the_title_attribute() は投稿タイプに依存しないため、通常の投稿（post）はもちろん、固定ページ（page）やカスタム投稿タイプ（例：イベント、商品紹介）でも問題なく利用できます。
the_title_attribute()の注意点と補足
エスケープは自動で行われる
the_title_attribute() は esc_attr() によるエスケープが内部で自動適用されるため、二重エスケープに注意してください。出力する際に自分で esc_attr() をかける必要はありません。
多言語対応・i18nの配慮
WordPressは多言語化対応が前提のCMSです。カスタム属性用に the_title_attribute() を使う場合、__() や _e() を使って付加文字列を翻訳対応させるとよいでしょう。
例：
<?php
echo the_title_attribute( array(
'before' => __( 'タイトル：', 'your-textdomain' ),
'echo' => true
) );
?>the_title_attribute()のよくある質問
the_title()と併用すべき？-
用途によります。画面表示には
the_title()、HTML属性にはthe_title_attribute()と使い分けるのがベストです。 - 文字列が長すぎる場合はどうする？
-
属性に使う文字列は簡潔に保つのが理想です。必要に応じて文字数を制限する処理を加えてください：
$title = the_title_attribute( array( 'echo' => false ) ); $short_title = wp_trim_words( $title, 10, '...' );
まとめ
| ポイント | 内容 |
|---|---|
| 用途 | HTML属性（title、aria-labelなど）で投稿タイトルを安全に使う |
| 特徴 | 属性用エスケープ（esc_attr()）済みの出力 |
| 出力と取得 | echo指定で出力／echo => falseで値取得可能 |
| 利用場面 | アクセシビリティ対応、SEO強化、UIのツールチップ表示などに活用可能 |
the_title_attribute() は一見地味な関数ですが、正しく使うことでアクセシビリティやSEOの観点から大きな効果を発揮します。属性値を扱う際には the_title() ではなく the_title_attribute() を意識的に使い分けていくことが、品質の高いテーマ制作への第一歩となります。
