cocoonフック調査～get_post_navi_thumbnail_sizeの使い方と活用例

タナビーの高梨です。

WordPressのテーマ「Cocoon」には、テーマ改変なしでデザインや動作を拡張できる豊富なアクション・フィルターフックが用意されています。

分かる範囲で内容を調査したのでブログにまとめていこうと思います。

今回はページ送りナビカードのサムネイルサイズを変更できるフィルターフックである
get_post_navi_thumbnail_size
です。

フックの概要

フックの発火条件

フック自体はページ送りナビカードが表示されれば無条件に発火します。

そのため、ナビカードがテンプレート上に出力されていれば、自動的に反映されます。

使いどころ

このフックを使うことで、表示するサムネイル画像のサイズ（small、medium、large など）を変更できます。

最初は「画像を大きくしたり小さくしたりできるのか？」と思いましたが違いました。

直感的に言うと、

「画像の大サイズ、中サイズ、サムネイルサイズ、というのがあるが、ソースとして使われる画像として、どのサイズの画像を使うかを設定できる」

です。

ただし重要なのは、このサイズの画像の既に生成されている必要があるという点です。

下のカスタマイズコード例で公式サイトから引用したコードを見ると分かるように、あらかじめadd_image_sizeで画像サイズを追加しておく必要があります。

サムネイル画像そのものは画像サイズが追加された後にメディアに登録しなければなりません。

過去に登録したサムネイル画像のサイズを変えたいと思っても、そのサイズで画像として登録されていない以上は出しようがありません。

これは公式サイトにも書かれているように、Regenerate Thumbnailsなどのプラグインを使ってサムネイルを再生成する必要があります。

おまけに、公式サイトでは「縦長の画像サムネイルを設定したい」という需要に対応と書かれていますが、これもよくわかりません。

実際に縦長（横：縦＝１：２）の画像サイズをadd_image_sizeで追加して、正方形の画像登録してみたところ、縦長に表示されるのではなく、表示領域は変わらず領域全体を覆うように表示されます。

CSSを見ると、object-fit: cover;になっているので当然そうなります。

aspect-ratioもcocoon設定で変更できるのは正方形以外は横長しかなく、「縦長の画像サムネイルを設定したい」に対してどうすればよいのか分かりません。

CSSのobject-fitとaspect-ratioを書き換えてサイズ調整すればよいのかもしれませんが、それなら最初からデフォルトの画像サイズで対応できそうです。

apply_filters呼び出し元のソースコード

apply_filters( 'get_post_navi_thumbnail_size', $thumbnail_size );

引数

$thumbnail_size：（string）サムネイルサイズ名

カスタマイズコード例

add_image_size( 'post_navi_thumb', 120, 63, true );
add_filter( 'get_post_navi_thumbnail_size', function () {
  return 'post_navi_thumb';
} );
// 公式HPより引用（https://wp-cocoon.com/thumbnail-size-custom/)

注意点

・サイズ名を指定するだけでは表示は変わりません。 対応する画像サイズがメディアライブラリ内に存在していなければなりません。

・過去にアップロードした画像にも新サイズを適用したい場合は、Regenerate Thumbnails プラグインを使用してサムネイルを再生成する必要があります。

・「縦長の画像を表示したい」と思っても、実際の見た目は CSS の object-fit: cover; によって、画像の中央を切り出す形で表示されるため、見た目が縦長になるとは限りません。

まとめ

get_post_navi_thumbnail_size フィルターは、ページ送りナビカードのサムネイルサイズ名を切り替えるためのフィルターフックです。

ただし、見た目を思い通りに変えるためには、次の点に注意する必要があります：

・表示したい画像サイズを add_image_size で登録しておく

・対象の画像がそのサイズで生成されている必要がある（再生成が必要な場合も）

・サムネイルの表示は object-fit や aspect-ratio に依存しているため、表示のコントロールはCSS側の調整も必要と思われる

何か違った使い方があるようであれば教えていただけると幸いです。