WordPressのthe_post_thumbnail(‘large’)でアイキャッチ画像を表示させると、imgタグごとの生成されてしまうのでURLのみ取得してsrc属性に入れて自由にカスタムする場合の書き方
WordPress関連記事
【WordPress】ローカル開発からサーバーへ移行に便利な「Search Replace DB」の使い方
.htaccessでhttpにアクセスされたときに自動でhttpsに「www」のあり・なし統一して301リダイレクトする
WordPressの条件分岐タグでページを判別する
WordPressの投稿記事内に外部URLのOGPを取得してカードを作る
WordPressで取得したタイトルからHTMLタグを削除するthe_title_attribute()
【WordPress】ループ内で取得したパーマリンクやタイトルを変数に入れる
【WordPress】アイキャッチ画像のURLのみ取得して属性やクラスなどを自由にカスタムする
WordPressのループ内でアイキャッチ画像を表示させる
wp_get_attachment_image_src()を使う
wp_get_attachment_image_src()
を使うと登録された画像のURLやサイズが配列で取得できます。
配列で取得できる画像URLの配列番号は変わらないので、その配列の0番を指定すれば画像URLが取得できます。
ループ内でアイキャッチ画像のURLを取得する
php
$thumbnail_id = get_post_thumbnail_id(); // アイキャッチ画像のIDを取得 $imgpath = wp_get_attachment_image_src($thumbnail_id ,'large'); // largeサイズの画像の詳細を取得 echo '<img src="' . $imgpath[0] . '" id="img1">';
まずはアイキャッチ画像のidを取得し、そのidを使って画像の詳細を取得します。wp_get_attachment_image_src($thumbnail_id ,'large');
はWordPressのループ内でアイキャッチ画像を表示させるで書いた、the_post_thumbnail('large');
のように引数で画像サイズを指定できます。
最後にimgタグ内のsrcに取得したURLを入れれば完成です。
アイキャッチ画像がない場合、別の画像を表示させる2
php
<?php if(have_posts()): while (have_posts()): the_post(); if (has_post_thumbnail()) : $thumbnail_id = get_post_thumbnail_id(); $imgpath = wp_get_attachment_image_src($thumbnail_id ,'large'); $thumb = $imgpath[0]; else : $thumb = TEMPLATEPATH . '/img/nowprinting.jpg'; endif ; ?> <img src="<?php echo thumb; ?>"> <?php endwhile; else : ?> <p>表示できる記事がありません。</p> <?php endif; ?>
下記記事の「アイキャッチ画像がない場合、別の画像を表示させる」で使ったコードとの合わせ技です。
アイキャッチ画像があるかないか調べて結果をどちらも$thumb
に格納しているのでループ内で画像URLを切り替えることができます。

コメント