はてな風ブログカードでアイキャッチ画像が表示されなかった原因と対処方法

今回はWordpressで、はてな風ブログカードを使ったときにアイキャッチ画像が表示されない原因と対処方法を紹介します。

WordPressのバージョンは5.4.2です。
ちなみにWordpressのバージョンはダッシュボードの概要欄に表示されています。

今回使用した、はてな風ブログカード

今回使用したはてな風ブログカードは、追加のプラグインなしでfunction.phpとCSSでコーディングするパターンのはてな風ブログカードにしました。

以前、別のサイトで使っていたものをそのままコピーして使おうとしたのですが、全くアイキャッチ画像が表示されませんでした。

困り果てて、PHPにもwordpressにも詳しくないので、ネットでググって同じようなソースコードを手当たり次第に試してみました。

結果的にはどれもアイキャッチ画像が表示されませんでした。

解決までに試みたこと

１．ALL IN ONE SEO PACKの設定

別の方も書いていたのでALL IN ONE SEO PACKのソーシャルメディア設定を変更してみました。

ソーシャルメディアの「画像設定」という欄の「OG:Image ソースを選択」という項目で「アイキャッチ画像」を選択しました。

この変更を適用しても、今回はアイキャッチ画像が表示されることはありませんでした。

２．アイキャッチ画像取得プログラムの変更

結果的にはアイキャッチ画像の取得を行うfunction.phpのプログラムを変更しました。
具体的には「has_post_thumbnail」という関数を使うのを止めました。

元のプログラムソース（一部抜粋）が↓のような感じです。※全く同じではありません。

// 画像の取得
if(has_post_thumbnail($id)) {
    $img = wp_get_attachment_image_src(get_post_thumbnail_id($id));
    $img_tag = "<img src='" . $img[0] . "' alt='{$title}' width=" . $img[1] . " height=" . $img[2] . " />";
}else{
    $img_tag ='<img src="'.$no_image.'" alt="" width="150" height="150" />';
}

どうやらURLから投稿IDを取得し、題名や抜粋文は取得できているにも関わらず、アイキャッチ画像だけが取れていませんでした。elseのソースコードに「$img_tag ='<img src=”‘.$no_image.'” alt=”” width=”150″ height=”150″ />’;」と記述すると、サイズは取得できていたので条件分岐でelseに入っていることは分かりました。

つまり、「has_post_thumbnail($id)」というアイキャッチ画像が存在するかどうか判定する関数だけが上手く機能していないことが分かりました。has_post_thumbnailが機能しない事例を見つけることが出来なかったのですが、この関数を使わずに処理を実行する方法を考えました。

これまで通り、「wp_get_attachment_image_src」関数でアイキャッチ画像の情報を取得し、「wp_get_attachment_image_src」関数の結果でアイキャッチ画像の存在有無をチェックしてみました。

「wp_get_attachment_image_src」関数は、画像があれば画像のURLやサイズを配列で返しますが、画像がなければfalseを返します。

$img = wp_get_attachment_image_src(get_post_thumbnail_id($id));
if($img){
    $img_tag = "<img src='" . $img[0] . "' alt='{$title}' width=" . $img[1] . " height=" . $img[2] . " />";
}else{
    $img_tag ='<img src="'.$no_image.'" alt="" width="150" height="150" />';
}

このfunctionに変更して実際に実行すると画像が表示されました。
また、画像がない場合は何も表示されない状態となりました。（特にエラーは出ませんでした。）

ちなみにブログカードは↓のように表示されました。