WordPressのアイキャッチの表示をフィルターフックでカスタマイズしてみる

ブログにおいて、記事タイトルの横にちょこんとした添えもの程度だったアイキャッチが、今では重要な要素となっている。WordPressのテーマでも、Twenty Tenのころにはその存在すらなかったものの、Twenty Fourteenあたりから大きく扱われるようになった。

アイキャッチを表示

WordPressのテーマでアイキャッチを表示するには、テンプレートタグthe_post_thumbnail()を使う。画像に対して表示を調整したい場合は、cssでしかできないのか？それとも、出力されるimgタグをカスタマイズすることができるのか？

アイキャッチをカスタマイズ

私が公開しているテーマBirdSITEでは、正方形240x240pxのアイキャッチを表示している。画像の縦横短い方を240pxで表示し、はみでた分はセンタリングだ。

つい最近までJavaScriptで行なっていたものの、styleを後からつけるためか再配置する際の画像のズレが気になっていた。そこでPHP(テンプレート)側で出力されるタグを変更できるのかどうか？考えてみた。

JavaScriptで行う場合

• ページのレンダリング完了後、表示された画像のサイズを取得
• 見せたいサイズ(width、height)を計算
• センタリング位置(top、left)を計算
• imgタグにstyleを追加

PHPで行う場合

• アイキャッチを表示する前に画像の属性(サイズ)を取得する
• 見せたいサイズ(width、height)を計算
• センタリング位置(top、left)を計算
• the_post_thumbnail()にstyle属性を追加。

やっていることは同じながら、タイミングを変えることで表示の印象は変わった。

フィルターフックでカスタマイズ

the_post_thumbnail()の出力をカスタマイズするためのフィルターフックがあると後から知った。post_thumbnail_htmlである。以前からあるというのに、急に気づいた。
せっかくだから使ってみよう。

メリット

アイキャッチをアンカーやdivで囲みたい欲求もよくある。
その場合は、

というようにアイキャッチがあるかどうかを確認する必要がある。かわりにフィルターフックを使えば、アイキャッチが存在する場合のみフックにくるので、フックの中でアンカータグなどを追加することができる。

具体的な方法がこちらにあった。
» テンプレートタグ/the post thumbnail – WordPress Codex 日本語版

デメリット

フィルターフックでカスタマイズした場合、あらゆる箇所に影響してしまうのが難点だ。テーマ内だけでなく、アイキャッチを利用したプラグインがある場合には、そちらにも影響するおそれがある。the_post_thumbnail()の$sizeパラメータに特別な文字列を指定することで、範囲を限定することにした。
$sizeには’thumnbnail’、’full’など予約語のほか、array( 100, 100 )というような縦横を指定する仕様だ。ここにユニークな文字列を指定してみる。

例えばオレオレアイキャッチを表示する際には、
呼び出し側で、

フィルターフック側で、

こうすればimgタグのクラスに’my_thumbnail’が付与される。$sizeが’my_thumbnail’の場合のみ処理するようにした。

やってみたけど少し悩む。