wordpress アイキャッチ画像

2013年5月20日

概要

  • アイキャッチ画像はコンテンツごとに1つだけ指定することができ、本文に挿入した画像とは別に扱うことができる。
  • アイキャッチ画像として画像をアップロードすると、add_image_size 等で指定した大きさの画像を自動生成することができる。
  • 但し、自動生成では、上部をトリミングするということはできないので(トリミングする場合は中央部が切り出される)、CSSなどを利用して表示する。(画像を囲む div 要素に、heightを指定して、overflow を hidden にするなど)
  • アイキャッチ画像は、記事や固定ページごとに指定できるものなので、月別ページやカテゴリー別ページでは、アイキャッチ画像はないものとして扱われる。それらのページで特定のアイキャッチ画像を表示するには、get_the_post_thumbnail()に、表示したいアイキャッチ画像の属するページのIDを指定する。

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

functions.php に以下を記述して、アイキャッチ画像の機能を有効にすると、編集画面で「アイキャッチ画像」という設定項目が追加される。

add_theme_support('post-thumbnails');

基本サイズの指定

アイキャッチ画像の幅と高さ(基本サイズの指定)を指定するには set_post_thumbnail_size() を使用する。

set_post_thumbnail_size($width, $height, $crop)
$width(オプション):横幅(省略時は 0)
$height(オプション):高さ(省略時は 0)
$crop(オプション):縮小時に切り抜きする場合はtrue、しない場合はfalseを指定(省略時はfalse)
  • 3つ目のパラメータ($crop)を「true」に指定すると、大きな画像をアップロードした場合、自動的に指定した横幅と高さにトリミングできるようになる。
  • 「false」に指定した場合(または省略時)は、大きな画像は長辺が指定した長さになるように縮小され、トリミングは行われない。
  • 長辺にそろえる場合は、幅と高さを同じにする。
  • 横幅をそろえる(統一する)ようにするには、(300, 9999) などのようにする。

但し、set_post_thumbnail_size() のパラメータを変更しても、アップロード済みのアイキャッチ画像には適用されないので、画像をアップロードする前に指定しておく必要がある。利用する画像が、アイキャッチ画像を設定する前にアップロードしてある場合、アップロード済みの画像を生成し直すプラグイン「Regenerate Thumbnail」を利用すると便利。

基本サイズ以外のサイズの指定

基本サイズ以外のサイズは add_image_size() 関数で指定する。

add_image_size($name , $width , $height , $crop )
$name:画像サイズの名前(予約されている名前には、thumb, thumbnail, medium, large, post-thumbnail がある)
$width(オプション):アイキャッチ画像の幅(省略時は0)
$height(オプション):アイキャッチ画像の高さ(省略時は0)
$crop(オプション):縮小時に切り抜きする場合はtrue、しない場合はfalseを指定(省略時はfalse)
  • add_image_size()でサイズを設定した場合、画像をアップロードすると設定したサイズの画像のコピーが自動的に生成される。
  • add_image_size() 関数の指定は、アイキャッチ画像だけでなく、WordPress でアップロードするすべての画像に影響する。add_image_size() で指定したサイズのサムネイルが全てのアップロードした画像に対して作成される。

基本サイズは「設定」→「メディア」ページで設定したサイズ(thumbnail,medium, large)、元のサイズ(full)、「set_post_thumbnail_size()」で指定したサイズ。

アイキャッチ画像の設定例

//functions.php
add_theme_support('post-thumbnails');  // アイキャッチ画像の機能を有効に
set_post_thumbnail_size(640, 640);  //基本サイズの指定(長辺の長さを揃えて生成)
add_image_size('msize', 400, 400);  //msizeサイズの指定
add_image_size('ssize', 120, 120, true);  //ssizeサイズの指定。trueを指定するとトリミング機能を有効にする

アイキャッチ画像の指定

  • 編集画面を開き、「アイキャッチ画像を設定」をクリックして画像をアップロードする
  • 画像の設定画面が開くので「アイキャッチ画像として使用」をクリックする
  • 表示を確認し、「更新」をクリックしてコンテンツを保存する
  • 編集画面に表示されたアイキャッチ画像をクリックすると、別の画像に変更することもできる

アイキャッチ画像の表示

the_post_thumbnail($size, $attr )
$size(オプション):サイズ(文字列またはサイズを指定する配列)。デフォルトは 'post-thumbnail'。
$attr(オプション):アイキャッチ画像取得時の属性を指定。デフォルトは ''。
//サムネイルのサイズで出力する
<?php the_post_thumbnail('thumbnail'); ?>
//縦と横のサイズを指定して出力
<?php the_post_thumbnail(array(150, 100)); ?>

文字列/配列のどちらを渡す場合も、画像が大きければ指定サイズまで縮小されるが、画像が小さい場合は拡大されない。

アイキャッチ画像がない場合も想定しなければならない場合は、以下のようデフォルトの画像が挿入されるようにする方法もある。

<?php if(has_post_thumbnail()): ?>  //アイキャッチ画像がある場合
<p><?php the_post_thumbnail(); ?></p>  //アイキャッチ画像を表示
<?php else: ?>  //アイキャッチ画像がない場合は、デフォルトの画像を表示
<p><img src="<?php echo get_template_directory_uri(); ?>/images/no_image.gif" alt="風景" title="" width="110" height="110" /></p>
<?php endif; ?>
サイズを指定する文字列
文字列 サイズ
thumbnail 「設定」→「メディア」ページの「サムネイルのサイズ」で指定したサイズ
medium 「設定」→「メディア」ページの「中サイズ」で指定したサイズ
large 「設定」→「メディア」ページの「大サイズ」で指定したサイズ
full 元のサイズ
指定なし 指定しなければ、set_post_thumbnail_size()で設定した基本サイズで出力される
キーワード add_image_size()で設定したサイズ
post-thumbnail 指定なしと同様、set_post_thumbnail_size()で設定した基本サイズで出力される
thumb 確証はないが、おそらく、「設定」→「メディア」ページの「サムネイルのサイズ」で指定したサイズのトリミングなしのサイズ?

投稿の ID を指定してアイキャッチ画像を出力する HTML を取得する

get_the_post_thumbnail($post_id, $size, $attr)
$post_id(オプション):投稿の ID(省略時はnullが適用され、現在の投稿情報を対象する)
$size(オプション):サイズ(文字列またはサイズを指定する配列)(デフォルトは'thumbnail')
$attr(オプション):アイキャッチ画像取得時の属性を指定(デフォルトは'')
戻り値:画像を出力するための HTML(img 要素)
  • 2つ目のパラメータを指定するには、1つ目のパラメータも指定しなければならないので、($post->ID, ‘size’) とするか(null, ‘size’)とする。
  • the_post_thumbnail 関数で出力される HTML を変数に代入して処理する際に使える。
  • アイキャッチ画像を持たないページで、アイキャッチ画像を利用するのに使用できる。
// ループ内での呼び出しの例('m_size' でアイキャッチ画像を出力)
<?php echo get_the_post_thumbnail($post->ID, 'm_size'); ?>   

画像の間の余分な余白の削除

  • ループを使って複数のアイキャッチ画像を並べて表示する場合、画像と画像の間に余分な余白が入ることがある。
  • これは、ソース中の改行によって挿入されるもので、余白の大きさもブラウザによって異なる。
  • この余白を削除するためには、画像を表示している<a>や<img />の前後に改行が入らないようにする。

以下の例では、「while」と「endwhile」の間に改行を入れないようにしている。

<?php if(have_posts()): while(have_posts()): the_post(); ?><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('ssize'); ?></a><?php endwhile; endif; ?>

実際は、<?php if(have_posts()): while(have_posts()): the_post(); ?> と <a> の間の改行は出力されない。但し、ここに2つ以上の改行を入れると出力されるので注意が必要。

WordPress で自動生成される画像のファイル名

WordPress で自動生成される画像のファイル名には法則がある。たとえば、「picture.jpg」という画像をアップロードすると、

  • 150×150ピクセルで生成された画像は「picture-150×150.jpg」
  • 45×45ピクセルで生成された画像は「picture-45×45.jpg」というファイル名になる

そのため、出力ソースに含まれる「150」を「45」に置換すると、45×45ピクセルの画像を表示することができる。

<?php echo str_replace("150", "45", get_the_post_thumbnail()); ?>

プラグイン「Regenerate Thumbnail」

アップロード済みの画像を生成し直すプラグイン

  • 「Regenerate Thumbnail」をインストールして有効化する
  • インストールして有効化すると、「ツール」の中に「Regenerate Thumbnails」の項ができる。
  • 管理画面の「ツール」→「Regen.Thumbnails」を選択。
  • 全ての画像を生成しなおすには、「Regenerate All Thumbnails」ボタンをクリックするとアップロードされている全ての画像が生成し直される。
  • 個別に画像を生成し直すには管理画面の「メディア」→「ライブラリ」で目的の画像にマウスポインタを重ね「Regenerate Thumbnails」ボタンをクリックする。
  • 複数の画像を生成しなおすには、管理画面「メディア」→「ライブラリ」で目的の画像にチェックをつけ、「一括操作」で「Regenerate Thumbnails」を選択する。

アイキャッチ画像を利用して、ページごとのヘッダー画像を変更する

投稿のIDでアイキャッチ画像を指定するには「get_the_post_thumbnail」を使用する。

ヘッダー画像を表示する部分 に以下の記述を追加して、アイキャッチ画像を表示する。

<?php if(has_post_thumbnail($post->ID)): ?>  //アイキャッチ画像がある場合
<p><?php echo get_the_post_thumbnail($post->ID); ?></p>  //アイキャッチ画像を表示
<?php else: ?>  //アイキャッチ画像がない場合は、標準のヘッダー画像を表示
<p><img src="<?php header_image(); ?>" alt="" title="" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" /></p>
<?php endif; ?>
  • アイキャッチ画像がある場合は、標準のヘッダー画像を表示しないようにするため、has_post_thumbnail($post->ID)を利用して条件分岐を行う。
  • get_the_post_thumbnail() と has_post_thumbnail() は投稿IDをパラメータにとるので、WordPress ループの中で現在(表示中)の投稿のID($post->ID)を指定する。 has_post_thumbnail() はこの場合、パラメータを省略できる。
  • また、get_the_post_thumbnail() はアイキャッチ画像を出力する HTML を得るので echo で出力している。代わりに the_post_thumbnail(‘full’); とアイキャッチ画像を出力する関数を使うことも可能。
  • アイキャッチ画像は、記事や固定ページごとに指定できるものなので、月別ページやカテゴリー別ページでは、アイキャッチ画像はないものとして扱われる。それらのページで特定のアイキャッチ画像を表示するには、get_the_post_thumbnail()に、表示したいアイキャッチ画像の属するページのIDを指定する。

アイキャッチ画像のURL(src)の取得

get_the_post_thumbnail() はアイキャッチ画像の img 要素の HTML を出力するので、 img 要素の属性を追加したり、変更することはできない。(クリッカブル・マップの usemap 属性の指定など)

アイキャッチ画像のURL(src)を取得するには、get_post_thumbnail_id() で ID を取得し、それを wp_get_attachment_image_src() に渡して、画像の情報を取得する。

<?php if(has_post_thumbnail()): ?>
<?php
$thumbnail_id = get_post_thumbnail_id($post->ID);
$src_info = wp_get_attachment_image_src($thumbnail_id, 'full');
$src = $src_info[0];
$width = $src_info[1];
$height  = $src_info[2];
?>
<p id="contactphoto"><img src="<?php echo $src; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" usemap="#Map" alt=""  />
<map id="Map" name="Map">
<area alt="contact" href="" coords="114,84,494,140" shape="rect" title="<?php _e('Contact via Email', 'mydomain'); ?>">
</map>
</p>
<?php endif; ?>

サムネイル画像の画質(圧縮率)を変更

デフォルト値では圧縮率が90%になっているので、100%に変更するには、以下を functions.php に記述する。

function jpeg_quality_callback($arg) {
    return (int)100;
}
add_filter('jpeg_quality', 'jpeg_quality_callback');