TCDテーマTree：「デザインコンテンツ」の画像にaltタグを表示させる方法

Q.質問内容

固定ページにおいてテンプレート「デザインページ1」を選択時に設定できる「デザインコンテンツ」の画像にaltタグを表示させる方法を知りたいです。

▼変更箇所イメージ

A.下記の方法でカスタマイズしてください。

こちらではメディアライブラリーの「代替テキスト」で指定されているテキストを表示する方法をご案内しております。

メディアライブラリーの「代替テキスト」については、詳しくは弊社サイトにて紹介しています。

alt属性、確認していますか？その役割や適切な書き方の解説です。 – ワードプレステーマTCD

ブログ記事を書いていると内容を補足するためや、リンク先のイメージを示すために画像を挿入することがあると思います。画像を挿入時には、alt属性を正しく活用していますか？意外と見落としているケースも少なくありません。

1. altタグのテキストを指定

編集するファイル：　page-design1.php
編集する箇所：　86行目付近

          $image1 = $content['image1'] ? wp_get_attachment_image_src( $content['image1'], 'full' ) : '';
          $image2 = $content['image2'] ? wp_get_attachment_image_src( $content['image2'], 'full' ) : '';

↓$image1_alt、$image2_altを指定

          $image1 = $content['image1'] ? wp_get_attachment_image_src( $content['image1'], 'full' ) : '';
          $image1_alt = get_post_meta ( $content['image1'], '_wp_attachment_image_alt' , true );
          $image2 = $content['image2'] ? wp_get_attachment_image_src( $content['image2'], 'full' ) : '';
          $image2_alt = get_post_meta ( $content['image2'] , '_wp_attachment_image_alt' , true );

2. altタグの出力先を指定

編集するファイル：　page-design1.php
編集する箇所：　98行目付近

     <?php if($image1) { ?>
     <img class="image1 image page_animate_item" src="<?php echo esc_attr($image1[0]); ?>" alt="" title="">
     <?php }; ?>
     <?php if($image2) { ?>
     <img class="image2 image page_animate_item" src="<?php echo esc_attr($image2[0]); ?>" alt="" title="">
     <?php }; ?>

↓ alt=””に$image1_alt、$image2_altをそれぞれ挿入

     <?php if($image1) { ?>
     <img class="image1 image page_animate_item" src="<?php echo esc_attr($image1[0]); ?>" alt="<?php echo $image1_alt; ?>" title="">
     <?php }; ?>
     <?php if($image2) { ?>
     <img class="image2 image page_animate_item" src="<?php echo esc_attr($image2[0]); ?>" alt="<?php echo $image2_alt; ?>" title="">
     <?php }; ?>