アイキャッチ画像とそのトリミング

Tips
スポンサーリンク

アイキャッチ画像とは

「アイキャッチ」は「人目を引く」といった意味があり、WordPressの「アイキャッチ画像」とは、記事単位にアイキャッチ用の画像を設定できる機能を指します。
アイキャッチ画像を記事に設定しておけば、記事にひもづいたサムネイルや、ページのヘッダー画像として利用することができます。
テーマがアイキャッチに対応している必要があります。

アイキャッチ画像を使用するにはfunctions.phpにコードの記述が必要です。

<?php
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 200, 200, true );
?>

set_post_thumbnail_size()の第1、第2引数は横、縦のサイズで第3引数がtrueなら画像の中心から指定サイズになるような切り抜き(トリミング)となり、falseなら長い方のサイズに合わせて縮小になります。
さて、ここで不思議な現象が起きる場合があります。
第3引数をtrueにしていても縮小表示されてしまう場合があるのです。
これはfunctions.phpを記述する前に画像をアップしていた場合に起こります。
切り抜きにしたい場合は一旦アップした画像を削除して再度アップすると解決されます。

具体的なアイキャッチ画像を使用するためのfunctions.phpにコード

// アイキャッチ画像を利用できるようにします。
add_theme_support('post-thumbnails');

// サムネイルサイズ設定
set_post_thumbnail_size(90, 90 ,true);

// 小サイズ設定
add_image_size('small_thumbnail', 61, 61, true);

// ラージサイズ設定
add_image_size('large_thumbnail', 120, 120, true);

// カテゴリイメージ(好きに名前をつけてた)サイズ設定
add_image_size('category_image', 658, 113, true);

// ピックアップ用(これも好きに名前をつけた)画像サイズ設定
add_image_size('pickup_thumbnail', 302, 123, true);

add_image_size(‘small_thumbnail’, 61, 61, true);
第1引数は追加するサイズの名前です。
第2、第3引数はデフォルトのアイキャッチ画像の縦横のサイズ
第4引数はtrueが画像中央部から指定サイズで切り抜きをし、falseの場合はリサイズ(縮小)します。

テンプレート側に記述するコード

<?php the_post_thumbnail('large_thumbnail',
 array('alt' => the_title_attribute('echo=0'),
 'title' => the_title_attribute('echo=0'))); ?>
  • 第1引数はサイズの名前を指定
  • 第2引数はalt属性とtitle属性を配列で指定
  • 第1引数を省略するとデフォルトのアイキャッチ画像を使用
  • 第2引数を省略するとファイル名の一部を使用
タイトルとURLをコピーしました