ページ内の画像のtitle属性を自動設定する方法

画像のtitle属性自体が検索エンジン等からどう判断されるのかは別として、せっかくある属性なので設定しておきたいものではあるものの、WordPressでは、ページ内に挿入した画像に対してtitle属性は付与されません。

そこで今回は、以下のようなことを行う方法を紹介します。

1. メディア編集画面の「キャプション」欄に何かが入力されていれば、それをtitle属性として出力
2. 1の入力ががなければ編集画面で挿入した画像の「代替テキスト」に入力があれば、その値をtitle属性として出力
3. 2の入力がなければ、投稿のタイトルをtitle属性として出力

冒頭で書いたように、title属性が俗にいうSEOに有効であるかどうかは別として、画像をマウスオーバーした際にどんな画像なのかが表示されるようになるので、簡単な説明文などを表示させたいときに使えそうな気がします。

機能を実装した表示（出力）例

メディアの「キャプション」欄に入力がある場合

「キャプション」に入力がなく「代替テキスト」欄に入力がある場合

以下は、投稿編集画面の「代替テキスト」欄に「代替テキストに入力した内容がtitle属性として出力され、マウスオーバーで表示される例」と入力しているので、それがtitle属性として出力され、画像をマウスオーバーした時にその文字列が表示される例です。

「キャプション」「代替テキスト」欄に入力がない場合

以下は同じ画像ではあるものの、「代替テキスト」欄が空（未入力）なので、投稿タイトルがtitle属性として出力され、マウスオーバー時に投稿タイトルが表示される例です。

機能追加の仕方

以下のコードを有効化しているテーマのfunctions.phpへ追加します。

function pwcn_add_title_attribute_to_image_tag($content) {
// 画像の正規表現パターン
	$pattern = '/<img(.*?)src="(.*?)"(.*?)alt="(.*?)"(.*?)>/';

// コンテンツ内の画像を取得
// PREG_SET_ORDER パターンから取得した情報(.*?)を順に配列へ格納
	preg_match_all($pattern, $content, $matches, PREG_SET_ORDER);

//ページ内の画像分だけ処理を繰り返す
	foreach ($matches as $match) {
		$srcValue = $match[2];//URL
		$altValue = $match[4];//alt属性で出力されている内容
		$cleaned_url = preg_replace('/-\d+x\d+/', '', $srcValue);//URLからサイズ情報を除去
		$id= attachment_url_to_postid($cleaned_url);//URLからIDを取得
		$description = get_post_field('post_excerpt', $id);//メディアのキャプションの値を取得
		$post_title = get_the_title();//ページのタイトルを取得

		if(!empty($description)){//メディアのキャプションがあるか
			$setumei = $description;
		}elseif(!empty($altValue)){//出力されているaltの値があるか
			$setumei = $altValue;
		}else{//どちらもなければページのタイトル
			$setumei = $post_title;
		}

// 画像タグのalt属性の後にtitle属性を追加する
	//出力するパターン
	$replacement = '<img' . $match[1] . 'src="' . $srcValue . '"' . $match[3] . 'alt="' . $altValue . '" title="' . $setumei . '"' . $match[5] . '>';
	//入れ替える
	$content = str_replace($match[0], $replacement, $content);
    }

	return $content;
}
add_filter('the_content', 'pwcn_add_title_attribute_to_image_tag');

コード使用上の注意点

WordPress6.5時点では、上記コードの形で画像タグが出力されていますが、別のバージョンなどで画像タグ内の情報出力の順序が変わった場合には、画像タグを分解して取得する部分と、title属性を付加して書き換えるパターンの部分を書き換える必要があります。

これは私の勝手な想像ですが、画像タグの構造は少なくともいくつか前のバージョンからはこの形態ですし、特に今後タグが使われることもないと思いますので問題が発生する可能性は少ないと思います。

コードのカスタマイズ方法

title属性にどの情報を出力するのかは、コード全体の中の以下の部分で書いています。

//ページ内の画像分だけ処理を繰り返す
	foreach ($matches as $match) {
		$srcValue = $match[2];//URL
		$altValue = $match[4];//alt属性で出力されている内容
		$cleaned_url = preg_replace('/-\d+x\d+/', '', $srcValue);//URLからサイズ情報を除去
		$id= attachment_url_to_postid($cleaned_url);//URLからIDを取得
		$description = get_post_field('post_excerpt', $id);//メディアのキャプションの値を取得
		$post_title = get_the_title();//ページのタイトルを取得

		if(!empty($description)){//メディアのキャプションがあるか
			$setumei = $description;
		}elseif(!empty($altValue)){//出力されているaltの値があるか
			$setumei = $altValue;
		}else{//どちらもなければページのタイトル
			$setumei = $post_title;
		}

この中の条件を変更していけば、優先順の変更が可能です。例えば、キャプションよりもaltの値を優先させたければ以下のように変更します。

if(!empty($altValue)){//出力されているaltの値があるか
	$setumei = $altValue;
}elseif(!empty($description)){//メディアのキャプションがあるか
	$setumei = $description;
}else{//どちらもなければページのタイトル
	$setumei = $post_title;
}

また、メディアのキャプションではなく画像のタイトルや説明の項目を出力対象としたい場合には以下のよう変数化して利用することでカスタマイズできます。

//メディアのタイトルの値を取得
$media_title = get_post_field('post_title', $id);

//メディアの説明の値を取得
$media_content = get_post_field('post_content', $id);

メディアのタイトルは、画像のアップロード時に自動で設定されてしまうので、恐らく変更することが少ないだろうということ、説明欄は個人的にメモのようにして使うことが多いので、本コードの出力対象から外しています。

【おまけ】jQueryでできないこともないけど．．

以下のコードをテーマのカスタムJSファイルなどに追加することで、前述のPHPコードのように動作させることもできます（当初はこれを公開するつもりでした）。

PHPと異なるのは、メディアに保存されている画像のキャプション情報を取得して利用できないのでaltまたはページタイトルという選択になる点で、書いて試してはいませんが、キャプション情報を利用すると以下のようなプロセスが必要となるので、とんでもなく長く複雑なコードになると思います。

• フロントエンドに出力されている画像のURLから、サイズ情報を外したものを管理側に一旦渡す
• そのURLからIDを取得し、キャプション情報を取得
• 取得したキャプション情報をページ内の画像ごとに返して算入する

前述したPHPで1つの関数で比較的簡単にできてしまいますから、わざわざ改変する必要もないですし、特に処理速度云々にも影響しませんから、条件付きであってもどうしてもjQueryで処理したいという方はこちらを使ってください。

/* 各画像にtitle属性を追加（altの値→ページタイトルの優先順） */
jQuery(document).ready(function($) {
  // すべての画像ブロックを取得
  var imageBlocks = $('.wp-block-image');

  // ページタイトルを取得
  var pageTitle = document.title;

  // すべての画像ブロックに対してalt属性を取得し、ない場合はページタイトルをtitle属性に設定
  imageBlocks.each(function() {
    var image = $(this).find('img');
    var altText = image.attr('alt');
    if (altText) {
      image.attr('title', altText);
    } else {
      image.attr('title', pageTitle);
    }
  });
});

結構簡単なコードで実装できますね。