Web Design Leaves

概要

• アイキャッチ画像はコンテンツごとに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; ?>

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

get_the_post_thumbnail($post_id, $size, $attr)

$post_id（オプション）：投稿の ID（省略時はnullが適用され、現在の投稿情報を対象する）
$size（オプション）：サイズ（文字列またはサイズを指定する配列）（デフォルトは'thumbnail'）
$attr（オプション）：アイキャッチ画像取得時の属性を指定（デフォルトは''）
戻り値：画像を出力するための HTML（img 要素）

• ２つ目のパラメータを指定するには、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');