[WordPress General] 投稿に thumbnail / eye catch を表示する

公開日: 2014/01/31
更新日: 2019/09/15

投稿にサムネイル画像を追加します。

Contents

アイキャッチ機能とは

GUI管理ツールで変更できるサムネール機能。
自作する場合など、テーマで機能を有効にする必要がある。

「ダッシュボード ＞ 設定 ＞ メディア」で、投稿画面で使う画像のサイズを設定できます。

また、生成された画像は、以下で確認できます。
/wp-content/uploads/

  • filename-162×100.png
  • filename-324×130.png
  • filename.png

画像のリサイズの他に、オリジナルファイル名に設定したサイズも付与されます。

アイキャッチ機能を有効にする

アイキャッチ機能を有効にするには、functions.php に下記を記載します。

functions.php
add_theme_support( 'post-thumbnails' );

必要なテーマファイル内で the_post_thumbnail(); を追加すると、そこにアイキャッチが表示されます。

index.php
<?php
if ( has_post_thumbnail() ) {
    the_post_thumbnail();
}
?>

例えばサムネールがなければ noimage を表示する。

<?php if (has_post_thumbnail()) : ?>
    <?php the_post_thumbnail(); ?>
<?php else: ?>
    <img src="<?php echo get_template_directory_uri(); ?>/img/noimage.png">
<?php endif; ?>

標準で用意されているサムネイルとそのサイズ

「ダッシュボード ＞ 設定 ＞ メディア」の設定は、このように引っ張れます。

// without parameter -> Thumbnail
the_post_thumbnail();
// サムネイル　(デフォルト 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');

functions.php 内に以下を追記すると、サムネイルの初期値を設定できます。
true オプションを付けると、縦横比にあわせて縮小後、はみ出した部分をクロップしてくれます。

set_post_thumbnail_size(324, 200, true);

medium, large サイズの初期値の定義は分かりませんでした。
ご存じの方いましたら教えてください。

カスタムサイズを追加する

the_post_thumbnail(() にオプションを渡すと、表示されるサイズを指定することができます。

the_post_thumbnail( array(100,100) );

また、functions.php に必要なサイズを add_image_size() で定義して利用することができます。

functions.php
function eyecatch() {
    add_theme_support( 'post-thumbnails', array('post') );
    set_post_thumbnail_size(240, 160, true);
    add_image_size('index-post-thumbnail', 70, 70, true);
}
add_action( 'after_setup_theme', 'eyecatch' );

追加したサイズは、下記のように呼び出せます。

index.php
<?php the_post_thumbnail('index-post-thumbnail'); ?>

サムネイルにクラスを追加する

the_post_thumbnail('thumbnail', array('class' => 'alignleft'));

サムネイル画像を一括で作り直す

サムネイルを作り直すプラグインがあるようで便利そうです。

補遺

画像の出し分け