目次
関連記事などで利用しているアイキャッチ画像を応用して使う
せっかく作ったアイキャッチ画像をページ一覧などのサムネイル画像としてだけ使うのはもったいないですよね。ここでは、設定したアイキャッチ画像を自動的に投稿記事タイトルの真下に表示する方法について説明していきます。
基本的な使い方(get_the_post_thumbnail)
single.phpなどの表示したい場所に、get_the_post_thumbnailを使います！するとページ上ではimgタグで表示されます。
|
1 |
<?php echo get_the_post_thumbnail( $post_id, $size, $attr ); ?> |
- $post_id
- 投稿記事のID（そのままでいい。）
- $size
- サイズは「thumbnail（サムネイル）」「medium（中）」「large（大）」「full（オリジナルサイズ）」または「 array( 横幅, 縦幅 )」から選択
- $attr
- いろいろな属性を設定できる。
画像のサイズはどれがいいか？
タイトル下の画像となるので「full」を選択することをおすすめしますが、あなたのお好みの設定を選択してください。
投稿記事のタイトル直下では、「full」を指定し大きな画像を使い、サイドバーなどの一覧ではサムネイルサイズが自動で表示されるように、
管理画面の設定→メディアのページで「サムネイルのサイズ」を指定し、「サムネイルを実寸法にトリミングする」のチェック項目にチェックをいれることをおすすめします。
imgタグにclass属性追加する方法
|
1 |
array( 'class' => '追加したいクラス名1 追加したいクラス名2' ) |
例えばBootstrapで使う場合は
画像をレスポンシブデザインで使う（横幅をフルに使う）class属性「img-responsive」画像を中央寄せにするclass属性「img-center-block」を追加する場合は、以下のようになります。
|
1 |
array( 'class' => 'img-responsive center-block' ) |
まとめ(コードサンプル)
投稿記事上(single.php)でタイトルの直下にアイキャッチ画像を設定するコード（サンプル）。|
1 2 |
<h1 class="entry-title"><?php the_title(); ?></h1> <?php echo get_the_post_thumbnail( $post_id, full, array( 'class' => 'img-responsive center-block' )); ?> |
|
1 |
<img width="" height="" src="https://ドメイン名/wp-content/uploads/画像のパス" class="img-responsive center-block wp-post-image" alt="" /> |