2017年5月17日に今まで RYUS blog として運営してきた当ブログを ゆうそうとブログ に名称変更して、urlも変更しました！ドメインの変更や記事のコピーなどやることがたくさんありましたが、なんとか移転が終わったな～と安心していました。
しかしある日気がつくと関連記事一覧の画像一部の画像が ばつ× になってしまっていました。原因がしばしわからなかったのですが、ようやくわかり修正ができたのでそれについて書きます。
移転にともなってテーマをTwentyFourteenの子テーマからSimplicityの子テーマに変更しました
移転に伴って長い間懸案事項だった「テーマの変更」をしました！一番多く触ったことのある Simplicity に変更しました。
それまではトップのタイル状の画像を記事から取得して生成していたため、最初に表示するときはだいぶ時間がかかりましたがSimplicityではアイキャッチから表示するので（これが普通の方法ですが）表示が速くなりました！
しかし、今までアイキャッチ画像を指定していなかったため全部のアイキャッチを指定できるプラグインAuto Post Thumbnailを使って、投稿にアイキャッチ画像を設定しました。以前に記事も書いていますのでこちらもご覧ください。
これでトップページなどは
こんな感じにアイキャッチが表示されていい感じだと思いました。
気がついたら関連記事一覧の一部の画像が バツ× になっていた
ということですっかり安心していたんですが、記事の下に表示される関連記事一覧を見ると
こんな感じに、だいたいのアイコンはいい感じで出ているのですが、このように
一部記事の正方形のアイキャッチが バツ× になってしまっていました。
よく考えてみると古い記事？のアイキャッチがバツになっているみたいです。
バツ×になってしまう原因 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
コメント