WordPress、画像の代替テキスト・タイトル・キャプション・説明を自動入力する方法

タイトルのみ自動入力

WordPressに「メディアを追加」するとき、上記のように「タイトル」の部分には、ファイル名が自動的に入力されます。

これを、「代替テキスト」「キャプション」「説明」の部分にも自動的にファイル名が反映させる方法の解説です。

通常時はタイトルのみが自動入力される

アップロードするファイル

画像ファイル

上記のように「01_名前アイコン.jpg」というファイルをWordPressにアップロードします。

メディアを追加の画面

タイトルのみ自動入力

「01_名前アイコン.jpg」というファイルをアップロードすると、「タイトル」欄に「01_名前アイコン」と自動入力されます。

「代替テキスト」「キャプション」「説明」の部分は空欄のままです。

代替テキスト・キャプション・説明を入力する

代替テキスト・キャプション・説明も自動入力

「代替テキスト」や「キャプション」はSEO的に重要です。
Googleの検索結果に影響します。

そのため、「タイトル」とまったく同じテキストを「代替テキスト」や「キャプション」にコピー＆ペーストしている人も多いでしょう。

この作業は、functions.phpを編集することで自動化できます。

代替テキスト・キャプション・説明を自動的に入力する方法

functions.phpがあるディレクトリ

WordPressインストール先ディレクトリの下に
/wp-content/themes/xxx
のようなディレクトリがあり、その中に
functions.php
というファイルがあります。

わたしはCocoonというテーマを使用しているので、
/wp-content/themes/cocoon-child-master
というディレクトリに
functions.php
があります。

functions.phpを編集

function my_auto_alt($response, $attachment) {
  // 代替テキストを自動入力
  if (empty($response['alt'])) {
    $response['alt'] = $response['title'];
  }

  // キャプションを自動入力
  if (empty($response['caption'])) {
    $response['caption'] = $response['title'];
  }

  // 説明を自動入力
  if (empty($response['description'])) {
    $response['description'] = $response['title'];
  }

  return $response;
}
add_filter('wp_prepare_attachment_for_js', 'my_auto_alt', 10, 2);

functions.phpの末尾に上記のようなコードを追加しましょう。

画像をアップロードしたタイミングで「代替テキスト」「キャプション」「説明」にも「タイトル」と同じテキストが自動入力されるようになります。

コードの解説

wp_prepare_attachment_for_jsというのが、画像をアップロードするときに発生する処理です。

add_filter('wp_prepare_attachment_for_js', 'my_auto_alt', 10, 2);

上記により、wp_prepare_attachment_for_jsが実行されるときに、my_auto_altも追加で実行されるように設定しています。

10は優先順位。デフォルト値が10。
add_filterが複数あるときに処理順を制御するためのもの。

2は、my_auto_altの引数の数。
function my_auto_alt($response, $attachment)
のように、$response, $attachmentの２つの引数を使うので、add_filter()で4番目の引数に2を指定しています。

タイトルのテキストを編集する方法

代替テキスト・キャプション・説明も自動入力

functions.phpに前述の設定すると、「代替テキスト」「タイトル」「キャプション」「説明」を自動で入力できます。
（画像をアップロードするだけで、上記のような状態になる）

個人的なやり方として、画像のファイル名にはナンバーを振っています。
複数の画像を使うときに、アップロードする順番が分かるようにです。

しかし、このナンバーは管理者の都合によるものなので、記事には表示させたくありません。
そのため、「代替テキスト」「タイトル」「キャプション」からはナンバーを消すようにしています。

ナンバリングを自動削除

要するに、上記のような状態で「投稿に挿入」を実行しています。

この作業もfunctions.phpで自動化できます。

functions.phpを編集

function my_auto_alt($response, $attachment) {
  // 元のタイトルを変数に格納
  $title = $response['title'];

  // 先頭に 01_ などのナンバリングがついていたら除去
  $title2 = preg_replace('/^\d+_/', '', $title);

  // タイトルをナンバリング除去したものに置き換え
  $response['title'] = $title2;

  // 代替テキストを自動入力
  if (empty($response['alt'])) {
    $response['alt'] = $title2;
  }

  // キャプションを自動入力
  if (empty($response['caption'])) {
    $response['caption'] = $title2;
  }

  // 説明を自動入力
  if (empty($response['description'])) {
    $response['description'] = $title;
  }

  return $response;
}
add_filter('wp_prepare_attachment_for_js', 'my_auto_alt', 10, 2);

コードの解説

$title2 = preg_replace('/^\d+_/', '', $title);

の部分で、先頭の01_のような文字を消しています。

preg_replaceは正規表現による置き換え。
$titleから‘/^\d+_/’に一致する部分を探して”（空文字）に置き換え。

‘/^\d+_/’の/と/で囲まれた部分が正規表現。
‘/^\d+_/’の^が先頭。
‘/^\d+_/’の\d+が数字の連続。

日本語で書くと、「先頭が数字の連続で、その後にアンダースコアが続く」という正規表現です。

正規表現に一致する部分を空文字に置き換え、つまり削除しています。

まとめ

add_filter(‘wp_prepare_attachment_for_js’)を使うと、画像をアップロードした時点で、
「代替テキスト」「タイトル」「キャプション」「説明」を入力済みの状態にできます。

ブログ更新の作業効率がアップするので、
ぜひチャレンジしてみてください。