関連記事でサムネイルが取得できない時の代替画像読み込みについて

アイキャッチが設定されていない記事の場合はサムネイルにNO IMAGEというのが入ったと思いますが、入りませんか？

> 通常の記事リスト表示の際や記事中のイメージには
> 枠を付ける設定にしておりますが、関連記事の場合はこの
> 枠が表示されないため

ここがいまいちよくわからないんですが、通常の記事リストは枠を付ける設定にしてあって、関連記事に枠が表示されないのは設定されていないからだけですよね？
通常は貼り付けたようにNO IMAGEのサムネイルが出ると思いますが、出ないというのであれば、むしろそっちの方が問題っぽいです。

ここを踏まえて、仮に関連記事にサムネイルが出ない場合はスペースを詰めるほうが正しいのか、画像の本来ある場所に何かしら表示するのが正しいのかでいうと、どちらが正しいのでしょうか？

例えば、.related-entry-thumbの背景に何かしら色を入れておき、::beforeや::afterでno Imageと言うのを入れてある上に画像が重なって置いてあれば、画像がなければno Imageが表示されるようになります。
そもそも関連記事のサムネイルの部分にスペースが開くのはタイトルやらの親部分にmargin-leftが設定されているからで、ここらをうまく設定すればサムネイルがなければその分、タイトルやらが伸縮するようにもできると思います。
そもそも、.related-entry-thumbの中のimgにサイズがあって、.related-entry-thumbにサイズは無いのでimgが無い場合は.related-entry-contentのmargin-leftを取れば良いだけなんですが、そもそも表示のない部分に画像が入っているかどうかをまず調査する必要があります。

IEでは動作しなかったと思いますが、:emptyで.related-entry-thumbがカラなら何かしらするというのもできますし、IE用にjQueryで要素がカラかどうかを調べることもできます。
jQueryで調査するなら、カラの場合は何かしら画像を入れればよいのですが、先にも書いたように普通ならNO IMAGEが入ると思うんですよ。

例えば何かしら別のプラグインを利用して関連記事を表示されているのであればその旨を書いてもらうのと、できればサイトアドレスを公開してもらうのが良いです。
htmlがどうなっているか、NO IMAGEが表示されていないのかどうかも含めて第三者が確認することができます。

ご回答ありがとうございます。

>ここがいまいちよくわからないんですが、通常の記事リストは枠を付ける設定にしてあって、
>関連記事に枠が表示されないのは設定されていないからだけですよね？

カスタマイズ＞画像＞画像効果(ボーダー)

の設定をしておりますが、関連記事に表示される
サムネイルにはどうも影響していないようで・・・。

>通常は貼り付けたようにNO IMAGEのサムネイルが出ると思いますが、
>出ないというのであれば、むしろそっちの方が問題っぽいです。

これはJetpackに付属のPhoton（CDN）の影響の可能性もありますが
今の段階ではわたしの技量ではサッパリでして。

CDNから画像を読み出せない時に代替画像を代わりに読み出すという
JQueryのコードを書かれていた方がいらっしゃいましたが、
パースエラーを解消できなかったので今はそのコードは使用していません。

関連記事の表示には標準の物以外は一切使用しておりません。

Operaを使用しているので要素の検証から見てみたところ、
画像を読み込んでいない様に思えます。

<div class="related-entry-thumb">　==$0

となっています。

本来ならNO IMAGEが入るだろうと思っていたのですが。。

記事リストの場合ですとサムネイルが表示されない時は
(アイキャッチが設定されていない時も含め)
NO IMAGEが表示されます。

サイトアドレスは以下の通りです。
明日はフォーラムを見る事が出来ませんのでご了承下さい。
http://www.centrum.jp/wordpress

宜しくお願い致します。

> 画像を読み込んでいない様に思えます。
確かにimgはカラでした。何かしら手を入れていない場合は何かしらのimgタグが入ると思うんですけどね。これを入れているのはphpなので外からは原因を確認できません。

photonを無効にするだけでおそらくはno imageは直ると思いますが、no imageを出すほうが良いのか、スペースを詰めるほうが良いのかどちらでしょう？

サンプル: cssでスペースをできるだけ埋める　jQueryでno-image表示 | cpdepen

photonが有効である場合、サンプルのjQueryで画像挿入後、photonによって再度かき消される可能性があります。但し画像が入れられるのはコンソールで同内容のスクリプトを実行して確認しました。なので画像がないとかではないですね。

photonは高速化以外にメリットがないのと他所のサーバーなので触れないというのがあります。画像のファイル名を変え、関連記事のスクリプトのサムネイルが無い場合のファイル名を対応させたら復活する可能性もあります。

サンプルのcssはサムネイルがない場合にできるだけ広げるものです。本来:emptyで対応できる部分ですがhtmlに余計なスペースがあるため:emptyが効かないのも確認しました。これら余計なスペースはphpあるいはjQueryで取れるはずですが、それらを使うのであれば別の対応をしたほうがよく、最も簡単なのはまずphotonを無効にすることです。

単純に枠を入れるのであれば、

#related-entries .related-entry-thumb {
  border: 1px solid COLOR;
}

で良いはずですが、.related-entry-thumbはサイズを持っておらず中のimgによってサイズが決められているため、これを逆転させ、

#related-entries .related-entry-thumb {
  width: 100px;
  height: 100px;
  position: relative;
  border: 1px solid COLOR;
}
#related-entries .related-entry-thumb img {
  width: 100%;
  height: auto;
  position: absolite;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

とすることで中身の有無に関わらず指定サイズの枠でボーダーは出せます。

サンプルのcssとjQueryはそれぞれ単体で動作します。あわせても問題はないだろうと思いますが、最終的にどうしたいか(ここが不明なんですが)によって利用する方を選択してください。
またcssはいつものことながらscssで書いてありますのでcss欄の下向き三角よりcssに変換したものを利用してください(見た目はcssなのでこのままでもいけますがベンダープレフィックスがついてないのでそれをつけるために)

毎度丁寧なご回答に深謝致します。
慣れない端末より回答を拝見しております。

ご教授いただいたコードを今日は実行することが出来ませんが、
わたしの考えというか最終的な目的だけをお伝えいたします。

まずPhotonを無効にすることは難しいかなと思っています。
サイトをごらん頂いたかと思いますが、写真が多くXサーバーより兼ねてより
負荷が高いのでプラン変更も視野に入れてほしいと言われており、
少しでも負荷が軽減されるのであればPhotonは外すのは得策ではないと考えております。

また、自分自身・・・いや、皆様にお手を煩わせておいて
こんな事言うのはおこがましいですが、Photonに原因の可能性があるのであれば
同様の問題を抱えている方のトラブル解消にこのフォーラムの
投稿が役に立てばいいなと。

最終的にPhotonが原因でこちらサイドでどうにもならなければ
枠を表示させて見た目の体裁を整えるだけでも十分ですが、
希望を言えば代替画像への差し替えが出来るようになればいいなと思っています。

いや、もちろん本来のNO IMAGEが表示されるのが好ましいのですが・・・。

スキルも無いのに大それた考えだけを好き勝手に書いて申し訳ないです^^;

おそらくですが、photonを切っても全く問題ないと思いますよ。

サイドバー上のyoutubeを動画(埋め込みプレーヤー)で表示せずにサムネイルで表示して、クリックされたら動画を読み込むというようにすれば、これ1つでページ内の画像が仮に60KBだとしたら20枚分です。まぁ単純な容量の計算で転送量とはまた違うため必ずというわけではないですけどね。

この動画が毎回読み込まれているので転送量等も大きくなってしまうのが一つの原因です。autoplayで自動で動画を動かすわけではないのですから表示はプレーヤーではなくサムネイルで良いのです。

photonなんかはデメリットの方が大きいので、外してしまって外部の画像を直接読み込むのも1つの方法かと思います。flickrとかGoogleDriveからも画像は読み込めます。管理が今よりちょっと面倒になるかも知れませんが。

またDisqusなどもあるせいも少なからずあって、ページ全体の読み込みがとても遅いです(ただし、うちの環境はキャッシュなしで見てますのでそのせいもあります)。

photonはlazyloadなどとの相性もあまり良くないらしく、またX-serverの系列のWPXなどのキャッシュする系のサーバーともあまり相性がよくありません。更にはキャッシュ系のプラグインともあまり相性が良くなく、それを考えると転送量やそのあたりの問題と引き換えにphotonを使うのはデメリットしか無いということになります。

またDB経由の画像のみがキャッシュされるので、関連記事などはもしかするとphotonとは関係なくlazyloadのせいかも知れません。

ただlazyloadの場合は、1×1の画像が入ると思うので、今回のように何も入っていないというのはlazyloadのせいというわけではなく、おそらくはphotonとのあわせ技で問題が出ているのかなぁとも思ったり。

転送量の問題はプランを変えることである程度軽減することができますし、それによってphotonを使わずエラーが出ないということになれば一石二鳥ですが、転送量も押さえたいし、問題が出るのもなんとかしたいとなると、画像の「量」が問題なら画像をなるべく使わないようなデザインや方法を考える必要があります。

例えば画像3つを縦に配置して1枚の画像にし、それをalignrightやalignleftで表示することで画像の枚数を減らしてかつ文章量を同じくできます。ただしこの場合はPCなら良いですがモバイルの場合は縦に長いのはあまりよくありません。画像サイズを小さくすることでも解決はできますが、ここらはどうするかいろいろ考えどころです。

しかし僕が思うにまずyoutubeの動画をなんとかするだけで、ページの読み込み毎に比較的大きなサイズのメディアを読み込まなくても良くなりますし、またページ自体がそれだけ軽くなります。例えばプロフィールのページを作ってそこに動画を乗せても良いですし、なんならサムネイル取得とクリックで動画読み込みのスクリプトを作ることもできます。というか既にあります（笑）

更に、他の部分をもう少しチューンすればより速く表示できるようになると思います。

確かX-SERVERでは転送量とかコンパネで見れたと思うので動画を外す方向でその動向を確認しつつ、かつphotonをなんとか無効にできないものかを考えるのが良いかと思います。
X-SERVERならDNSをいじれるのでcloudFlareとかも使えると思います。ただしcloudFlareが落ちれば自分のサイトも落ちるのでそこがデメリットです。CDNを使いたいということなのであればですけどね。
CDNを使わずとも、キャッシュプラグインだけでたいていはイケるはずなんですよ。

エックスサーバーにおける転送量制限と、自分の転送量を調べる方法 | 寝ログ
ここで仮にX10プランだとして1日の転送量は70GBと書いてます。画像だけで言えば、

70GB / (60KB * 20枚) = 58333.3333pv

なんですよ。他の要素もあるので何とも言えませんが、画像だけで言えば1日およそ6万pvあってようやく制限なのです。
しかし今、あるページのトータルサイズを見ると、4153.05KBだったので、

70GB / 4153.05KB = 16855.0824pv

ここで制限です。つまり、トータルサイズを減らせばもっとPVがあっても問題ないことになります。日に17000pvってそこそこ大きなサイトですよ。ここに迫るぐらいに転送量があるとかになると、それはサイトの作り方の問題が結構なウェイトを占めていると思います。

ちなみにサンプルのjQueryでは前レスで書いたようにno imageが表示されるスクリプトです。.related-entry-thumbの中にimgが無い場合に、親テーマのimageディレクトリからno-image.pngを読み込みます。が、photonが効いている場合はもしかすると書き換えが発生するかも知れません。まぁ記事内だけかとは思うんですけどね書き換えされるのは。

おはようございますhidekichiさん、わいひらさん。
毎度丁寧なご回答有難うございます。

今朝から早速サンプルで頂きましたコードを実践･･と思いましたが、
まずはPhotonを無効にして確認してみました。

結果から言いますと各種キャッシュを全てクリアしてから
確認致しましたが状況は変わらずでした。
前後記事へ誘導するサムネイル付きのページネーションには
NO IMAGEが表示されますが、関連記事部分は相変わらず
要素が読み込まれていない状況です。

その後頂いたコードをcssコンパイル後に子テーマのcssファイルに、
JQueryは子テーマのfunctionファイルに記述して
再確認しましたがNO IMAGEは表示されません。
しかし、記事タイトルと抽出本文が今まで飽きっぱなしだった
空白を埋めるように左寄せとなり
体裁は整っているように見えます(⌒-⌒; )

ページのシェイプアップ、Youtubeプレイヤーのサムネイル化などの
ご教授有難うございます。
一人で全て本業からブログまで管理しているとなかなか
億劫になってしまった結果がこれですから・・・。
Xサーバーにまた叱られる前に何とか時間を作って
対策をしていきたいと思います。
記事数(1500ほどです)が多くなってくると管理も大変で。

ちなみにＸサーバーで月間転送量を確認致しましたところ
以下の様な転送量でした。

　　　　　PV　　　訪問者　　Hit　　　転送量
9月 661216 108880 2899318 154284.5 MB
10月 697143 111210 3010853 162701.4 MB

Cloudflareも過去に使用していましたが、
自鯖でちょっと苦い思い出があったので記憶の彼方に
消え去っていましたが、1つの候補としてまた
熟慮してみたいとおもいます。

この問題はもう少し他のプラグインなどとの
相性も含めて追調査を続けます。

> JQueryは子テーマのfunctionファイルに記述して
> 再確認しましたがNO IMAGEは表示されません。

子テーマのfunctions.phpではなく、javascript.jsです。

hidekichiさんこんにちは。

これは大変失礼致しました(；´Д｀)
書き間違えていました。
今確認したらjavascript.jsにかきこんで有りました。

今chromeで見てみたらhead cleaner使ってられますね？
これ停止してください。

それで万事解決かも?

追レスです。

HeadCleanerの設定でチェックが入っていた
css、jsを動的に生成するのチェックを外しましたところ、
NoImageが入るようになりました。

大変お騒がせ致しました。

しかし、原因の所在が分からないままですね。。。

しかし、原因の所在が分からないままですね。。。

HeadCleanerでソースが変わって(最適化されて)
表示されなかったのだと思います
表示などがおかしくなるので
simplicityと相性が悪いプラグインになっています
https://wp-simplicity.com/incompatible-plugins/

みきさん、レスありがとうございます。

Headcleanerは導入前のテスト段階では特に問題も
出ていなかったので軽視していました・・・。

当初想定していた動作（NO IMAGEの表示）は
Hidekichiさんよりご教授頂いたコードで実現いたしましたが
HeadcleanerもPhotonに引き続き無効化致しました。

その後色々と試してみました。

■HeadCleaner無効、Photon無効
関連記事のNO IMAGEは正常表示
Hidekichiさんのコード無しでも問題なく表示されました

■Headcleaner無効、Photon有効
関連記事にNO IMAGEが表示されず当初の問題が発生

■Headcleaner無効、Photon有効、Hidekichiさんのコード記入
関連記事にNO IMAGEが正常表示

やっぱりHeadcleanerとの相性が悪かった上に
Photonが随分と悪さをしていたようです。

この度は皆さまのお力添えで早期に解決することが出来ました。
このフォーラムの内容が誰かのお役に立てば何よりです。

Hidekichiさん、わいひらさん、みきさん、ありがとうございました。

わいひらさん

そうですね、今は月間転送量が160GBですね。

CPU負荷が高いので対策してほしいというのが
制限の原因だったと思いますが、当時は
キャッシュ系プラグインがどうしても使えずに
負荷が高い状態が継続していたため、
おそらく上位プラン(錯誤していました)ではなく専用サーバーならば
負荷がある程度高くても共用サーバーと違い
単独で使用するので頻繁な制限は出ないかと思います・・・という
お話だったと記憶しています。

結局、時間は掛かりましたがXサーバーの担当者さんと
やり取りを続けてなんとか負荷は収まりましたが(;´･ω･)

わいひらさんこんばんは。

現在はW3 Total Cacheを利用できるようにしたので
キャッシュが効いて負荷が下がって落ち着いています。
※制限も解除されているかと思います
キャッシュ系プラグインを導入した際は
トラブル続発で大変苦労しましたが、苦労して入れた甲斐がありました。

PHP7への切り替えはまだまだ様子見と思っています(⌒-⌒; )
今は問題無くともプラグインやWordpressのバージョンアップで
いつトラブルが出るか分かりませんので怖いですね。。

以前（Simplicityに変更前）、XサーバーからPHP7への切り替えが
出来る様になったとアナウンスがあった際に、テストがてら
切り替えたことがありましたが、やはりエラーのオンパレードでとても
対応出来るような物じゃ無かったので諦めた記憶が。

こんばんはわいひらさん。

おおよそ処理速度が倍になっているって噂ですよね。
かなり魅力的ですがプラグインが追い付いてこないことには
導入にはまだ時期尚早ですね。

わたしにはコードの編集なんてスキルは到底ありませんので
じっと待つ以外に手は無いです(;´Д`)

Simplicity導入の際、不要となったプラグインなどを
整理したので、恐る恐るPHP7へ変更してみました。

まず導入前のスピードテストの結果です。

■変更前(PHP 5.6.22)
GTmetrix

Pingdom

■変更後(PHP 7.0.7)
GTmetrix

Pingdom

1秒程度ロードタイムが改善しているようです。
数値で見るとほぉ・・・という感じですが、実際に切り替えた後に
ブログをあちこち見て回って不具合が無いかチェックしましたが、
クリック後のレスポンスが良いかなと。

CPU負荷が下がれば全体のパフォーマンスが良くなるでしょうから
しばらくPHP7で様子見してみます。

画像の張付け方を間違えました。。

■変更前(PHP 5.6.22)
GTmetrix

Pingdom

■変更後(PHP 7.0.7)
GTmetrix

Pingdom

画像が見えなくなっていたので
リンクを書いておきます

■変更前(PHP 5.6.22)
GTmetrix
Pingdom

■変更後(PHP 7.0.7)
GTmetrix
Pingdom

間違っていたらすみません

あ・・・
かぶった
#47623を見てください

みきさん

あああぁっ・・・私のために大変お手数をお掛け致しました。

わいひらさんおはようございます！

現在の所トラブルも出ておらずいい感じです。
以前の記事を拝見しましたが、私のように大きな変化は無かったようですね。
環境による物やサイトの構成によっても随分差があるんでしょうね。

微妙な変化ですが、わたしのサイトの場合今までほんの少しずつ
引っ掛かるような挙動があった部分が、ぱぱっ、ぱっと引っ掛からずに表示されるので
かなり良い効果があったと実感しています。

Simplicityにテーマを変更してほんとに良かったです。
今までマガジンテーマに着目してテーマ変更を目論んでいましたが、
ふとしたキッカケでSimplicityに出会えて良かった。

フォーラムも活発ですし、Hidekichiさんやわいひらさんの
フォーラムでのレスポンスの良さもかなり好印象でした。

学ぶべき事がまだまだありますがSimplicityとは長いつきあいになりそうです。

今後もさらなる発展に期待しております。

PHP7すごい・・・
1秒以上違うんですね
サイト表示の1秒は大きいですからね
ただエラーが出るのはいやだな・・・

みきさん

そうですよね。
1秒って言うとかなり大きな差ですよね。

Xサーバーの場合、PHP7への切り替えと復旧がボタン1つなので
アクセスの少ない深夜帯などに試してみて、問題が無かったので今もPHP7で運用しています。

ただ、今後の使用しているプラグインのアップデートなどで
どういった挙動をするか引き続き注視していく必要は有りますが(⌒-⌒; )