2013
12
20

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

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


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

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

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

131220-1

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

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

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

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

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

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

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

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

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

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

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

OGP設定に組み込んでみる

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

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

余談

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

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2013/12/20
更新日:2014/02/26


2件のコメント

  • すしぱく
    2013年12月20日 12:03 PM

    宣伝ありがとうございますw 意外とアイキャッチがアマゾンアフィの人とか多いですよね。(‘A’)

    • *you
      2013年12月20日 12:46 PM

      ぱくさんありがとうございますw こまめにチェックしとかないと何が起きてるか分かりませんねーw

コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top