WordPressで携帯・スマートフォン用テーマにアイキャッチ画像を表示する方法

WordPressので使えるアイキャッチ画像。みなさん使っていますか？

アイキャッチ画像とは、投稿にサムネイル画像を追加する機能なんですが、
設定しておくと、記事のヘッダー画像としてなかなか便利に使えます。

しかしながら、プラグインで携帯・スマートフォン対応すると標準では表示されません。

ktai styelやwp touchというプラグインでも表示するように対応したのでやり方をご紹介します。

アイキャッチを使えるようにする

まずはアイキャッチ画像を使えるようにします。
これはfunction.phpに以下の１文を追加するだけでOKです。

add_theme_support( 'post-thumbnails' );

さらに携帯用、スマートフォン用に画像サイズを最適化します。
これもfunction.phpに追記していきます。

//PC版の画像サイズ 横550でリサイズするようにします。
set_post_thumbnail_size( 550, 9999 ); 

//携帯版画像サイズ 横189でリサイズします。
add_image_size( 'ktai-thumbnail', 189, 9999, true );

//スマートフォン版画像サイズ 横280でリサイズします。
add_image_size( 'sp-thumbnail', 280, 9999, true );

Ktai Styleにアイキャッチ画像を追加する

携帯版の表示にはKtai Styleというプラグインを使用していますが、
携帯用テーマにアイキャッチを追加する方法です。

ktai-style/themes/sigle.php の本文の直前に以下のコードを追加しました。

//追加するコード
the_post_thumbnail('ktai-thumbnail');

//本文表示部分
ks_content(__('(more...)'));

これで携帯版は完了です。

ただし、ktai_style/themes/ 配下のテーマを直接改造している場合はプラグインのアップデートで上書きされる可能性があります。

wp-content/ktai-themes/ ディレクトリーを作成して移動しておいてください。

wp touchにアイキャッチ画像を追加する

wp touchというプラグインのテーマにアイキャッチを追加する方法です。

テーマファイルは
wptouch/themes/以下にあります。

sigle.phpの30行目辺りにある the_content(); の前に
以下のコードを追加しました。

if (has_post_thumbnail()) :
    the_post_thumbnail('sp-thumbnail');
endif;

これでスマートフォン版も対応できました。

メール投稿の添付画像をアイキャッチにする方法

Ktai Entryを使って、メール投稿の画像をアイキャッチにしたい場合の対処方法です。

以下の投稿を参考にさせて頂きました。
ktai entry のアイキャッチ画像対応

プラグインの
ktai_entry/post.phpの1050行目に以下の一文を追加すればOKでした。

update_post_meta( $post_id, '_thumbnail_id', $id );

これで添付ファイルがアイキャッチ画像として登録されるようになります。

以上、WordPressで携帯・スマートフォン用にアイキャッチ画像を設定するためにやったことでした。
もっと簡単な方法があれば教えてください 🙂