今回は、WordPressで関連記事などにサムネイルが使われていない時の解決法を書いて行きたいと思います。
使用しているテーマはCocoonですが、Cocoonは関係ないです。
以前ページがやたら重いことに気づいて色々調べていたら僕の運営するサイトの一つがサムネイルが表示されていないことに気づきました。
無駄に大きな画像の読み込みの停止
僕が運営している一部のブログでサムネイルが適切なサイズで表示されていないという問題がありました。
普通、WordPressでは、画像をアップロードするとサムネイル用の小さな画像がいくつかアップロードされていると思います。参考画像で使われているような記事一覧や関連記事の表示に使われている小さなサムネイルには
-160×90.jpg
-150×150.png
このように画像URLの後にサイズが入って適切なサイズの画像が読み込まれていると思います。
僕のブログではこれがサムネイルでもフルサイズの画像が読み込まれていました。関連記事が５個あったら小さな画像が表示されるところフルサイズの画像が５個も表示されていたんですね( ;∀;)
同じ画像で、フルサイズで80KBで表示されている画像が、サムネイルサイズだと8KBとなんと！その差は10倍
表示していたブログは６個の関連記事と次の記事へのリンクが２つで計８つだから、64KBで済んでいた読み込みが640KBも読み込んでいたんですｗ
Cocoonの高速化
CSSを縮小化するにチェックが入っていると縮小されたサムネイルが正しく表示されない場合もあるようです。
当サイトでは、CSSの縮小化にチェックが入っていても問題なく縮小されたサムネイルが表示されていますのでサムネイルが表示されていない方は、入れているプラグインが関連しているかもしれません。
サムネイルサイズが大きかった原因
最初は、uplordsフォルダにサムネイル画像が作成されているかどうかも確認せずに「そうだ！サムネイルが作成されていないんだ！」と思って
「Regenerate Thumbnails」というサムネイルを後から作ってくれるプラグインを使ってみたところ
エラー: 元の画像ファイルが https://hogehoge.info/wp-content/uploads/2021/10/hogehoge.jpg の uploads ディレクトリで見つかりませんでした。見つからない場合、新しいサムネイルは生成されません。
というエラーがでます。画像は表示されているのに画像が見つからないとはどういうことだ？と思い何度かやってみたけど結果は同じでした。アップロードフォルダには画像は確かにあり、そもそもプラグインを使うまでもなくサムネイルも作成されていました。
これにはWordPressの仕様が関わっていたようです。
WordPressにはアップロードには２つの方法があります。
メディアにアップロードする方法と記事に直接挿入する方法です。どちらにしても同じようにuploadsフォルダに保存はされサムネイルも作られます。記事にアップロードした画像は記事と画像が「記事Aに使われているのは画像B」という風に親子関係を持ってデータベースに登録されていますが、メディアからアップロードして記事に使った場合は記事と画像が親子関係を持っていないようです。
「Regenerate Thumbnails」ではアイキャッチとして使われている画像からサムネイルを作成してくれますが、「記事Aに使われているのは画像B」という情報からサムネイルを作っているので宙ぶらりんになっているメディアの画像からはサムネイルが作れなかったんだと思います。
関連記事にも同様のことが起こっているのでしょう。僕のまとめサイトは大量の記事を投稿していますので、最初に使われている画像は直接メディアにアップロードして同じ画像を使い回しています。
Associate Attachment
プラグイン「Associate Attachment」を使うことで画像と記事を再度関連付けしてくれます。
存在するサムネイルサイズを無理矢理、呼び出す方法
ありがたいことに僕の使っているテーマcocoonでは色々とカスタマイズしやすいように作成されているようなので、助かります。
cocoonでは、親テーマと子テーマ、二つのテーマが使われていますが、カスタマイズは子テーマを使用するようになっています。
こうすることで親テーマがアップロードされた場合でも子テーマを編集する手間がなくなります。親テーマを編集してしまうとアップデートの際にまた編集することになるのでかなり面倒です(体験談)
/public_html/hogehoge/wp-content/themes/cocoon-master/tmp
に色々とファイルが入っていますが、同じように子テーマにtmpフォルダにファイルがあった場合、そちらの中身が優先して読み込まれるのも便利です。
/public_html/hogehoge/wp-content/themes/cocoon-child-master/tmp
というフォルダは子テーマにはないので作成します。
親テーマにcocoon-master内にあるrelated-entry-card.php（関連記事ファイル）とpager-post-navi.php（ページングファイル）を子テーマの作成したtmpにも入れます。
pager-post-navi.phpでは35行目と51行目付近
get_post_navi_thumbnail_tag( $prevpost->ID, $width, $height ).
この部分が画像になっていたので、３５行目
$thumimg = get_post_navi_thumbnail_tag( $prevpost->ID, $width, $height );
if (!preg_match("/-[^0-9]x[^0-9].(jpg|png|gif)$/u", $thumimg)){
$thumimg = preg_replace("/.jpg/msi", "-120x68.jpg", $thumimg);
$thumimg = preg_replace("/.png/msi", "-120x68.png", $thumimg);
$thumimg = preg_replace("/.gif/msi", "-120x68.gif", $thumimg);
}
echo "$thumimg";
このように置き換えました。５１行目はこうです。
$thumimg = get_post_navi_thumbnail_tag( $nextpost->ID, $width, $height );
if (!preg_match("/-[^0-9]x[^0-9].(jpg|png|gif)$/u", $thumimg)){
$thumimg = preg_replace("/.jpg/msi", "-120x68.jpg", $thumimg);
$thumimg = preg_replace("/.png/msi", "-120x68.png", $thumimg);
$thumimg = preg_replace("/.gif/msi", "-120x68.gif", $thumimg);
}
echo "$thumimg";
related-entry-card.php（関連記事ファイル）では１７行目付近にある
echo get_the_post_thumbnail($post->ID, get_related_entry_card_thumbnail_size(), array(‘class’ => ‘related-entry-card-thumb-image card-thumb-image’, ‘alt’ => ”) ); //サムネイルを呼び出す
この部分を同様に置き換えると縮小されたサムネイルが表示されます。普通に記事に画像をアップロードしていてサムネイルが表示されている記事もありましたので正規表現で、サムネイルが呼び出されていない箇所にはサムネイルが表示されるように置き換えています。
まとめ
今回は、自分で作り出した、サムネイルが使われていないという不具合を修正してみました。このぐらいだと、これでサックサクになったぞーっと言えるほど劇的な変化はありませんでしたが、かなりリソースの節約になったのではないかと思います。
カルーセルも同様にやらないといけないんですが、カルーセルは高速化を考える場合評判が良くなさそうなので、使うことはないと思いますのでそのままにしています。
コメント