やりたかったことはシンプルだった
Gamer Mam!のブログカード・関連記事・ページ送りナビのサムネイルを、スクエア（正方形）にしたい。そしてThcropsで自分が切り抜いた位置をちゃんと表示させたい。
目標はシンプル。でもこれが沼でした……
今回はGeminiとClaudeという2つのAIを使い倒しながら、なんとか解決した実録をお届けします。
まずGeminiと奮闘した
最初はGeminiに相談しながらカスタマイズを進めていました。私のAI活用スタイルとして、カスタマイズ系はGemini、Claudeは制限があるので、温存しておきたくて…
Geminiといろいろ試したのですが、どうしても解決できず。最終手段としてClaudeに相談することにしました。
試したこと全部ダメだった話
Regenerate Thumbnailsで全画像を再生成→ダメ
「キャッシュが古いせいかも」と思ってRegenererate Thumbnailsプラグインで全画像を再生成しました。でも反映されたりされなかったりのまま。
Thcropsで何度も切り抜き直し→ダメ
反映されていない記事のアイキャッチを開いて、Thcropsで切り抜き位置を設定し直して保存。何度やっても結果は同じでした。
キャッシュを削除→ダメ
WP Fastest CacheもCocoonのキャッシュも削除。それでも変わらず。
ページ送りナビは切り抜きが反映されているのに、ブログカードだけダメ。同じ画像なのに場所によって違う結果が出ていて、原因がまったくわからない状態でした。
原因その①：Thcropsの設定でthumbnailにチェックが入っていなかった
Claudeに相談してまず気づいたのが、Thcropsの設定画面の問題でした。
Thcropsは切り抜きたいサムネイルサイズにチェックを入れないと機能しない仕様になっています。確認してみたら……全部チェックなし！
「投稿」のthumbnailにチェックを入れて保存したところ、ページ送りナビがすぐに切り抜いた画像に変わりました！
でもブログカードはまだ変わらず……。もう一つ原因があったんです。
原因その②：PHPのフック名が間違っていた
検証ツールで画像のURLを確認すると、ブログカードはまだ-160x90.jpg（16:9）のままでした。
CocoonはデフォルトでブログカードにTHUMB160（160×90px・16:9）という小さい画像を使っています。これをPHPでthumbnail（300×300px・スクエア）に変更しようとしていたのですが……
// ❌ 効いていなかったコード
add_filter('cocoon_internal_blogcard_thumbnail_size', function() { return 'thumbnail'; }, 99);
このフック名が間違っていたんです！GeminiがネットでCocoonのカスタマイズ情報を調べて提案してくれたコードでしたが、実際のCocoonのソースコードとは違っていました。
ソースコードを直接読んで正解を発見
「実際のCocoonのソースコードを確認しよう」というClaudeの提案で、cPanelのファイルマネージャーからblogcard-in.phpを開いて調べました。
するとブログカードのサムネイルサイズを制御している関数はこうなっていました。
function get_internal_blogcard_thumbnail_size(){
$thumbnail_size = apply_filters('get_blogcard_thumbnail_size', THUMB160);
return apply_filters('get_internal_blogcard_thumbnail_size', $thumbnail_size);
}
正しいフック名はget_internal_blogcard_thumbnail_sizeでした！cocoon_から始まるフック名はCocoonには存在しなかったんです。
ネットの情報が古かったのか、そもそも間違って広まっていたのか……。GeminiもClaudeも最初は間違えました。ソースコードは嘘をつかない！
解決！正しいコードはこちら
functions.phpに書くPHPコード
/* ------------------------------------------------------------
サムネイルサイズ固定
------------------------------------------------------------ */
// ブログカード（正しいフック名！）
add_filter('get_internal_blogcard_thumbnail_size', function() { return 'thumbnail'; }, 99);
// 関連記事
add_filter('get_related_entry_card_thumbnail_size', function() { return 'thumbnail'; }, 99);
// ページ送りナビ
add_filter('get_prev_next_entry_thumbnail_size', function() { return 'thumbnail'; }, 99);
追加CSSコード
PHPでサムネイルサイズをスクエアに変更しても、CSSで表示サイズも指定する必要があります。
/* ブログカードのサムネイルをスクエアに表示 */
.internal-blogcard-thumbnail,
.blogcard-thumbnail {
width: 150px !important;
height: 150px !important;
max-width: 150px !important;
margin: 0 20px 0 0 !important;
flex: 0 0 150px !important;
}
.internal-blogcard-thumbnail img,
.blogcard-thumbnail img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
}
まとめ：解決のポイントは3つセット
今回の問題、原因がひとつじゃなかったのが沼にハマった理由でした。解決には以下の3つが全部必要でした。
まずThcropsの設定画面で「投稿」のthumbnailにチェックを入れること。次にPHPで正しいフック名を使ってサムネイルサイズをthumbnail（300×300）に変更すること。そして最後にCSSでスクエア表示を指定すること。
特にPHPのフック名はネットの情報が間違っていることもあります。うまくいかないときは公式のソースコードを直接確認するのが確実です。
GeminiとClaudeを使い分けながらブログ運営しているのですが、2つのAIがどちらも間違えたのにソースコードを読んで解決できたのは、ちょっと達成感がありました。同じところで詰まっている方の参考になれば嬉しいです！
