WordPress単一記事の投稿内画像の大きさでOGP設定を切り替える

facebookでのサムネイルがおかしなことになっていたのでw、投稿内の画像の大きさをすべて参照して、特定の大きさ以上の画像があればその画像を、なければ予め用意した画像を指定してOGP設定する、ということをしてみました。

過去の設定では画像が小さすぎる

以前、アイキャッチとして作ってある画像をOGP設定するという記事を書きました。

ところが私がこのブログで使っているアイキャッチの大きさは220×150px。facebook側の推奨画像の大きさがどんどん大きくなり、推奨を外れてしまったんです。しばらくはそれでも候補には出てきていたのですが、遂にここ最近、意図しない画像がサムネイルになってしまうように…。

デバッガーでチェックしてみたところ、「200×200px以上の画像じゃないとダメだよ！勝手に違う画像にしちゃうからね！」とのこと。

投稿内に200×200px以上の画像がない場合、サイドバーに置いてあるぱくたそのバナーが一番適した画像だというw なんかすみません(´Д｀;)

一番簡単なのはアイキャッチ画像のサイズを大きくしちゃうことなんでしょうけど、過去の記事もあるし、今から変えるのもなーと思って、こんな形にしてみました。

投稿画像サイズによって取得する画像URLを変える

<?php
$flag = false;
$images = get_children(array(
	'post_parent' => $post->ID,
	'post_type' => 'attachment',
	'exclude' => get_post_thumbnail_id( $post->ID ),
	'post_mime_type' => 'image'
));
foreach ( $images as $attachment_id => $attachment ) { //記事内の投稿画像をループ
	$image = wp_get_attachment_image_src( $attachment_id, 'full' ); //画像情報を取得
	if ( $image[1] > 200 and $image[2] > 200 ) { //幅と高さの両方が200pxより大きかったら
		$flag = true; //フラグを立てる
		$img_src = $image[0]; //画像url取得
	}
}
if ($flag == true){ //フラグが立っていたら取得した画像
	echo $img_src;
} else { //立ってなかったら用意した画像
	echo 'http://xxx/sample.jpg';
}
?>

現在表示している単一記事の投稿画像（アイキャッチは除く）のサイズをすべて参照して、条件を満たしたものがあるかないかで取得する画像URLを変える、というスニペットです。

wp_get_attachment_image_srcという関数は画像URL、幅、高さの順に配列に格納して返してくれるとのことなので、上記のコードだと

• $image[0] ･･･ 画像URL
• $image[1] ･･･ 幅
• $image[2] ･･･ 高さ

このように扱えます。複数の画像のうち、ひとつでも条件を満たせば、ということをしたいのでフラグを使ってみました。

また、foreachでは、メディアライブラリで投稿と紐付けられた画像を新しい順に持ってくるようなので、どの画像が設定されるかはその投稿次第です。

上のコードでは、条件を満たす最後の画像URL（つまり、メディアライブラリに先に追加された画像）を取得するようになっていますが、最初に見つかった画像（メディアライブラリに後に追加された画像）を取得したい場合は13行目と14行目の間に

break;

を入れて、見つかり次第ループを抜けることで実装できます。

OGP設定に組み込んでみる

では上記で取得した画像URLを、実際にOGP設定に活用してみます。詳しい設定方法は冒頭で紹介した過去記事をご参照ください。

<?php if ( is_single() ): //単一記事の場合 ?>
	<meta property="og:title" content="<?php the_title(); ?>">
	<meta property="og:type" content="article">
	<meta property="og:url" content="<?php the_permalink(); ?>">
	<meta property="og:description" content="<?php the_excerpt() ; ?>"/>
	<?php
	$flag = false;
	$images = get_children(array(
		'post_parent' => $post->ID,
		'post_type' => 'attachment',
		'exclude' => get_post_thumbnail_id( $post->ID ),
		'post_mime_type' => 'image'
	));
	foreach ( $images as $attachment_id => $attachment ) { //記事内の投稿画像をループ
		$image = wp_get_attachment_image_src( $attachment_id, 'full' ); //画像情報を取得
		if ( $image[1] > 200 and $image[2] > 200 ) { //幅と高さの両方が200pxより大きかったら
			$flag = true; //フラグを立てる
			$img_src = $image[0]; //画像url取得
		}
	}
	?>
	<?php if ($flag == true): //フラグが立っていたら取得した画像 ?>
		<meta property="og:image" content="<?php echo $img_src; ?>">
	<?php else: //立ってなかったら用意した画像 ?>
		<meta property="og:image" content="http://xxx/sample.jpg">
	<?php endif; ?>
<?php else: //単一記事以外の場合 ?>
	<meta property="og:title" content="<?php bloginfo('name'); ?>">
	<meta property="og:type" content="blog">
	<meta property="og:url" content="<?php bloginfo('url'); ?>">
	<meta property="og:image" content="http://xxx/sample.jpg">
	<meta property="og:description" content="<?php bloginfo('description'); ?>"/>
<?php endif; ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="fb:app_id" content="アプリID">

単一記事（2～26行）とそれ以外（28～32行）でいろいろ違うので条件分け。33, 34行は共通なのでIfの外に出しておきます。

余談

実は、twitter cardsのほうでは現在の大きさのアイキャッチをOGP画像に設定しても問題なくて、今回のテコ入れはfacebookだけのためです。アイキャッチがサムネイルになってくれたほうが都合が良いのでちょっともったいないとは思っているのですが…。しょうがないか…。_(:3 」∠)_

以上です！どなたかのお役に立てたら嬉しいですー！