採用サイト制作に最適なWordPressテーマ「ISSUE」の機能概要

ワードプレステーマ別

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 }; ?>

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事