WordPress でオリジナルテーマを作る アイキャッチ画像【thumbnail】編
WordPressでは、投稿ごとにアイキャッチ画像(サムネイル)を入れることが出来ます。
Contents
アイキャッチ画像の有効化
add_theme_support( ‘post-thumbnails’ );
アイキャッチ画像を有効化するためには、functions.php を編集します。functions.php に以下のコードを追記します。
add_theme_support('post-thumbnails');アイキャッチ画像の機能が追加されると、投稿画面の上部「表示オプション」にアイキャッチ画像という項目が現れますので、チェックボックスをチェックします。
アイキャッチ画像の表示
the_post_thumbnail();
テンプレートファイルのアイキャッチ画像を表示したい個所に以下のコードを記載します。
<?php the_post_thumbnail('画像サイズのID'); ?>使用例：
<?php the_post_thumbnail('thumbnail'); ?>画像サイズのIDには以下が設定できます。
| thumbnail | サムネイル |
|---|---|
| medium | 中サイズ |
| large | 大サイズ |
| full | フルサイズ |
画像サイズのIDを指定しない場合は
<?php the_post_thumbnail(); ?>サムネイルのサイズが表示されます。
サムネイル、中サイズ、大サイズの大きさは「設定」 > 「メディア」で設定できます。初期設定は
| thumbnail | 150px * 150px |
|---|---|
| medium | 300px * 300px |
| large | 1024px *1024px |
アイキャッチ画像のサイズ
set_post_thumbnail_size();
以下のコードをfunction.phpに追加するとデフォルトで使用される画像サイズが変更できます。
set_post_thumbnail_size(横のサイズ, 縦のサイズ, 切り抜きの有無);「切抜きの有無」は、trueで縦横比を維持して縮小後に不要な部分を切り取ります。falseで縦横比を維持して縮小を行います。
このように指定すると、横は300px, 縦は250pxで切抜きを行います。
set_post_thumbnail_size(300, 250, true);アイキャッチ画像が設定されていない時は決まった画像を表示する
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail('thumbnail'); ?>
<?php else : ?>
<img src="<?php bloginfo('template_url'); ?>/img/noimage.gif" width="100" height="100" alt="デフォルト画像" />
<?php endif ; ?>