WPアイキャッチ表示方法　alt属性・代替えテキスト忘れてた | 福岡のホームページ制作はマリオ君にお任せ

本日はワードプレスをオリジナルテーマで制作した場合のアイキャッチ画像表示方法とアイキャッチ画像の代替えテキストに自動で記事のタイトルをいれる方法をご紹介いたします。

正直今回の記事は書く予定がなかったのですが、急遽正直に書きます。

ちょっとタイトルから離れますが、

今までのマリオ君の記事すべてに、アイキャッチ画像にalt（代替えテキスト）入れてませんでした。

マリオ君のブログ記事はすべて一番上にアイキャッチが表示されていますがその代替えテキスト、あと一覧ページに表示されているアイキャッチ画像、トップページのアイキャッチ画像すべてにいれてませんでした。

はい。すいません。一応ホームぺージ制作会社勤務のくせに、基本の代替テキスト入れてませんでした。

そもそもなぜか、アイキャッチに代替えテキストを入れる発想すらでてきていませんでした。いいわけですが、その原因はドラッグ＆ドロップにあると思います。

基本的にブログを書く時に画像を入れる場合、僕はすべてドラッグ＆ドロップで入れています。

本文にドラッグ＆ドロップで画像を入れた時は挿入した画像をクリックしたら右側に代替えテキスト入力欄でてきますよね。

いつもドラッグ＆ドロップしたら挿入した画像をクリックして上記のALTテキストに代替えテキストをいれていました。

でも、アイキャッチにはドラッグ＆ドロップでいれただけでは代替えテキスト入力欄って出てこないんですよね。

はい。いいわけです。

アイキャッチに代替えテキストを入れる方法はドラッグ＆ドロップしたあとに、画像をクリックして、アイキャッチ画像選択画面にして代替えテキストを入れないといけません。

そんなこんなで、代替えテキスト入れてませんでした。

それで、アイキャッチに代替えテキストを毎回入れるのは手間なので、初めから記事のタイトルをいれる設定にして自動化にしたので、今回はそちらの記事となります。長くなってすいません。


それで本題ですが、今回の記事は投稿機能でアイキャッチの表示方法と代替えテキスト・記事のタイトルを自動で入れる方法をご紹介していきます。

アイキャッチ設定・表示方法

まずはアイキャッチの表示方法

funcitons.phpに下記を追加

// アイキャッチ画像を有効にする
add_theme_support('post-thumbnails');

これをfunctions.phpに記述すると投稿でアイキャッチがつかえるようになります。


それでは次に表示方法です。
下記はループの中に書いてください。

<?php the_post_thumbnail('full'); ?>

で表示できます。
fullの部分は画像のサイズを指定できます。
fullのほかには下記などがあります。

<?php the_post_thumbnail('full'); ?>
<?php the_post_thumbnail('large'); ?>
<?php the_post_thumbnail('medium'); ?>
<?php the_post_thumbnail('thumbnail'); ?>

フルが元の画像サイズでその他の3種は設定の中のメディア設定で決めているサイズで表示されます。

このままでもいいですが、画像を入れ忘れた場合などに変わりの画像を表示させたい場合は条件分岐を使って下記の様にします。

<?php if (has_post_thumbnail()) : ?>
	<?php the_post_thumbnail('full'); ?>
<?php else : ?>
	<img src="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/nosum.jpg" alt="ノーイメージ" />
<?php endif ; ?>	

言葉で説明すると、もしサムネイル画像（アイキャッチ画像）があればアイキャッチ画像を出力して、ない場合は、4行目の画像を出力

という感じに書かれています。

代替えテキストを自動で表示

いままでは、この状態で設定しアイキャッチを表示させていました。

これでは代替えテキストを毎回入力しないといけないので、自動で記事のタイトルをアイキャッチの代替えテキストに入れるように変更します。

下記になります。

<?php if (has_post_thumbnail()) : ?>
			<?php
				$post_title = get_the_title();
				the_post_thumbnail('full',array('alt' => $post_title,));
			?>
			<?php else : ?>
				<img src="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/nosum.jpg" alt="サムネイル画像no-image" />
			<?php endif ; ?>

変数にタイトルを入れて、アイキャッチ表示タグに入れて代替えテキストを表示させている感じですね。

これで、何も考えずにアイキャッチを入れるだけで代替えテキストも自動的に記事のタイトルが入ります。

はじめからこのように記述しておけばよかったですね。反省です。

以上がワードプレスでアイキャッチ画像表示方法とアイキャッチ画像の代替えテキストに自動で記事のタイトルをいれる方法でした。

自動で入れるように設定しておけばミスもなくなるし、記入も楽になるので、よかったです。

それでまた。