目次
アイキャッチ画像とは?
アイキャッチ画像とは、サイドバーなどの「新着記事一覧」や「関連記事一覧」などで、サムネイル画像を表示する機能です!
基本設定(必須)
アイキャッチ画像を利用するには、functions.phpに必ず下記のコードの追記をしてください。
1 |
add_theme_support('post-thumbnails'); |
1 2 3 4 5 6 7 8 9 |
<a href="<?php the_permalink(); ?>"> <?php if( has_post_thumbnail() )://サムネイルがあるかどうか? the_post_thumbnail( array( 75, 75 ) );//サムネイルがあった場合 ?> <?php else: ?>//サムネイルがなかった場合 <img src="<?php echo get_template_directory_uri(); ?>/images/noimage.gif"> <?php endif; ?> </a> |
サムネイルのサイズはthe_post_thumbnail(引数)で設定して使います。
- thumbnail
- サムネイルサイズ(管理画面で設定できるサイズ)
- medium
- 中サイズ(管理画面で設定できるサイズ)
- large
- 大サイズ(管理画面で設定できるサイズ)
- 任意の名前
- functions.phpで設置
- array(数値,数値)
- ソースコード上で個別に指定
functions.phpに自分で任意の名前をつけて、複数箇所でつかいまわす方法は?
functions.phpに以下追記。
1 2 3 |
//アイキャッチ画像に任意のサイズを追加。 //add_image_size('任意の名前',width,height,指定サイズに切り取るか) add_image_size( 'header-thumbnail', 980, 200, true ); |
add_image_sizeを使うときに注意しなくてはならないのは、画像をアップロードすると複製されてしまう問題のページで説明したように、add_image_sizeサイズで指定したサイズが、管理画面で画像をアップロードすると自動で複製されてしまいます。できればadd_image_sizeを使わず管理画面の複製機能を使う方がいいでしょう。
アイキャッチ画像を使用するときの大きさ指定まとめ
1 2 3 4 5 |
the_post_thumbnail( 'thumbnail' );//管理画面で設定できる the_post_thumbnail( 'medium' );//管理画面で設定できる the_post_thumbnail( 'large' );//管理画面で設定できる the_post_thumbnail( array( 75, 75 ) );//ソース上で個別に設定 the_post_thumbnail( 'header-thumbnail' );//functions.phpで設定 |