【WordPress】alt属性を自動で記事タイトルに設定する【プラグインなし】

技術記事
【WordPress】alt属性を自動で記事タイトルに設定する【プラグインなし】

WordPressで画像のalt属性（代替テキスト）をプラグインを使わずに一括で記事タイトルに変更する方法を紹介します。

WordPressでの代替テキストの設定について

Webサイトの画像のalt属性は、設定することで検索エンジンに画像の内容をより正確に伝えることができます。WordPressでは画像のalt属性は「代替テキスト」により設定されます。

代替テキストを設定するには以下の2パターンの標準的な方法があります。

代替テキストを設定する方法
  • 画像アップロード時に設定する
  • 各記事の画像ブロックで直接設定する

画像アップロード時に代替テキストを設定する方法

画像アップロード時に代替テキストを設定した場合、メディアライブラリの画像ファイルにも代替テキストが保存されます。その後各記事で画像を貼った時に、アップロード時の代替テキストが自動で適用されます。

各記事の画像ブロックで代替テキストを設定する方法

この方法は注意が必要です。

画像アップロード時に代替テキストを設定せずに、各記事の画像に個別に代替テキストを設定した場合、メディアライブラリにはその代替テキストが保存されません。つまり、画像を他の記事に添付したい場合はまた代替テキストを設定する必要があります。

また、両方で共通する注意点として、後からメディアライブラリで代替テキストを変更した場合、各記事に添付されている画像の代替テキストは変更されません。

空のalt属性を変更する方法

既に各記事に画像を大量にアップロードしている場合、空のalt属性を1つ1つ修正していくのには時間が掛かります。しかし、alt属性のために余計なプラグインを入れるとかえって重くなったりするので避けたいところです。

応急処置として、alt属性が空の場合に自動で文字列を挿入できないか調べてみます。すると、有用そうなブログ記事を発見したのでそこに載っていたコードを若干改良してみました。

以下のコードをfunctions.phpに貼り付けることで動作します。

functions.php
 1function my_set_img_alt_title( $content ) {
 2  global $wpdb;
 3  if ( preg_match_all( '/<img [^>]+alt=""[^>]+>/i', $content, $images ) ) {
 4    foreach( $images[0] as $image ) {
 5      if ( preg_match( '/src=[\'"]([^\'"]+)[\'"]/i', $image, $src ) ) {
 6        if ( preg_match( '/([^\/]+?)(-e\d+)?(-\d+x\d+)?(\.\w+)?$/', $src[1], $file ) ) {
 7          $attachiment_id = (int)$wpdb->get_var( $wpdb->prepare( "SELECT ID FROM {$wpdb->posts} WHERE post_name=%s", $file[1] ) );
 8          if ( $attachiment_id ) {
 9            $alt = get_post_meta( $attachiment_id, '_wp_attachment_image_alt', true );
10            if ( $alt === '' ){
11              $alt = get_the_title();
12            }
13            $replace = str_replace( 'alt=""', 'alt="' . esc_attr( $alt ) . '" ',  $image );
14            $content = str_replace( $image, $replace, $content );
15          }
16        }
17      }
18    }
19  }
20  return $content;
21}
22add_filter( 'the_content', 'my_set_img_alt_title' );

画像のalt属性が空だった場合は、メディアライブラリの代替テキストを取得します。更に改良点として、メディアライブラリの代替テキストも空だった場合に記事のタイトルを取得しalt属性に設定するように手を加えました。

このコードではあえてalt属性を設定したくない画像にも記事タイトルが設定されてしまうためご注意ください。

alt属性に記事タイトルを入れるのはあくまで応急処置的な処置なので、後々ちゃんと個別に設定していった方がベターですね。以上で記事を終わりにします。

参考文献