WordPress

WordPressのアイキャッチ画像

Category

WordPress

WordPressには"アイキャッチ画像"というページ上にサムネイル画像を表示させるための機能があります。投稿時にサムネイル画像を設定できるようになったのは、バージョン2.9からの機能です(WordPressのCodexを見ると"投稿サムネイル"というらしい)。
とても便利なこのアイキャッチ画像。今回の記事では、アイキャッチ画像の使用方法と便利な使い方をいくつか紹介したいと思います。

Keyword:アイキャッチ画像,サムネイル画像,リサイズ

WordPressのアイキャッチ画像

以下の内容で紹介していきます。
テキストリンクをクリックするとその箇所までページがスクロールします。

アイキャッチ画像の基本的な使い方

アイキャッチ画像をページに表示させるには、functions.phpとアイキャッチ画像を表示させたいテンプレートファイルに以下の記述が必要です。

functions.php

// アイキャッチ画像を使用
add_theme_support('post-thumbnails');

// 幅 100px、高さ 100px、切り抜きモード
set_post_thumbnail_size(100, 100, true);

// 幅 100px、高さ 100px、リサイズモード
set_post_thumbnail_size(100, 100);

補足

●アイキャッチ画像を使用
使用しているテーマでアイキャッチ画像(投稿サムネイル)を有効にします。

●幅 100px、高さ 100px、切り抜きモード
サムネイルサイズと切り抜きモードの有効・無効を指定します。
“(100, 100, true)”は、”幅・高さ・切り抜きモードが有効”となります。
“true”を指定すると切り抜きモードで表示され、指定したサイズで画像の中心を基準にトリミング(切り抜き)されます。
“true”を指定しなければ(何も記述しなければ)リサイズモードになります。

●幅 100px、高さ 100px、リサイズモード
サムネイルサイズを指定します。
“(100, 100)”は、”幅・高さ”となり、”true”を指定していない(何も記述していない)ので、リサイズモードで表示されます。
リサイズモードは、指定した縦横比と異なる画像をリサイズして表示した場合、比率は合わせますので、幅・高さのどちらかが指定したサイズに足りない状態で表示されます。
サムネイル画像が横に並んだ際、幅や高さがバラバラで表示されるのは見栄えが悪いので、アップロードする画像とサムネイルサイズの比率は合わせるようにしましょう(縦長・横長どちらかの画像に統一した方がいいですね)。

“切り抜きモード”か”リサイズモード”のどちらか一方だけを指定すればOKです。

▼アイキャッチ画像の表示イメージ
アイキャッチ画像表示イメージ

テンプレートファイル

// パラメータなし(サムネイルサイズで表示)
<?php the_post_thumbnail(); ?>

// サムネイルサイズで表示
<?php the_post_thumbnail('thumbnail'); ?>

// 中サイズで表示 
<?php the_post_thumbnail('medium'); ?>

// 大サイズで表示 
<?php the_post_thumbnail('large'); ?>

// 指定サイズで表示 
<?php the_post_thumbnail(array(100,100)); ?>

補足

表示させたいページのテンプレートファイルに上記のいずれかを記述します。
また、WordPressの管理画面の[設定]⇒[メディア設定]より、画像サイズ(サムネイル・中サイズ・大サイズ)の設定もしておきましょう。

●パラメータなし(サムネイルサイズで表示)
パラメータを指定しなかった場合、サムネイルサイズで表示します。

●サムネイルサイズで表示
パラメータに”thumbnail”と指定します。
パラメータを指定しなかった場合と同じです。

●中サイズで表示
パラメータに”medium”と指定します。

●大サイズで表示
パラメータに”large”と指定します。

●指定サイズで表示
パラメータに”array(幅,高さ)”と指定します。

テンプレートタグ”the post thumbnail”やパラメータに関してはWordPressのCodexをご覧ください。

[参考リンク]
・テンプレートタグ:the post thumbnail(WordPress Codex)
・投稿サムネイル(WordPress Codex)
・テンプレートタグ:get the post thumbnail(WordPress Codex)

後は、記事を投稿する際、アイキャッチ画像を設定してやればOKです。

アイキャッチ画像設定イメージ

また、サムネイルサイズを途中で変更したくなった場合の対処法です。
アイキャッチ画像は、設定した時のサイズが保持されるので、途中で[設定]⇒[メディア設定]よりサムネイルサイズを変更した場合、サーバー上に格納されている既存のサムネイル画像のサイズはそのままですので、投稿ページから再設定しないといけません。
でも、全ての記事に対して再設定するのは大変です…。
そんな時に便利なのがRegenerate Thumbnailsプラグインです。
このプラグインを使用すると、一括でサムネイル画像を再生成してくれます。

アイキャッチ画像の切り替え(指定あり・なしで表示画像を複数に切り替える)

アイキャッチ画像は便利なのですが、ついつい設定し忘れてしまう場合があります。
個人のブログやサイトだと、サムネイル画像が表示されていないことに気付いてから設定しても構わないのですが、クライントへ納品するサイトや自社のサイトでこういったことが頻繁にあると凹んでしまいます…。
そこで、アイキャッチ画像が設定されてない場合、代替画像を表示されるようにします。
“No Image”等の画像を1枚用意しておいてもいいのですが、アイキャッチ画像を設定していないといつも”No Image”とういのもイマイチですし、記事内に画像を使用しているのに”No Image”と表示されるのもおかしいので、カテゴリー毎に別のサムネイル画像を表示されるようにします。

サムネイル画像を表示させたいテンプレートファイルに以下を記述します。

テンプレートファイル

// アイキャッチ画像が設定されている場合
<?php if (has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
// アイキャッチ画像が未設定でカテゴリー1が選択されている場合
<?php elseif (in_category('スラッグ1')) : ?>
<a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_directory'); ?>/image/category1.jpg" alt="カテゴリー名1" title="<?php the_title_attribute(); ?>" /></a>
// アイキャッチ画像が未設定でカテゴリー2が選択されている場合
<?php elseif (in_category('スラッグ2')) : ?>
<a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_directory'); ?>/image/category2.jpg" alt="カテゴリー名2" title="<?php the_title_attribute(); ?>" /></a>
// アイキャッチ画像が未設定でカテゴリー3が選択されている場合
<?php elseif (in_category('スラッグ3')) : ?>
<a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_directory'); ?>/image/category3.jpg" alt="カテゴリー名3" title="<?php the_title_attribute(); ?>" /></a>
// 上記のどの条件にも合致しない場合
<?php else : ?>
<a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_directory'); ?>/image/common_image.jpg" alt="この記事を見る" title="<?php the_title_attribute(); ?>" /></a>
<?php endif; ?>

補足

●アイキャッチ画像が設定されている場合
アイキャッチ画像が設定されている場合、指定した画像をサムネイルで表示します。
“パラメータなし”ですので、サムネイルサイズで表示されます。
“<?php the_permalink(); ?>”は、リンクにパーマリンクを設定するテンプレートタグで、上記の例では、サムネイル画像をクリックするとその記事に遷移します。

●アイキャッチ画像が未設定でカテゴリー1が選択されている場合
アイキャッチ画像が未設定でカテゴリー1が選択されている場合、カテゴリー1専用に用意した画像をサムネイルで表示します。
“スラッグ1″にはそのカテゴリーに設定したスラッグ、”<img src=~”には画像のパス、”alt”にはカテゴリー名等、”title”にはページタイトルを出力するテンプレートタグ”<?php the_title_attribute(); ?>”を記述します。
“<?php bloginfo(‘template_directory’); ?>”は、テンプレートファイルが置かれている階層を表すテンプレートタグです。
また、”in_category”に関しては、カテゴリーが親子関係にある場合(例えば、親カテゴリーAの中に子カテゴリー1と2と3がある場合)、”is_category”では指定したサムネイル画像は表示されませんので、カテゴリー構成に合わせて使い分けてください。
⇒ WordPress Codex:テンプレートタグ in_category参照
カテゴリー2と3についても同様に記述してください。

●上記のどの条件にも合致しない場合
カテゴリーが増えた場合、テンプレートファイル側も追記しないといけませんので、念のため、どの条件にも合致しない場合に表示する共通のサムネイル画像も用意します。

Feedにもアイキャッチ画像を表示する

WordPressのデフォルト設定では、Feedにアイキャッチ画像は表示されません。
functions.phpに以下を追記すると、Feedにもアイキャッチ画像を表示できます。

functions.php

// Feedにアイキャッチ画像を表示する
function post_thumbnail_feeds($content) {
    global $post;
    if(has_post_thumbnail($post->ID)) {
        $content = '<div>' . get_the_post_thumbnail($post->ID) . '</div>' . $content;
    }
    return $content;
}
add_filter('the_excerpt_rss', 'post_thumbnail_feeds');
add_filter('the_content_feed', 'post_thumbnail_feeds');

// 中サイズでアイキャッチ画像を表示(5行目の以下を変更)
get_the_post_thumbnail($post->ID, 'medium')

// 指定サイズでアイキャッチ画像を表示(5行目の以下を変更)
get_the_post_thumbnail($post->ID, array(150,150))

補足

●Feedにアイキャッチ画像を表示する
上記の記述では、サムネイルサイズでアイキャッチ画像が表示されます。

●中サイズでアイキャッチ画像を表示(5行目の以下を変更)
表示サイズを変更したい場合、5行目の指定箇所を変更します。
“large”と指定すると大サイズで表示されます。

●指定サイズでアイキャッチ画像を表示(5行目の以下を変更)
サムネイルサイズ・中サイズ・大サイズ以外で表示したい場合の記述です。
縦横比は保たれます。

▼Feedにもアイキャッチ画像が表示されるようになりました
Feedでアイキャッチ画像を表示

管理画面の投稿記事一覧にアイキャッチ画像を表示する

WordPressのデフォルト設定では、管理画面の投稿記事一覧にアイキャッチ画像は表示されませんので、管理画面の投稿記事一覧にもアイキャッチ画像が表示されるようにします。
functions.phpに以下を追記します。

functions.php

// 投稿記事一覧にアイキャッチ画像を表示
function manage_posts_columns($columns) {
     $columns['thumbnail'] = __('アイキャッチ画像');
     return $columns;
}
function add_posts_column($column_name, $post_id) {
     // アイキャッチ画像を表示
     if ($column_name == 'thumbnail') {
         echo get_the_post_thumbnail($post_id);
     }
}
// 全ポストタイプに適応
add_filter('manage_posts_columns', 'manage_posts_columns');
add_action('manage_posts_custom_column', 'add_posts_column');

// 固定ページ一覧にアイキャッチ画像を表示
function manage_pages_columns($columns) {
     $columns['thumbnail'] = __('アイキャッチ画像');
     return $columns;
}
function add_pages_column($column_name, $post_id) {
     // アイキャッチ画像を表示
     if ($column_name == 'thumbnail') {
         echo get_the_post_thumbnail($post_id);
     }
}
add_filter('manage_pages_columns', 'manage_pages_columns');
add_action('manage_pages_custom_column', 'add_pages_column');

補足

●投稿記事一覧にアイキャッチ画像を表示
3行目の”アイキャッチ画像”の箇所には、投稿記事一覧に表示される文字を指定します。
9行目の”echo get_the_post_thumbnail($post_id);”には、表示サイズのパラメータを指定していませんので、サムネイルサイズで表示されます。
表示サイズを指定したい場合は、”$post_id”の後に”,(カンマ)”で区切り、「‘medium’」や「array(75,75)」等と追記しましょう。

●全ポストタイプに適応
上記の記述では、カスタム投稿タイプを含め、全ての投稿記事一覧にアイキャッチ画像が表示されます。カスタム投稿タイプのみに適応したい場合は、フィルターフックの箇所を以下のようにします(13行目です)。
add_filter(‘manage_○○○○○_posts_columns’, ‘manage_posts_columns’);
“○○○○○”の箇所には、作成したポストタイプ名を記述してください。

●固定ページ一覧にアイキャッチ画像を表示
このままでは、投稿記事一覧にはアイキャッチ画像が表示されますが、固定ページ一覧には表示されませんので、固定ページ一覧にも表示されるようにします。

▼管理画面の投稿記事一覧にアイキャッチ画像が表示されました管理画面の投稿一覧

画像リサイズ時の圧縮比率の設定

アイキャッチ画像とは関係ありませんが、「なるほどー!」と思ったので、WordPressの画像関連のTipsとしてと書いておきます。
アップロードした画像をリサイズ表示する際、圧縮比率を設定できるようです(私もつい最近まで、こんなのがあるとは知りませんでした)。
functions.phpに以下を追記します。

functions.php

// リサイズ時の圧縮比率の設定(PHP5.3の書き方)
add_filter('jpeg_quality', function($arg){return 100;});

// リサイズ時の圧縮比率の設定(PHP5.2以下の書き方)
add_filter('jpeg_quality', create_function('$arg','return 100;'));

補足

●リサイズ時の圧縮比率の設定
PHP5.3とPHP5.2以下で書き方が違うようです。
また、デフォルトでの圧縮比率は”90″に設定されているようです(上記の例では”100″に変更。数字が大きくなる程、画質が鮮明になります)。

また、こちらの内容に関しては、“かちびと.netさんのサイト”の記事を引用させていただきましたので、詳細をお知りになりたい方は、以下のページよりご確認ください。
⇒ かちびと.netさんのサイトの記事へ

List

関連記事(※当記事と関連性が高いと思われる記事)

WordPressの検索表示をカスタマイズする

2012/03/11
WordPressの検索表示をカスタマイズ
スコア:21 ※スコアの数値が大きいほど、関連性の高い記事です。 以下の手順で紹介していきます。※テキストリンクをクリックすると、その箇所までページがスクロールします。 検索フォームを変更する 検索結果に「入力した検索ワード」と「該当... 続きを読む...

WordPressのFacebook用OGP出力テンプレート

2012/06/02
WordPressのFacebook用OGP出力テンプレート
スコア:20 ※スコアの数値が大きいほど、関連性の高い記事です。 2012.6.2現在でのFacebookの仕様で作成しています。※新たな仕様変更が発生することもありますので、その点ご了承ください。 以下の手順で説明していきます。※テ... 続きを読む...

おすすめ書籍・商品(※当記事と関連性が高いと思われる書籍・商品)

ページの先頭へ