WordPressで関連記事一覧の一部の画像が バツ× になってしまうときの修正方法

この記事は約5分で読めます。

2017年5月17日に今まで RYUS blog として運営してきた当ブログを ゆうそうとブログ に名称変更して、urlも変更しました!ドメインの変更や記事のコピーなどやることがたくさんありましたが、なんとか移転が終わったな~と安心していました。
しかしある日気がつくと関連記事一覧の画像一部の画像が ばつ× になってしまっていました。原因がしばしわからなかったのですが、ようやくわかり修正ができたのでそれについて書きます。

移転にともなってテーマをTwentyFourteenの子テーマからSimplicityの子テーマに変更しました

移転に伴って長い間懸案事項だった「テーマの変更」をしました!一番多く触ったことのある Simplicityに変更しました。

Simplicity
内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

それまではトップのタイル状の画像を記事から取得して生成していたため、最初に表示するときはだいぶ時間がかかりましたがSimplicityではアイキャッチから表示するので(これが普通の方法ですが)表示が速くなりました!

しかし、今までアイキャッチ画像を指定していなかったため全部のアイキャッチを指定できるプラグインAuto Post Thumbnailを使って、投稿にアイキャッチ画像を設定しました。以前に記事も書いていますのでこちらもご覧ください。

投稿画像から自動的に画像をアイキャッチを作成する Auto Post Thumbnail
私がblogを書き始めた頃はまだ慣れていなかったのでアイキャッチを指定するのを忘れがちでした。結局は面倒なので1つめの画像をトップページのタイル上の画面で表示するようにしました。アイキャッチをきれいに表示してくれるテーマもあるので、で...

これでトップページなどは

こんな感じにアイキャッチが表示されていい感じだと思いました。

気がついたら関連記事一覧の一部の画像が バツ× になっていた

ということですっかり安心していたんですが、記事の下に表示される関連記事一覧を見ると

こんな感じに、だいたいのアイコンはいい感じで出ているのですが、このように

一部記事の正方形のアイキャッチが バツ× になってしまっていました。

よく考えてみると古い記事?のアイキャッチがバツになっているみたいです。

バツ×になってしまう原因 srcset

バツになってしまってる部分のソースを見ると、

<img width="100" height="38" src="https://usortblog.com/wp-content/uploads/2014/06/Image95.png" class="related-entry-thumb-image wp-post-image" alt="" srcset="https://usortblog.com/wp-content/uploads/2014/06/Image95.png 801w, https://usortblog.com/wp-content/uploads/2014/06/Image95-300x113.png 300w" sizes="(max-width: 100px) 100vw, 100px">

このようになっています。見慣れないコード

srcset="https://usortblog.com/wp-content/uploads/2014/06/Image95.png 801w, https://usortblog.com/wp-content/uploads/2014/06/Image95-300x113.png 300w" sizes="(max-width: 100px) 100vw, 100px"

srcsetというものがあり、ここで指定している

https://usortblog.com/wp-content/uploads/2014/06/Image95-300x113.png

という画像がないためにバツになっているようです。うーん???

ブラウザはchromeでしたので、Ctrl+Shift+i を押してデベロッパーツールを起動してこの部分を変更して直るかどうか見てみました。

デベロッパーツールのこの矢印をクリックして

バツになっている画像をクリック、

ソースの上で右クリックしてから、Edit as HTML をクリックして、

該当ソース部分の srcset から先を削除してみます。すると、

読み通り、画像が表示されました。

srcsetを設定している部分はどこか、探してみた

最初はテーマがこのsrcsetを表示しているのだと思って、探してみましたが見つかりませんでした。そこでインターネットで

wordpress srcset

を探そうとしたら、

wordpress srcset 無効

という候補が現れました。ということはこのsrcset部分はWordPress本体が指定しているのでは?と思いました。

検索して見つかったサイトを見てみました。

WordPressでimgタグにsrcsetとなるのを無効にする
http://qiita.com/osamu1203/items/d2c9aac396ddb59a5974

WordPress4.4からレスポンシブイメージというのが実装された。
imgタグにsrcsetというのが出るようだ。

あ、なるほど。「Wordpress4.4からレスポンシブイメージというのが実装された」それがあのsrcsetあたりのことだったんですね。それまでの記事のアイコンがバツになっちゃってたのかもです。

さっそくこのサイトに書いてあった、

add_filter( 'wp_calculate_image_srcset', '__return_false' );

これをコピーして、子テーマのfunctions.phpに追加してみました。

そして、読み直したところ


こんな感じに関連投稿一覧の画像が全部表示されるようになりました(^^)/

長いことブログを書いていると、時代について行けない記事も出てきちゃうようですが検索するとこのように書いていてくれる方がいるので助かります。ありがとうございましたm(_ _)m

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress theme テーマ 全般
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。