
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()
を意識的に使い分けていくことが、品質の高いテーマ制作への第一歩となります。