the_title_attribute()

the_title_attribute()
目次

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

初めてホームページを作成したのは1996年。
2000年よりフリーランスで主に中小企業、学校、各種公的団体、個人事業主のWordPressを活用したホームページ制作を行っています。WordPressテーマはそれぞれのクライアントに合わせて作成しています。
WordPressを活用したサイト運営のための情報発信をしていきます。

目次