【WordPress】アイキャッチ画像のURLのみ取得して属性やクラスなどを自由にカスタムする

プロモーションが含まれています

【WordPress】アイキャッチ画像のURLのみ取得して属性やクラスなどを自由にカスタムする

WordPressのthe_post_thumbnail(‘large’)でアイキャッチ画像を表示させると、imgタグごとの生成されてしまうのでURLのみ取得してsrc属性に入れて自由にカスタムする場合の書き方

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を切り替えることができます。

WordPressのループ内でアイキャッチ画像を表示させる
WordPressのループ内でアイキャッチ画像を表示させる書き方とfunctions.phpの設定について WordPress関連記事 functions.phpの設定でアイキャッチ画像を有効にする ...

コメント

タイトルとURLをコピーしました