WordPressで作られたサイトにおいて、本文中の画像にはaltが入っている一方で、サイドバーや人気記事一覧に表示される画像のaltが空のままになっているケースが少なくありません。
これは、テンプレート側で画像URLだけを直接出力していることが主な原因です。本記事では、既存記事も含めて自動的にaltを補完する方法を、実際のコード付きで解説します。
※なおこの記事はプラグインなしでの実装です。
目次
1.なぜサイドバー画像のaltを入れるのを忘れがちになるのか
2.alt未設定がもたらすデメリット
3.WordPressでaltを自動的に挿入する実装例
4.functions.phpを使った実装例
5.まとめ
1. なぜサイドバー画像のaltを入れるのを忘れがちになるのか
多くのテーマやカスタム実装では、以下のような書き方がされています。
$src = wp_get_attachment_url(get_post_thumbnail_id($post_id));
この方法では、WordPressメディアに保存されている「代替テキスト」や「画像タイトル」は取得されません。
その結果、altタグが空のまま出力されるケースが発生します。
2. alt未設定がもたらすデメリット
altが未設定であることの主なデメリットは、以下の3つです。
・検索エンジンが画像の意味を理解しづらくなる
・スクリーンリーダー利用者に内容が伝わらない
・内部リンク評価・UXの観点でマイナス
特に人気記事・関連記事は重要な導線であるため、alt未設定は地味に効いてくる問題です。
3. WordPressでaltを自動的に挿入する実装例
ワードプレスでは主にfunctions.phpに書くケースと直接phpファイル（例えば、page.phpやsidebar.php）に書くケースがあります。
ここでは、「人気記事一覧」や「関連記事」などテンプレート内で直接画像を出力しているファイル（例：sidebar.php）に以下のコードを追加します。
※2行目の$post_idには通常の投稿IDを渡せばよく、
今回は WordPress Popular Posts のため $rank->id を代入しています。
<?php
$post_id = $rank->id; // WordPress Popular Posts の投稿ID
$src = '';
$alt = '';
$thumbnail_id = get_post_thumbnail_id($post_id);
// アイキャッチ画像がある場合
if ($thumbnail_id) {
$src = wp_get_attachment_url($thumbnail_id);
// 代替テキスト
$alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
// altがなければ画像タイトル
if (!$alt) {
$alt = get_the_title($thumbnail_id);
}
}
// アイキャッチがない場合：記事内最初の画像
if (!$src && preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $rank->post_content, $matches)) {
$src = $matches[1][0];
$alt = $rank->title;
}
// それでもなければ no-image
if (!$src) {
$src = get_template_directory_uri() . '/img/common/no-image.jpg';
$alt = $rank->title;
}
?>
<img src="<?php echo esc_url($src); ?>" alt="<?php echo esc_attr($alt); ?>">
ポイントは、以下で、アイキャッチ画像（または特定の画像）の代替テキスト（alt属性の値）を取得しているところです。
$alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
no-image画像のaltはどうすべきか
前章では、画像がある場合にaltを自動的に挿入する方法でしたが、
画像がない場合でかつ記事への導線として表示されている場合は以下のように、記事タイトルをaltに使うのが最も自然です。
<!-- no-image対応の補足説明 -->
if (!$src) {
//no-imageを設定
$src = $template_url . '/img/common/no-image.jpg';
$alt = $rank->title;
}
4. functions.phpを使った実装例
次にfunctions.phpを使った実装例をご紹介します。
function genee_get_image_src_alt($post_id) {
$src = '';
$alt = '';
$thumbnail_id = get_post_thumbnail_id($post_id);
if ($thumbnail_id) {
$src = wp_get_attachment_url($thumbnail_id);
$alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
if (!$alt) {
$alt = get_the_title($thumbnail_id);
}
}
if (!$src) {
$src = get_template_directory_uri() . '/img/common/no-image.jpg';
$alt = get_the_title($post_id);
}
return [
'src' => $src,
'alt' => $alt,
];
}
※関数を定義した後は、テーマの任意の箇所（sidebar.phpなど）で呼び出して使います。
$image = genee_get_image_src_alt($post_id);
<img src="<?php echo esc_url($image['src']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
phpファイル直書きかfunctions.phpどちらを選ぶべきかですが、一箇所だけなら直書き、それ以外はfunctions.phpで定義し、必要に応じてimgタグ部分だけを修正したほうが良いです。
5. まとめ
この記事のコードを使えば、過去記事も含めてaltを漏れなく補完でき、SEO・アクセシビリティ両面の改善につながります。
ぜひテーマカスタマイズ時の定番実装として活用してください！