当サイトには広告が含まれております

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

この記事は最終更新日から8年経過しています。内容が古い可能性があります。

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

記事をざっと見る

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

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

https://wp-simplicity.com/

それまではトップのタイル状の画像を記事から取得して生成していたため、最初に表示するときはだいぶ時間がかかりましたが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

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントを残す

記事をざっと見る