WordPressテーマの作り方4(アイキャッチ画像の表示)

WordPressテーマの作り方4(アイキャッチ画像の表示)

ページを代表する画像

アイキャッチ画像はページの上部に表示させてユーザーからの興味関心を引き付けるときに使います。記事一覧のサムネイル画像としても使ったり、Twitterカードの画像として表示させたりもするので、そのページにふさわしい画像を設置してあげましょう。

有効化するためのコード

functions.phpに追加

add_theme_support( 'post-thumbnails' );

追加するとWordPressの編集画面に「アイキャッチ画像」という項目ができます。

add_theme_support関数はWordPressの機能を追加させることができる関数で、引数次第ではもっと機能を追加することができます。

https://qiita.com/gatespace/items/d6419b0b7e49c98ce829

 

アイキャッチ画像を表示させる

表示させたい箇所に次のテンプレートタグを追加

<?php the_post_thumbnail( 'large' )?>

テンプレートタグにtheがついている系のものはループ内でしか使えないらしいので、参考にどうぞ。

WordPressテーマの作り方3(ループで記事表示)

例として、トップページのループ内にテンプレートタグを追加したときの結果

imgタグで表示されるようになった。

アイキャッチ画像のURLだけ取得したい。imgタグ以外で表示させたいってときは、以下URLを参考に。↓↓↓

https://www.webdesignleaves.com/pr/wp/wp_post_thumbnail.html#h4_index_28

 

条件分岐を使って、アイキャッチ画像が設定されているときと、されていない時の処理をしたいときの例は下のようなかんじで。

<?php if( has_post_thumbnail() ): ?>
    <?php the_post_thumbnail( 'large' ); ?>
<?php else: ?>
    <img src="デフォルトで表示させたい画像">
<?php endif; ?>

<?php the_post_thumbnail( ‘large‘ )?>の太文字部分、large以外にも他3つのパラメーターがある。

  1. the_post_thumbnail( ‘thumbnail’ ) → サムネイル
  2. the_post_thumbnail( ‘medium’ ) → 中サイズ
  3. the_post_thumbnail( ‘large’ ) → 大サイズ
  4. the_post_thumbnail( ‘full’ ) → フルサイズ

 

WordPress編集画面の 設定>メディア からそれぞれのサイズがわかる。

 

コメントを残す

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

CAPTCHA