アイキャッチ画像を表示、取得できる関数
WordPressのアイキャッチ画像をユーザー側に表示したり取得できる関数をまとめました。
URLのみを取得したい場合やimgタグ付きで出力したい場合など、
案件によって処理が異なる場合も多々あります。
良ければ、こちらの記事を参考にしてみて下さい。
因みに、
アイキャッチを扱う場合には以下の様な関数が用意されています。
the_post_thumbnail()
get_the_post_thumbnail()
the_post_thumbnail_url()
get_the_post_thumbnail_url()
wp_get_attachment_image_src()
the_post_thumbnail()
まずは、基本のthe_post_thumbnail()からです。
こちらの関数は、imgタグとセットでアイキャッチ画像URLを出力してくれるので、
アイキャッチを簡単に表示できる便利なタグです。
このような形で出力されます。
<img width="150" height="150" src="https://deep-blog.jp/engineer/wp-content/uploads/2020/07/04-150x150.jpg" class="attachment-100x100 size-100x100 wp-post-image" alt="" />
一番オーソドックスな使い方は以下の様なコードになります。
・
・
<?php while($the_query->have_posts()):$the_query->the_post(); ?>
・
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
・
<?php endwhile; ?>
・
・
【アイキャッチの画像サイズを指定】
もし、アイキャッチの画像サイズを指定して出力したい場合は、
the_post_thumbnail("large")というように第一引数に画像サイズを指定することも出来ます。
指定できるのは、「thumbnail」「medium」「large」「full」です。
あと、array()で画像サイズを直接指定することも出来ます。
こんな感じです。
the_post_thumbnail(array(100, 100));
【altやclass、idなどを指定】
デフォルトのままだとaltが空になっています。
SEO上あまり良くないですね。
あと、imgタグにclassを指定したい場合もあります。
その場合は、第二引数に配列で指定することが出来ます。
altを指定する場合 => array("alt" => "altの内容")
classを指定する場合 => array("class" => "クラス名")
idを指定する場合 => array("id" => "ID名")
複数設定する場合は、array("alt" => "altの内容", "class" => "クラス名")のようにまとめて設定すればOKです。
例:the_post_thumbnail("thumbnail", array("alt" => get_the_title(), "class" => "sample"));
また、imgタグにスタイルを直指定したい場合は、array("style" => "max-width:500px;max-height:500px;")とすることも出来ます。
要は、第二引数には配列で指定すれば何でもOKです。
get_the_post_thumbnail()
上記で説明したthe_post_thumbnail()はimgタグを出力してしまいますが、
imgタグを一旦取得したい場合にはget_the_post_thumbnail()を利用します。
基本的な使い方はthe_post_thumbnail()と似ていますが、
こちらの関数は、第一引数に記事ID、第二引数に画像サイズ、第三引数にaltやclassなどを指定することもできます。
出力したい場合にはecho()関数で出力する処理が必要です。
echo get_the_post_thumbnail("thumbnail", array("alt" => get_the_title(), "class" => "sample"));
the_post_thumbnail_url()
the_post_thumbnail_url()関数は、アイキャッチ画像のURLのみを出力してくれる関数です。
・
・
have_posts()):$the_query->the_post(); ?>
・
・
<?php while($the_query->have_posts()):$the_query->the_post(); ?>
・
<?php if(has_post_thumbnail()): ?>
<img src="<?php the_post_thumbnail_url(); ?>" alt="<?php get_the_title(); ?>">
<?php endif; ?>
・
<?php endwhile; ?>
・
・
the_post_thumbnail_url("large")というように第一引数に画像サイズを指定することも出来ます。
指定できるのは、「thumbnail」「medium」「large」「full」です。
get_the_post_thumbnail_url()
アイキャッチ画像のURLを取得して処理を行う場合には、
get_the_post_thumbnail_url()を利用します。
出力したい場合にはecho()関数で出力する処理が必要です。
<img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?php get_the_title(); ?>">
こちらの関数は、第一引数に記事ID、第二引数に画像サイズを指定することもできます。
the_post_thumbnail($post->ID, "thumbnail");
※指定できる画像サイズは「thumbnail」「medium」「large」「full」です。
第一引数を指定しない場合には以下の様になります。
the_post_thumbnail("", "thumbnail");
wp_get_attachment_image_src()
wp_get_attachment_image_src()を使ってアイキャッチ画像のURLを取得することも出来ます。
使い方はこのような感じです。
<?php
$attach_id = get_post_thumbnail_id($post->ID);
$image = wp_get_attachment_image_src($attach_id);
?>
<img src="<?php echo esc_url($image[0]); ?>" alt="<?php get_the_title(); ?>">
こちらの関数は、第一引数に画像IDをしてします。
また、第二引数に画像サイズを指定することもできます。
the_post_thumbnail($post->ID, "thumbnail");
因みに、画像URL以外にも、横幅、高さ、真偽値(リサイズされいている場合はtrue、元のサイズの場合はfalse)を配列で取得することも出来ます。
//print_r($image)
↓
Array
(
[0] => https://deep-blog.jp/engineer/wp-content/uploads/2020/07/04-150x150.jpg
[1] => 150
[2] => 150
[3] => 1
)
この記事へのコメントはありません。