【WordPress】画像に設定した代替テキストをalt属性に挿入する方法

はじめに
- 対象読者
実装
終わりに

はじめに

株式会社TOKOSのタクヤです。
今回はWordPressの固定ページや投稿のアイキャッチに設定した代替テキストを画像のalt属性に挿入する方法を説明します。

設定した代替テキストがaltに自動で挿入できるのでとても便利です。
ぜひ参考にしていただけたらと思います。

対象読者

WordPressでオリジナルテーマを作成している人
WordPressで設定した画像の代替テキストをalt属性に挿入したい人

実装

下記の流れで実装していきます。

投稿を作成
投稿に代替テキスト付きのアイキャッチ画像を設定
投稿一覧ページに一覧表示
代替テキストを画像のalt属性に挿入

なおアイキャッチが設定されていない投稿に関しては、別途設定するデフォルト画像を表示するようにします。

アイキャッチ画像の設定

アイキャッチ画像を管理画面から設定します。
画像には代替テキストを設定します。

デフォルト画像の設定

アイキャッチ画像がなかった際のデフォルト画像を設定します。
テーマによってはそういった機能がある備わっているものがあるかと思いますが、今回はオリジナルテーマなのでありません。サイト全体のデフォルト画像を設定する機能を作っていきます。

デフォルト画像を設定する機能はテーマカスタマイザーというものを使用します。
詳細な説明は省くので下記参考サイトを参考にしてください。

参考

WordPressカスタマイズ方法とカスタマイザーの使い方を解説

WEBST8のブログ

アイキャッチ画像とデフォルト画像の表示

アイキャッチ画像とデフォルト画像を表示していきます。
アイキャッチ画像があればアイキャッチ画像をそのまま表示し、なければデフォルト画像を表示するようにします。

the_post_thumbnail_url('post-thumbnail') でアイキャッチ画像を表示しています。
get_theme_mod( 'default_img' ) でテーマカスタマイザーで設定したデフォルト画像を表示します。テーマカスタマイザーの設定によって引数の値は変わります。

<?php　if(has_post_thumbnail()): ?>
  <img src="<?php the_post_thumbnail_url('post-thumbnail'); ?>"> <!-- アイキャッチ画像を表示 -->
<?php else: ?>
  <img src="<?php echo get_theme_mod( 'default_img' ); ?>"> <!-- テーマカスタマイザーで設定したデフォルト画像を表示 -->
<?php endif; ?>

alt属性に代替テキストの挿入

画像のalt属性に代替テキストを挿入していきます。

get_post_thumbnail_id( get_the_ID() ) でアイキャッチ画像のIDを取得してします。
get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true) でアイキャッチ画像の代替テキストを取得してします。代替テキストがなければ投稿のタイトルを取得するようにしています。

<?php
  if(has_post_thumbnail()):
    $thumbnail_id = get_post_thumbnail_id( get_the_ID() ); <!-- アイキャッチ画像のIDを取得しています -->
    $alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true) != '' ? get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true) : get_the_title();  <!-- アイキャッチ代替テキストを取得しています -->
?>
  <img src="<?php the_post_thumbnail_url('post-thumbnail'); ?>" alt="<?php echo $alt; ?>">
<?php else: ?>
  <img src="<?php echo get_theme_mod( 'default_img' ); ?>" alt="<?php the_title(); ?>">
<?php endif; ?>