[WP] the_post_thumbnail() 画像の出力方法を the_date() で条件分けする

ずーっとやらなきゃと思っていながらズルズルひっぱってたのですが、アイキャッチ画像を大きくしました。OGP向けのワイド比率！　過去のアイキャッチと区別したかったので、指定の公開日を境に the_post_thumbnail() の大きさやクラスを変えて出力されるようにしてみました。というメモ。

OGP画像はアイキャッチがいいよね

このブログを始めて、SNSでシェアされたとき用にOGP画像にアイキャッチ画像が適用されるようにしておいたのが、2012年。それが2013年の終わりごろ、アイキャッチが小さいためにSNSシェアの際、違う画像が適用されてしまう事態に。

まったく関係ない画像が適用されるのも困りものなので、投稿内の画像で大きいものをOGP設定するというテコ入れをしておいたのですが。

今思えば、この時点でアイキャッチを大きくする努力をすべきだったなと(´・ω・)　わざわざ記事の代表的な感じで作ってるのに、それを使えないのはなんだかなーと。。

かといって、過去記事のアイキャッチを全部作り直すわけには…、、という感じで腰が引けてたのですが、指定の公開日の前後で出し分けして…、と、ようやっと構想を決めて切り替えた次第です。

コード

構想としては、

• 指定日以前の記事のサムネイルは小さい、後は大きい・比率が違う
• single.php では、どちらのサムネイルもフルサイズで表示
• index.php では、前者はフルサイズ表示、後者はサイズ指定&独自クラス付加で出力

というのを目指して、以下は index.php でこんなふうにしたよー、という例です。（あっ、PCレイアウトのみです。スマホ版は違うテーマなので）

<?php
if( has_post_thumbnail() ) { //サムネイルがある場合
	if( get_the_date('Y-m-d') <= '2017-05-09' ){ //指定の公開日以前の場合
		$img = get_the_post_thumbnail( $post->ID, 'full', array('alt'=>get_the_title()) );
	} else { //指定の公開日より後の場合
		$img = get_the_post_thumbnail( $post->ID, array(300, 300), array('alt'=>get_the_title(), 'class'=>'myClass') );
	}
	echo $img; //出力
}
?>

4行目は対象記事が指定日以前の場合、フルサイズでaltに記事タイトルを入れて取得してます。6行目は対象記事が指定日より後の場合、大きさを指定（長辺300px）でaltに記事タイトル、独自のクラスを付加して取得してます。

公開日によってどちらかを取得した後、8行目で出力。

前者の場合は以下のような出力となります（大きさはその画像のフルサイズ）。

<img width="220" height="150" src="xxx.png" class="attachment-full size-full wp-post-image" alt="xxx" />

後者の場合は以下のような出力に。指定した大きさと、独自クラス。「wp-post-image」も一緒に出力されるようです。

<img width="300" height="150" src="xxx.png" class="myClass wp-post-image" alt="xxx" />

独自のクラスがつけられれば、あとはCSSでいけますね！　直近1週間の記事だけサムネイルを大きく表示してレイアウトを変えて…、みたいなことにも使えそう。

参考

• テンプレートタグ/get the post thumbnail – WordPress Codex 日本語版
• [WordPress] アイキャッチで出力される img タグ中のサイズやクラスを変更したり削除したりする ｜ memocarilog

Saoriさんいつもありがとうございます♡