WordPressのサムネイル画像に属性と値を追加する方法。

基礎知識バッチリでプログラミングしている方には考えられないかもしれませんが、僕はたまに、自分でもよくわからないままカスタマイズに成功することがあります。

最近も、「サムネイル画像に独自の属性を追加する方法」を偶然発見しました。調べ方が悪いのか、情報がないのか、正攻法ではないのか、よくわかりませんが、試行錯誤していたらいつの間にか画像に属性が追加されていました。笑

jQueryを使えば一発なんですが、AMPとの兼ね合いもあり、それは断念。PHPだけで操作することに成功しました。

ということで今回は、僕と同じ悩みを持っている方に向けてその方法をご紹介します。

概要

まず、今回のカスタマイズは、WordPressの関数である、the_post_thumbnail()でのサムネイル画像出力をコントロールするものになります。

通常は、get_the_post_thumbnail()でソース(画像URL)を取得して、属性をセットしたimg要素の一部として使うことで対応すると思いますが、今回の方法を使えば、その手間がかかりません。

(もちろん、the_post_thumbnail()で出力した場合の固有の属性などはそのままです)

カスタマイズ方法

具体的なカスタマイズ方法がこちら。下記のように記述することで属性が付与されます。

the_post_thumbnail('','itemprop=image')

冒頭で述べたように、このように記述することでどうして属性が追加されるのか詳しく説明できません(笑)

body_class()の中にクラス名を追加するのと同じようにできないかな〜と、試行錯誤していたらこの形にたどり着きました。

the_post_thumbnailのCodexによると、(サイズ,属性コントロール)の順番になっているようですが、最も理解に苦しむのは、「属性=”値”」ではなく、ダブルクォーテーションがない「属性=値」の形になっていること。

この形なのに、出力結果はちゃんと「属性=”値”」になるんです。(ダブルクォーテーションを付けると正常に出力されません)

属性コントロールの配列を変更しているわけでもないのに、本当に謎です。。笑

追加する属性は何でもOK

ちなみに、今回は構造化データのエラーをなくすためにitempropを追加しましたが、同じようなやり方でどんな属性でも追加できます。

(もちろん、すでにthe_post_thumbnail()に含まれている属性はNGです)

普通の文字列を出力するような感覚で操作すればいいので、特に難しいこともないと思います。

以上、ご参考までに!(`・ω・´)ゞ

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!