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

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


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

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

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

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

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

コード

構想としては、

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

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

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

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

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

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

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

参考

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

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

公開日:2017/05/15


コメントを残す




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


back to top