[WordPress]記事内の画像のalt属性を見出しから自動設定した（functions.php）

SEOとアクセシビリティの向上のために、WordPressの画像にalt属性を自動設定しました。
functions.phpにカスタム関数を追加して、空のalt属性に記事タイトルや見出しを設定します。

1. WordPressアイキャッチ画像の自動alt属性設定

「アイキャッチ画像だけでも alt で説明文を追加するとSEOによい」という情報を見かけました¹。

本来はアイキャッチ画像のalt属性は手動で正しく設定すべきだとは思いますが、それは大変。
とりあえずは alt属性が空の場合に、記事タイトルを自動的に入れるように設定してみます。

/** 2024-07-28 WordPressアイキャッチ画像の自動alt属性設定 */
function set_auto_alt_text_for_featured_image($html, $post_id, $post_thumbnail_id, $size, $attr) {
    // alt属性が空かどうかを確認
    if (empty($attr['alt'])) {
        // 投稿のタイトルを取得
        $post_title = get_the_title($post_id);
        
        // alt属性を追加
        $html = preg_replace('/alt=([\'"]?)([^\'"]*)\1/i', sprintf('alt="$2%s"', esc_attr($post_title)), $html);
    }
    
    return $html;
}
add_filter('post_thumbnail_html', 'set_auto_alt_text_for_featured_image', 10, 5);

このコードをfunctions.phpの末尾に追加しました。

set_auto_alt_text_for_featured_image関数が定義されます。この関数は、アイキャッチ画像のHTMLが生成される際に呼び出されます。
関数内で、現在のalt属性が空かどうかをチェックします。
alt属性が空の場合、get_the_title()関数を使用して投稿のタイトルを取得します。
正規表現を使用して、空のalt属性を投稿タイトルで置き換えます。
add_filter()を使用して、この関数をpost_thumbnail_htmlフィルターにフックします。これにより、アイキャッチ画像のHTMLが生成される際に自動的にこの関数が呼び出されます。

目次に戻る

2. アイキャッチ以外の記事内の画像についてもAlt属性を自動で入れてみた

さらに、アイキャッチ以外の記事内の画像についてもAlt属性を自動で入れようと考えました。
そこで、直前の<h2>や<h3>の文字列を参照することにしました。

function set_auto_alt_text_for_all_images($content) {
    if (!$content) {
        return $content;
    }

    // DOMDocument オブジェクトを作成
    $dom = new DOMDocument();
    libxml_use_internal_errors(true);
    
    // PHP バージョンに応じて適切な方法で HTML を読み込む
    if (defined('LIBXML_HTML_NOIMPLIED') && defined('LIBXML_HTML_NODEFDTD')) {
        $dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
    } else {
        $dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));
    }
    
    libxml_clear_errors();

    $xpath = new DOMXPath($dom);
    $elements = $xpath->query('//h2 | //h3 | //img');

    $last_heading = '';

    foreach ($elements as $element) {
        if ($element->tagName === 'h2' || $element->tagName === 'h3') {
            $last_heading = trim($element->textContent);
        } elseif ($element->tagName === 'img') {
            $alt = $element->getAttribute('alt');
            if (empty($alt)) {
                if (!empty($last_heading)) {
                    $element->setAttribute('alt', esc_attr($last_heading));
                } else {
                    $element->setAttribute('alt', esc_attr(get_the_title()));
                }
            }
        }
    }

    // 変更を適用した HTML を返す
    $newHtml = $dom->saveHTML();
    return $newHtml !== false ? $newHtml : $content;
}



// フィルターを適用
add_filter('the_content', 'set_auto_alt_text_for_all_images');

set_auto_alt_text_for_all_images関数は、WordPressの記事内容を受け取り、その中のすべての画像のalt属性を自動的に設定する役割を果たします。

まず、記事のHTMLをDOMDocumentオブジェクトに変換し、XPathを使用してh2、h3、img要素を抽出します。
関数は順番にこれらの要素を処理していき、h2またはh3タグを見つけるたびにその内容を記録します。
画像タグに遭遇すると、まずalt属性が既に設定されているかチェックし空の場合、直前に記録した見出しの内容をalt属性として設定します。
もし、適切な見出しがない場合は、記事のタイトルをalt属性として使用します。
最後に、変更を加えたHTMLを元の記事内容として返します。