post_thumbnail_htmlフックを使って、画像周りを一括管理する方法

WordPressのテーマ【JIN】を子テーマでカスタマイズするにあたり、ゴリゴリカスタマイズしていると、アップデートがあった時に、ファイル差分チェックの必要があります。

ちょっと面倒臭いなと思い始めて、WordPressのフィルターを使って、出来るだけファイルをシンプルにすることにしました。

WordPressのテーマ【JIN】本体もサムネイル部分のソースが何度も表示されているので、こうしたら簡素化できるよ！という例でもあります。

the_post_thumbnailにはフィルターがある

WordPressのテーマでサムネイル表示をする際、the_post_thumbnailを使いますが、記事ページやカテゴリーページなどでは、表示サイズが異なると思います。

トップページやカテゴリーページ、アーカイブページなどソースが同じ場合、同じテーマ内に同じソースを何度も表示する際、管理上面倒臭いです。

それらを1つにまとめて、WordPressのテーマを管理しやすいように、post_thumbnail_htmlフックを使います。

post_thumbnail_htmlの使い方

WordPress Codex 日本語版には掲載されていません。

なので、WordPressの本家で確認してください。
と言っても例が載っていないので分かりづらいので、私の適当に書いたソースで我慢してください…。
※私はプログラマーではなく、あくまでマークアップエンジニアです(^_^;)

• post_thumbnail_html | Hook | WordPress Developer Resources

一応私がカスタマイズしたものをGithubに載せてきます。

ですが、このソース動作するか分かりません(^_^;)
このソースは元々画像を外部URLにするようにカスタマイズしていたものを、かなり削ぎ落として掲載しています。

また、このソースはecho.jsを導入済みを想定して書いています。

上記のソースをfunctions.phpに記載して、画像表示している全て（prevnext.php以外を除く）のphpファイルの画像部分を下記に書き換えます。

例えば、single.phpのアイキャッチの場合は、下記に書き換えます。

<?php echo the_post_thumbnail(); ?>

この方法は、functions.phpで全てのファイルの画像部分を制御できるので、管理がしやすくなります。

the_post_thumbnailを挿入する場所によって画像サイズを変えたい場合は、下記のように記載します。

<?php echo the_post_thumbnail('cps_thumbnails'); ?>

もし上記の画像サイズ（JINテーマでいうと、large_size、small_size、cps_thumbnails）で条件分岐をしたい場合は、下記のソースでできます。

function custom_thumnail($html, $post_id, $post_image_id,$size,$attr){
    if($size == 'large_size'){
    }elseif($size == 'small_size'){
    }elseif($size == 'cps_thumbnails'){
    }
}

応用の幅が広がりますよね！