【WordPressテンプレートタグ】the_post_thumbnail():アイキャッチ画像を表示

公開日: : 最終更新日:2016/03/24 テンプレートタグ

概要

記事に設定されたアイキャッチ画像を指定された大きさで表示する。
引数に、管理画面もしくはadd_image_sizeで指定したサイズを指定することで任意の大きさのアイキャッチ画像を表示できる。

書式

<?php the_post_thumbnail( 'size','attr' ); ?>

パラメーター

size
画像サイズ

  • post-thumbnail/set_post_thumbnail_size指定サイズ
  • thumbnail/管理画面「サムネイル」(初期値)
  • medium/管理画面「中サイズ」
  • large/管理画面「大サイズ」
  • full/オリジナルの画像サイズ
  • add_image_sizeで指定したID名/add_image_sizeで指定したサイズ
attr
imgタグに挿入するalt、titleなどの属性値の指定(初期値:なし)

位置

ループ内でのみ使用可能

使用例

初期設定でアイキャッチ画像を表示(初期値:thumbnail)

<?php the_post_thumbnail(); ?>

縦横150pxでアイキャッチ画像を表示

<?php the_post_thumbnail(array(150,150)); ?>

WordPress管理画面「設定」>「メディアの設定」で、あらかじめ設定しているサイズでアイキャッチ画像を表示

<?php
// サムネイル(初期値:150px x 150px(最大値))
the_post_thumbnail('thumbnail');
// 中サイズ(初期値:300px x 300px(最大値))
the_post_thumbnail('medium');
// 大サイズ(初期値:640px x 640px(最大値))
the_post_thumbnail('large');
// フルサイズ(オリジナルの画像サイズ)
the_post_thumbnail('full');
?>

投稿にアイキャッチ画像が登録されているかどうかを判別し、アイキャッチ画像がない場合は代替画像を表示

<a href="<?php the_permalink(); ?>">
<?php if(has_post_thumbnail()) :
the_post_thumbnail();
else :
echo '<img src="' .get_template_directory_uri() .'/images/default.png' ) .'" alt="" />';
endif; ?>
</a>
yaji_w200h50
<a href="<?php the_permalink(); ?>">
<img src="http://kajico.kajilabo.net/wp-content/themes/kajico/images/default.png" alt="" />
</a>

MEMO

アイキャッチ画像の新しいサイズを登録したい場合:add_image_size()
「thumbnail」の初期値を変更したい場合:set_post_thumbnail_size()
をfunctions.phpに追記する。

関連



関連記事

wordpress

【WordPressテンプレートタグ】the_title():記事タイトルを表示

概要 現在の記事のタイトルを表示または取得する 書式 <?php the_title('bef...

記事を読む

wordpress

【WordPressテンプレートタグ】category_description():カテゴリーの説明を取得

概要 管理画面「投稿」>「カテゴリー」の「カテゴリーの説明」を取得する。 カテゴリーアーカイブ...

記事を読む

wordpress

【WordPressテンプレートタグ】the_author_posts_link():作成者別アーカイブへのリンクを表示

概要 投稿の作成者別アーカイブへのリンクを表示する。 「ユーザー」>「あなたのプロフィール」>「ブロ...

記事を読む

wordpress

【WordPressテンプレートタグ】get_post_thumbnail_id():アイキャッチ画像のIDを取得

概要 アイキャッチ画像のIDを取得する。 書式 <?php get_post_thumbnai...

記事を読む

wordpress

【WordPressテンプレートタグ】the_category():カテゴリー名とリンクを表示

概要 記事が属するカテゴリー名とリンクを表示する 書式 <?php the_category(...

記事を読む

wordpress

【WordPressテンプレートタグ】get_the_author_link():作成者のウェブサイトへのリンクを取得

概要 作成者のウェブサイトへのリンクを取得する。ウェブサイトの設定がない場合は作成者名のみ取得する。...

記事を読む

wordpress

【WordPressテンプレートタグ】the_author_link():作成者のウェブサイトへのリンクを表示

概要 作成者のウェブサイトへのリンクを表示する。ウェブサイトの設定がない場合は作成者名のみ表示する。...

記事を読む

wordpress

【WordPressテンプレートタグ】wp_loginout():ログイン/アウトリンクを表示または取得

概要 ログイン/アウトリンクを表示、または文字列として取得する。 書式 <?php wp_lo...

記事を読む

wordpress

【WordPressテンプレートタグ】the_author():作成者名を表示

概要 投稿の作成者名を表示する。 書式 <?php the_author(); ?&...

記事を読む

wordpress

【WordPressテンプレートタグ】comment_author():コメント投稿者の名前を表示

概要 コメント投稿者の名前を表示する。 管理画面「設定」>「ディスカッション」>「他のコメント設定」...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

no image
エコノミークラス症候群

エコノミークラス症候群とは?  エコノミークラス症候群は、旅行に関連

no image
巻き爪・陥入爪

巻き爪・陥入爪ってなに?  巻き爪とは、主に親指の爪の両端が「巻く」

no image
結婚お祝い金

披露宴に出る場合 祝儀袋の渡し方  受付でお祝いの言葉を述べ、祝儀

no image
結婚祝い

お祝い品選びと費用 お祝い品の選び方  新居を構える二人には、生活

no image
ダニ除去マニュアル

ダニ除去マニュアルについて  基本的なダニアレルゲン対策としては、

→もっと見る

PAGE TOP ↑