アイキャッチ画像（サムネイル）を、カテゴリ毎にサイズを分けて表示するその１:【23日目】WordPress1日１プラグイン

ようこそのお運びで、厚く御礼申し上げます。
２３日目です。さてさて、クラス定義や管理画面はしばらく置いといて、また機能面で書いていこうと思います。さて今回は・・・。

トップページのみアイキャッチ画像（サムネイル）を、カテゴリ毎にサイズを分けて表示する。

今回は、アイキャッチ画像を使います。一覧表示（トップページでの項目分け等）でカテゴリ毎にアイキャッチ画像（サムネイル）の表示サイズを変更します。

140209-0002

テンプレートなどにプログラムを書いて実装することもできるのですが、あまりテンプレートファイルにプログラムを書きたくない！っという人はこういうやり方もできるので、参考までにご覧ください。

予備知識：アイキャッチ画像を有効にする。

まず、ちょっと下準備が必要。アイキャッチは有効にしておきましょう。
140209-0003
有効にするにはfunction.phpにこのコードを書き加えます。

//#######################
//アイキャッチ画像（サムネイル）を有効にする
//#######################
if (function_exists('add_theme_support')) {
   //アイキャッチ画像を使えるようにする
   add_theme_support('post-thumbnails');
}

※サムネイルのサイズは管理画面の「設定>メディア」から変更ができます。
直接変更したい場合はset_post_thumbnail_sizeを記述してください。

テンプレートにはthe_post_thumbnail()というテンプレートタグを使って出力します。

if(has_post_thumbnail()) {
   //画像がある場合
   the_post_thumbnail();
}else{
   //画像がない場合の処理
}

本題、まずはfunction.phpに書いてみます。

function.phpに以下のコードを書きました。

if (function_exists('add_theme_support')) {
    // アイキャッチ画像を有効
    add_theme_support( 'post-thumbnails' );

    // アイキャッチ画像[post-thumbnails]のサイズ設定
    set_post_thumbnail_size( 190, 190, true );

    // アップロードするときに変換される画像のサイズを追加する
    add_image_size( 'thumbCategoryA', 190, 50, true );
    add_image_size( 'thumbCategoryB', 190, 300, true );
    //paka3_category_thumbの呼び出し
    add_filter( 'post_thumbnail_html', 'paka3_category_thumb',10,3);
}

function paka3_category_thumb($html, $post_id, $post_thumbnail_id){
    if(is_home()){
     //現在の記事のカテゴリから、どの画像を表示するか判別する
     foreach(get_the_category() as $cat){
       if($cat->cat_ID ==3){
	  $image = wp_get_attachment_image_src($post_thumbnail_id, 'thumbCategoryA');
	   return "<img alt="" src=".$image[0]." />";
       }elseif($cat->cat_ID ==12){
	  $image = wp_get_attachment_image_src($post_thumbnail_id, 'thumbCategoryB');
	   return "<img alt="" src=".$image[0]." />";
       }else{
	   return $html;
       }

     }
    }
    return $html;
}

テンプレートに書く命令は、the_post_thumbnailを使って書いてください

if(has_post_thumbnail()) {
   //画像がある場合
   the_post_thumbnail();
}else{
   //画像がない場合の処理
}

ポイントはどこ？

アップロードするときに変換される画像のサイズをadd_image_sizeで追加する(WordPress Codex)
```
    add_image_size( 'thumbCategoryA', 190, 50, true );
    add_image_size( 'thumbCategoryB', 190, 300, true );
```
カテゴリ毎に分岐する画像サイズを追加します。ここでは通常のサムネイルの他に「thumbCategoryA」「thumbCategoryB」という２種類を追加します。
アイキャッチ画像（サムネイル）をhtml出力するpost_thumbnail_htmlをフックします。
```
add_filter( 'post_thumbnail_html', 'paka3_category_thumb',10,3);
```

is_home()でトップページかどうか判別

function paka3_category_thumb($html, $post_id, $post_thumbnail_id){
           if(is_home()){
             //処理
           }
         }

現在の記事のカテゴリから、どの画像を表示するか判別する
そして、wp_get_attachment_image_srcで画像のURLを取得します(WordPress Codex)

       //カテゴリIDが３のとき
       if($cat->cat_ID ==3){
          //画像のURLを取得する
	  $image = wp_get_attachment_image_src($post_thumbnail_id, 'thumbCategoryA');
	   return "<img alt="" src=".$image[0]." />";
       //カテゴリIDが12のとき
       }elseif($cat->cat_ID ==12){
//画像のURLを取得する
	  $image = wp_get_attachment_image_src($post_thumbnail_id, 'thumbCategoryB');
	   return "<img alt="" src=".$image[0]." />";
       //その他は普通のサムネイル
       }else{
	   return $html;
       }

imgタグを生成して、returnします。

コードをプラグイン用のファイルにします

それではfunction.phpに書いたコードを消して、
「paka3_category_thumb.php」というファイルを作成し、以下のコードを記入します。

このファイルを[wp-content]>「plugins」ディレクトリに入れ、管理画面で有効にして完了です。

今回のまとめ

前述にも書いた通り、フィルターフックをわざわざしなくてもテンプレートにプログラムを書けば実装することが可能なきのうです。でも、せっかくなのでプラグインを作ってみました。カテゴリや画像サイズなどは管理画面を作って設定させてあげても良さそうです。

アイキャッチ画像（サムネイル）を、カテゴリ毎にサイズを分けて表示する その１:【23日目】WordPress1日１プラグイン