Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

スマフォでインデックス画面にアクセスす...
 
共有:
通知
すべてクリア

[解決済] スマフォでインデックス画面にアクセスするとカードのサムネイル画像が表示されません

19 投稿
3 ユーザー
2 Reactions
1,754 表示
(@ohzoo)
Active Member Registered
結合: 6年前
投稿: 12
Topic starter  

わいひらさん

正式版のリリースおめでとうございます.

さっそく使わせていただいていただいています.

 

さて,以下の症状が発生しました.

・コンテンツ幅:800
・カードタイプ:縦型カード3列

を設定し,Regenerate Thumbnailsプラグインでサムネイル画像を再生成しました.

その後,インデックス画面(トップページ)にスマフォでアクセスすると,ほとんどのカードのサムネイル画像が表示されません.

パソコンでアクセスすると正しくサムネイル画像が表示されます.

 

インデックス画面のHTMLソースを確認したところ,

 srcset="http://***/aaaa-342x192.jpg 342w”

の記述がありましたが,aaaa-342x192.jpgが生成されていません.

 

Regenerate Thumbnailsプラグインの画面(添付ファイル)を見ても,このサイズの表記がありません.

 

試しに,子テーマのunctions.phpに,

add_image_size('thumb342', 342, 192, true);

と記述した後,再度,Regenerate Thumbnailsプラグインを実行すると,342x192サイズの画像が生成されました.

その後,スマフォでインデックス画面にアクセスすると,カードのサムネイル画像も表示されるようになりました.

 

Ver. 1.0.0も同様の症状のようです.
ご確認ください.


   
引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

同じ環境にして動作させてみたのですが、同様の状態にはならないようです。
そもそも、カラム800pxで縦型3列にすると、342x192というサイズにはならない342x192は、2列用のサイズといった感じです。
Regenerate Thumbnailsプラグインの画面に出力されないのも、正常動作と言っていいと思います。
なのに何故かsrcsetに対して342x192が出力されるのがおかしいです。

推測として、以下のようなことは当てはまらないでしょうか。

  • 以前は縦型2列にしていた
  • ページキャッシュプラグインを利用している
  • サーバー機能のmod_pagespeed等を利用している
  • その他のキャッシュ機能を利用している

古いソースコードが利用されると、そんなこともあるのかもしれません。


   
返信引用
(@ohzoo)
Active Member Registered
結合: 6年前
投稿: 12
Topic starter  

わいひらさん

さっそくのご確認ありがとうございます.

そちらでは再現しないんですね.

 

こちらでも再度,

  • プラグインを全て停止
  • キャッシュのクリア

をやってみましたが,相変わらずsrcsetに342x192が出力されています.

 

「Cocoon」を導入したのが一昨日前で,Ver. 0.7.5からでした.

「Simplicity」のときは2列で使っていましたが,「Cocoon」インストール後は,いろいろなカードタイプを試したので,2列も使ったかもしれません.

 

add_image_size('thumb342', 342, 192, true);

で回避できているので,もう少し調べてみます.

 


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 
  • キャッシュのクリア

ですが、プラグインの停止・削除をした状態で、キャッシュをクリアにしていない場合。キャッシュが残っていたのを見た事があります。

この場合、プラグインを有効にしてキャッシュをクリアにしてみるとでしょうか。

あとサーバーによっては、サーバー上でキャッシュが作られるサーバーもあったります。例えばwpxなど…

キャッシュっぽいですけど、どの範囲のキャッシュをクリアにされたのかと思いまして。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

ただ、以下のコード挿入で問題ないようであれば、それでも全然大丈夫だと思います。

add_image_size('thumb342', 342, 192, true);

難点といえば、以下ぐらい。

  • ディスク容量がいる(小さな画像サイズなのでそこまでではないと思うけど)
  • アップロードに多少時間がかかる(同上)

反面、以下のような利点もあるのでプラマイゼロのような感じです。

  • 幅が342px付近の端末で表示すると、画像が多少綺麗になるかも

   
返信引用
(@ohzoo)
Active Member Registered
結合: 6年前
投稿: 12
Topic starter  

解決にはいたっていませんが,とりあえず分かったことを書いておきます.

自宅からアクセスすると
srcset="http:///aaaa-342x192.jpg 342w”
の記述が含まれるが,会社からアクセスすると,この記述はなくなる.

自宅からアクセスすると,Chrome,Edge,IE11,どのブラウザでも
srcset="http:///aaaa-342x192.jpg 342w”
の記述が含まれる.

 


   
返信引用
(@ohzoo)
Active Member Registered
結合: 6年前
投稿: 12
Topic starter  

本日、昼休みに、再度、会社からアクセスしてみました。
結果、自宅と同様の結果になりました。

会社からアクセスしても
srcset="http:///aaaa-342x192.jpg 342w”
の記述が含まれる(自宅からのアクセスと同じ).

1日のディレイがあるということは、キャッシュがらみですかね?

ただ、なぜ、

srcset="http:///aaaa-342x192.jpg 342w”

のHTMLが出力されるのかは不明です。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

僕も、やはり下の観点からキャッシュのような気がします。

  • Regenerate Thumbnailsログイン画面のリストには表示されない
  • 公開ページのsrcsetには表示される

でも、ページキャッシュプラグインのものであれば、一旦削除されたページでは復活はないはず…。

もしかしたら、WordPressの仕様として何かが原因で342x192のサムネイルがあると判断されているというのはあるのかも。
ただ、そこまで仕様に詳しいわけではないので、あまりピンと来るものは今のところないのですが。


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

ただ1回目のアクセスではキャッシュはない状態で、Cookieが作られたら画像にそのサイズの指定が入ってますよね。ほかにも何かの要因があるかもしれませんけど??

何か特別なサーバーで構築されてますか?

なぜそうなるかは不明なので、特殊なサーバーかな?位しか思いつきません。


   
返信引用
(@ohzoo)
Active Member Registered
結合: 6年前
投稿: 12
Topic starter  

私が利用しているのは,スターサーバーになります.

https://www.star.ne.jp/

 

今度の週末に,スターサーバーで検証用のサイトを立ち上げ,シンプルなダミーコンテンツで振る舞いを見てみます.

 


   
わいひら reacted
返信引用
(@ohzoo)
Active Member Registered
結合: 6年前
投稿: 12
Topic starter  

私が実行した手順を思い出しながら再現してみました.

検証用のサイトでも,一度342x192のサムネイルを設定すると,それ以降,

srcset="http:///aaaa-342x192.jpg 342w”

のHTMLが出力されたままになりました.

ただ,これはCocoonの動作が悪いわけではなく,WordPress,サーバー,ブラウザのどこかに情報がキャッシュされているためと思われます.

以下のURLにアクセスしてもらって,HTMLソースに

srcset="http:///aaaa-342x192.jpg 342w”

が残っているかどうか見てもらえますか?

http://test.thumbnail.jp/

もし,皆さんからも342x192の設定が見えるのなら,サーバー側の問題ですし,皆さんから見えないのであれば,私のローカル側の問題になります.

以下,手順です.

① 初期状態

まず,WordPressにCocoonの親テーマ/子テーマをインストールし,ダミーの記事を登録します.

ここまでは,Cocoonの設定はデフォルトのままです.

② Cocoonの設定

次に,Cocoonの設定で

・コンテンツ幅:1080
・カードタイプ:縦型カード3列

を設定します.

この状態で,Regenerate Thumbnailsプラグインでサムネイルを再生成します.

この時点でサムネイルの画像サイズが342x192になりました.

HTMLは,

srcset="http:///aaaa-342x192.jpg 342w”

となります.

③ Cocoonの設定変更

・コンテンツ幅:800

に変更します.

変更後に,Regenerate Thumbnailsプラグインでサムネイルを再生成します.

この時点でサムネイル画像のサイズは250x141になります.

HTMLは,

srcset="http:///aaaa-250x141.jpg 250w, http:///aaaa-342x192.jpg 342w”

となり,これ以降は,

srcset="http:///aaaa-342x192.jpg 342w”

のHTMLが出力されたままになります.

 

上記②で,Regenerate Thumbnailsプラグインでサムネイルを再生成すると,ちゃんと342x192のサイズの画像も生成されます.

私は,この再生成を途中でキャンセルしたらしく,そのせいで342x192のサムネイルが生成された記事とされなかった記事が生じたようです.

 


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

僕の環境で、Regenerate Thumbnailsで違うサイズの再生成を行った場合、全ての画像が残っていて、srcsetでの表示は問題ありませんでした。
けれど、OhZooさんの環境の場合、404になるんですね。

※途中キャンセルのせいか他の要因があるのかはわかりませんが。

なので、srcsetを出力する際に、「存在しないファイルは出力しない」という処理を加えてみました。
その処理を加えたのがこちら。
https://github.com/yhira/cocoon/archive/master.zip
よろしければ上記テーマを適用してみて、またテストサイトを確認させていただければと思います。


   
返信引用
(@ohzoo)
Active Member Registered
結合: 6年前
投稿: 12
Topic starter  

わいひらさん

確認ありがとうございます.

 

僕の環境で、Regenerate Thumbnailsで違うサイズの再生成を行った場合、全ての画像が残っていて、srcsetでの表示は問題ありませんでした。
けれど、OhZooさんの環境の場合、404になるんですね。

先に示した手順②で,Regenerate Thumbnailsで生成されたサムネイル画像は,私の環境でも保存されます.

”途中キャンセル”と同じ状況にしたかったので,全てのサムネイル画像を一度削除した後,手順③に進みましたので,342x192のサムネイル画像が残っていないのは正しいです.

 

「存在しないファイルは出力しない」バージョンの子テーマをイントールしました.

ご確認ください.


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

”途中キャンセル”と同じ状況にしたかったので,全てのサムネイル画像を一度削除した後,手順③に進みましたので,342x192のサムネイル画像が残っていないのは正しいです.

250w,
120w,
160w,
320w,

316w,
342w

ということは、最後の2つの画像が404なのは、削除したからなんですね。

ただ、「存在しないファイルは出力しない」バージョンにしても、コードが出力されているようですね。

こちらでも画像を消して試してみます。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

一度こちらのプラグインで再生成してもらってよいでしょうか。

Force Regenerate Thumbnails

こちらは不要なサムネイルを削除してくれるようです。

https://www.buzzgeekmagazine.com/wordpress-thumbnails/


   
返信引用
(@ohzoo)
Active Member Registered
結合: 6年前
投稿: 12
Topic starter  

わいひらさん

Force Regenerate Thumbnailsでサムネイルを再生成してみました.

不要なサイズのサムネイル画像が削除されただけでなく,不要なサイズのsrcset

srcset="http://***/aaaa-342x192.jpg 342w”

も出力されなくなりました.

ありがとうございました.

 


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

確認ありがとうございます。
うまくいったようでよかったです。

どうやら一旦作成してしまうと、サムネイルと何かが残るのかもしれませんね。
それを、Force Regenerate Thumbnailsで削除すると綺麗さっぱりとなるようです。
なので、後で「サムネイル再生性」の記事もForce Regenerate Thumbnailsを使った方法で差し替えようと思います。
https://wp-cocoon.com/regenerate-thumbnails/

あとよろしければ、配布最新版の1.0.2に戻してテストサイトで試してみてもらっているでしょうか。
「存在しないファイルは出力しない」バージョン部分のコードは不要であれば削除したいので。


   
返信引用
(@ohzoo)
Active Member Registered
結合: 6年前
投稿: 12
Topic starter  

わいひらさん

 

下記のバージョンで確認しました.

Force Regenerate Thumbnailsでサムネイルを再生成後は,

srcset="http://***/aaaa-342x192.jpg 342w”

は,出力されません.

 

----------------------------------------------
テーマ名:Cocoon
バージョン:1.0.2
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.5
----------------------------------------------

   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17220
 

動作確認ありがとうございます。
追加したコードはあまり意味がないようなので、削除しておこうと思います。
以下の記事も修正しておきました。


   
返信引用
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました