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

はじめに

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

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

対象読者

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

実装

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

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

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

アイキャッチ画像の設定

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

デフォルト画像の設定

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

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

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

WordPressで「ここの部分だけデザインを変えたいけど、どこを触ったら良いんだろうか」と悩んでいる人もいらっしゃると思います。 ここでは、WordPressの主なカスタマイズ方法と初心者でも簡単に

webst8.com

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

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

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()):
    // アイキャッチ画像のIDを取得
    $thumbnail_id = get_post_thumbnail_id( get_the_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; ?>

さいごに

今回はWordPressの固定ページや投稿のアイキャッチに設定した代替テキストを画像のalt属性に挿入する方法を説明しました。
一度実装してしまえば使い回しができるのでとても便利です。
ぜひ参考にしてみてください。