【WordPress】アイキャッチ画像のalt属性に自動で記事タイトルを設定する方法

こんにちは！Web制作エンジニアのモリヤス（@_moriyas）です。

WordPressブログの記事を作成する際に、アイキャッチ画像にaltをしっかり設定していますか？

下記の理由で設定しておくべきものになります。

今回はそのalt属性を自動的に記事タイトルと同じにする方法を解説します。

結論（コード）

<figure class="blog-thumb">
  <?php if (has_post_thumbnail()) : ?>
    <?php
      $post_title = esc_attr(get_the_title());
      the_post_thumbnail('post-thumbnail', array('alt' => $post_title,));
    ?>
  <?php endif; ?>
</figure>

※上記コードがWordPressのメインループあるいはサブループ内にあるとの前提です。

解説

2行目の「if (has_post_thumbnail()) :」で、投稿にアイキャッチ画像の設定があるかないかを確認して、ある場合にアイキャッチ画像を表示。

今回の肝となるのが、4、5行目

4行目の「$post_title = esc_attr(get_the_title());」で、投稿のタイトルを変数に代入。

5行目の「the_post_thumbnail(‘post-thumbnail’, array(‘alt’ => $post_title,));」 で、alt属性を投稿のタイトルに設定したアイキャッチ画像を表示。

といった感じです！

最後に

一般的な作り方をされたテーマであれば、管理画面からアイキャッチ画像を設定する際に、alt属性を設定できるのできます。

ですが、WordPressを普段使われていない方だと、その設定作業を忘れてしまうことなんかはよくある気がしますね。

ちょっとした気遣い！大事です！d(￣ ￣)

※altの設定方法を教えたり、マニュアルを作っておけば問題はないですがね^^;

参考記事

• the_post_thumbnail() | Function
• WordPress｜アイキャッチ画像のAlt（代替テキスト）に記事タイトルを設定する方法
• アイキャッチ画像を出力する関数「the_post_thumbnail」：WordPress関数まとめ
• WordPressのエスケープ関数。esc_html(), esc_attr() は必ず使おう！
• 画像のalt属性とアクセシビリティ