/
WordPressのアイキャッチ画像関係のテンプレートタグもいくつかパターンがあります。
どんな時どれを使うか、サクッと呼び出せるWordPress関数があるか、一目でわかるように一覧にまとめました。
アイキャッチ画像関係のWordpress関数
コードと出力結果は下に掲載しています。
| . | テンプレートタグ | 初期値 | パラメータ | echo | 説明 |
|---|---|---|---|---|---|
has_post_thumbnail() | 現在の投稿 | 投稿ID | — | アイキャッチ画像が設定 されているか調べる | |
| 1 | the_post_thumbnail() | 元画像, '' | 画像サイズ オプション( class,alt等) | 不要 | 現在の投稿 img タグ付きで出力 |
| 2 | get_the_post_thumbnail() | 現在の投稿, 元画像,'' | 投稿ID, 画像サイズ, オプション( class,alt等) | 要 | img タグ付きで取得 |
| 3 | the_post_thumbnail_url() | 現在の投稿, 元画像 | 投稿ID, 画像サイズ | 不要 | 画像URLを出力 |
| 4 | get_the_post_thumbnail_url() | 現在の投稿, 元画像 | 投稿ID, 画像サイズ | 要 | 画像URLを取得 |
| 5 | get_post_thumbnail_id() | 現在の投稿 | 投稿ID | 要 | 画像IDを取得 |
画像サイズ
| . | 項目名 | 指定名 | 規定サイズ | 変更 | 切り抜き |
|---|---|---|---|---|---|
| 1 | サムネイル | thumbnail | 150x150 | 可 — 設定(メディア) | 切り抜き(crop =true) |
| 2 | 中サイズ | medium | 300x300 | 可 — 設定(メディア) | 縦横比維持(crop =false) |
| 3 | 大サイズ | large | 1024x1024 | 可 — 設定(メディア) | 縦横比維持(crop =false) |
| 4 | --※ | medium_large | 768x0 | 不可 — wp自動作成 | 縦横比維持(crop =false) |
| 5 | --※ | — | 1536x1536 | 不可 — wp自動作成 | 縦横比維持(crop =false) |
| 6 | --※ | — | 2048x2048 | 不可 — wp自動作成 | 縦横比維持(crop =false) |
| 7 | --※ | scaled | 2560x0 | 不可 — wp自動作成 | 縦横比維持(crop =false) |
| 8 | オリジナル | 半角英数, ハイフン, アンダーバー | 指定サイズ | 可 — functions.php | 縦(crop =true,false)可 |
1～3ダッシュボード設定より自由にサイズ変更可能 (thumbnailのみ切り抜き・縦横比維持の選択可能 )4～7wp自動生成の為、サイズ変更や生成停止にしたい場合はプラグイン利用を推奨7-scaledは、2560px以上の画像がアップロードされた際に作成され、元画像の代わりに表示されます。- 規定サイズは、アップロードした画像サイズ以下のみ生成されます。
- 「
large= 元画像(最大サイズの画像)」ではありません。 - 大サイズ が
1024pxのままで、800pxの画像をULした場合 large は作成されません。
この画像でlargeを指定した場合、「画像が表示されない」or「エラー」になる場合があります。 - 表示サイズに合わせて画像を作成した場合「サイズ指定をしない」or「確実に下のサイズのみ指定」をお勧めします。
- 「
後からサイズを変えても登録済の生成画像は変更(削除) されません。
生成済画像の変更(削除)には、プラグイン(Regenerate Thumbnails など) の利用等が必要となります。
1- the_post_thumbnail()
ループ内で、セレクタ付のアイキャッチ画像をデバイスサイズに合うように出力したい時に。
PHP
/* 使用方法---------------- */
<?php the_post_thumbnail(); ?>
<?php the_post_thumbnail(array(300,200)); ?> /* 指定サイズ(横,縦) */
<?php the_post_thumbnail('medium',array(alt=>画像の説明, class=>'my-img')); ?> /* サイズ,オプション */
/* 出力結果--パラメータによりサイズ、classやaltが変わります */
![]()
<img width="〇〇" height="〇〇" src="https://～～/test.jpeg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" decoding="async" fetchpriority="high" srcset="～～" sizes="(max-width: 〇〇px) 100vw, 〇〇px" />
2- get_the_post_thumbnail()
ループ外や他ページのアイキャッチ画像を、セレクタ付でデバイスサイズに合うように出力したい時に。
PHP
/* 使用方法---------------- */
<?php echo get_the_post_thumbnail(); ?>
<?php echo get_the_post_thumbnail('medium'); ?> /* サイズのみ */
<?php echo get_the_post_thumbnail(10); ?> /* 投稿IDのみ */
<?php echo get_the_post_thumbnail(10,array(300,200)); ?> /* ID,指定サイズ(横,縦) */
<?php echo get_the_post_thumbnail(10,'medium',array(alt=>画像の説明, class=>'my-img')); ?> /* ID,サイズ,オプション */
/* 出力結果--パラメータによりサイズ、classやaltが変わります */
![]()
<img width="〇〇" height="〇〇" src="https://～～/test.jpeg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" decoding="async" fetchpriority="high" srcset="～～" sizes="(max-width: 〇〇px) 100vw, 〇〇px" />3- the_post_thumbnail_url()
ループ内外どちらでも、アイキャッチ画像URLを出力したい時に。(画像を出力する場合はimgタグが必要)
PHP
/* 使用方法---------------- */
<img src="<?php the_post_thumbnail_url(); ?>" alt="">
<img src="<?php the_post_thumbnail_url('medium'); ?>" alt=""> /* サイズのみ */
<img src="<?php the_post_thumbnail_url(10); ?>" alt=""> /* 投稿IDのみ */
<img src="<?php echo the_post_thumbnail_url(10,array(300,200)); ?>" alt=""> /* ID,指定サイズ(横,縦) */
/* 出力結果--パラメータにより出力サイズが変わります */
<img src="https://～～/test.jpeg" alt="">4- get_the_post_thumbnail_url()
ループ内外どちらでも、アイキャッチ画像URLを取得したい時に。(画像を出力する場合はimgタグの記述が必要)
PHP
/* 使用方法---------------- */
<?php get_the_post_thumbnail_url(); ?>
<?php get_the_post_thumbnail_url('medium'); ?> /* サイズのみ */
<?php get_the_post_thumbnail_url(10); ?> /* 投稿IDのみ */
<?php get_the_post_thumbnail_url(10,array(300,200)); ?> /* ID,指定サイズ(横,縦) */
/* 取得情報--パラメータにより取得サイズが変わります */
https://～～/test.jpeg5- get_post_thumbnail_id()
ループ内外どちらでも、アイキャッチ画像のIDを取得。
あまり使う機会は無いかと思いますが、投稿IDから画像IDを取得してあれこれしたい時に。
PHP
/* 使用方法---------------- */
<?php get_post_thumbnail_id(); ?>
<?php get_post_thumbnail_id(10); ?> /* 投稿ID指定 */
/* 取得情報 */
画像ID【Tips】 アイキャッチ画像の出力
現在、サイトはレスポンシブが主流ですよね。
サイトスピードを考えると、PC用の大きな画像をスマホに使用するのは論外 !
未だにアイキャッチ画像は get_the_post_thumbnail_url() で、というサイトがあります。
確かに出力コードは短くなりますが、プラグインを使うか<picture>で設定しないとレスポンシブ対応はできません。
get_the_post_thumbnail() だと、出力されるコードは長くなります。
が、画像情報をsrcsetで書き出すため、ブラウザ側が勝手にデバイスに合わせたサイズの画像を表示してくれます。
「デバイスごとに違う画像を使う」といった特別な理由がなければ get_the_post_thumbnail() をお勧めします。