各記事に設定しているアイキャッチ（サムネイル）画像を本文中にテーマ側から自動で挿入する方法です。
いままでクロップした縮小画像を呼び出していたので、オリジナルサイズで呼び出せることに気付いてませんでした。
画像1枚分の手間ではありますが、メディア追加による張り込みをしなくて済むので管理の手間が省けます。同時に記事を書くことに少しだけ集中できるのでオススメ。(・∀・)
アイキャッチ画像に元ファイルを呼び出す
アイキャッチ（サムネイル）画像を呼び出すときは the_post_thumbnail 関連の関数を使います。
縦横サイズについて、普通はダッシュボードで設定した値か functions.php で設定したサイズ（後述）を指定してると思います。
このとき、フルサイズを指定することも出来るのですね。
デモ
表示の都合で縦横比を歪めてますけど、実際は通常サイズで張り込まれるのでご安心下さい。
サムネイル画像を原寸で呼び出す方法
【PHP】
the_post_thumbnail( 'full' ); // フルサイズ表示
サムネイル画像を原寸で呼び出すには、テンプレートタグに ‘full’ を指定します。
これまで the_post_thumbnail() などのサムネイル系関数には縮小サイズしか使えないんだと思い込んでいたのですが、Codex見たら普通に原寸で使えると書いてありました。(^^;
「縮小サイズ」というのは、ダッシュボードのサムネイル項で設定した値と functions.php で定義した値のことです。
サムネイルの表示用関数を作る
画像の呼び出しには記事IDからサムネイルを引くテンプレートタグ get_post_thumbnail_id() を使います。
wp_get_attachment_image_src() を使うと画像の属性が配列に入るので、色々と変数を作る作業が不要です。ものぐさに便利。
【 wp_get_attachment_image_src() 】
Array (
[0] => $url
[1] => $width
[2] => $height
[3] => // 真偽値: リサイズされてる場合は true、元サイズの場合は false
)
alt 属性も入れてほしかったところですが、とりあえず関数部分を作ります。
【PHP】
function ozArticleThumbnail() {
global $post;
$title = $post->post_title;
$imgId = get_post_thumbnail_id();
$img = wp_get_attachment_image_src($imgId, 'full');
if($img) :
return '
<img src="'. $img[0] .'" alt="'. $title .'" width="'. $img[1] .'" height="'. $img[2] .'" class="ozThumbnail" />
';
else :
// アイキャッチがないときに出す画像などの処理
endif;
}
テンプレートファイルからのサムネイル呼び出し
本体の関数が出来たら、次は表示部です。次の1行を single.php 本文の好きなところに貼って下さい。
【single.php】
<?php echo ozArticleThumbnail(); ?>
これで記事とサムネイル画像を紐づけると記事中にも反映されるようになりました～。レイアウトを変えたくなったときでもテーマ側で一括変更できます。(´ω｀*)
やっぱり縮小画像を使いたいときは…
【PHP】
$img = wp_get_attachment_image_src($imgId, 'thumbnail'); // デフォルトサイズ
「やっぱり小さい画像でコンパクトにまとめたい！」…というときは呼び出しサイズを変えればOKです。テーマ側で全部画像が変わるのまじ便利。(⊙Д⊙)
サムネイル設定 基本のき
ついでにサムネイル（アイキャッチ）画像を設定するときの基本的な手順についても書いておきます。
サムネイルの有効化
【functions.php】
// サムネイルの有効化
add_theme_support( 'post-thumbnails' );
テーマファイルでサムネイルを扱えるようにするには、まず functions.php から有効化する必要があります。多くのテンプレートで有効化されていると思いますが、念のため。
アイキャッチサイズの初期設定
【functions.php】
// デフォルトのアイキャッチ画像サイズ
set_post_thumbnail_size( 90, 90, true );
アイキャッチ画像はデフォルト値を変更できます。サンプルは 90px x 90px の画像を使うときの指定です。大きい画像から設定値に切りぬくときは true 、切り取らず縮小するだけに留めるときは false を指定して下さい。
ちなみに、切り取りアクションはファイルアップロード時にのみ実行されます。横長画像を切り取る場合は、基本的に縦の数字を合わせてから余剰の横を裁ち落とす仕様なので、人目を引くためのフォーカルポイントは中央に持ってくると良いでしょう。
切り取りサイズ自体はいつでも自由に設定できますが、それ以前の画像には適用されないので注意しましょう。結構途中で変えたくなって葛藤するので設定は計画的に。
複数のアイキャッチサイズを設ける
また、複数のアイキャッチサイズを設けたい場合は次の要領で増やせます。
【functions.php】
// アップロード時に生成される画像サイズを増やす( $name, $width, $height, $crop );
add_image_size( 'thumbnailSmall', 60, 60, true );
add_image_size( 'thumbnailWide', 300, 180, true );
項目自体はいくらでも増やせますが、切り抜く場合はその分のファイル数と容量が増えるので気をつけましょう。
それと、functions.php に限らずテーマファイルを編集するときはバックアップをお忘れなく。( ・`д・´)
おわりに
そんなわけで記事に大きな画像を自動張り込みする方法でした。
うちは長文記事が多いので、常に読みやすいレイアウトを目指しています。今回その一環としてアイキャッチをテーマ側で管理してみることにしました。
本音を言うとPC用テーマのメインカラムをもう少し広げたいんですけど、今さら過去画像の横幅を広げるのも大変ですし、まずは現状維持で。実際問題として今現在7割以上がモバイルアクセスなので、PC向けのデザインを注力する意味があるかどうかも判らないんですけどね。
あれこれ悩んだ暫定策としてセンタリングしてみたら意外と馴染んじゃったので、しばらくこれで様子を見てみます。
【 更新履歴等 】
2015/11/16 初稿発表
旧題：WPアイキャッチ画像をオリジナルサイズで記事本文に自動で貼る
コメントをどうぞ(´ω｀*)