サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2018年7月1日 22:22
わいひらさん
正式版のリリースおめでとうございます.
さっそく使わせていただいていただいています.
さて,以下の症状が発生しました.
・コンテンツ幅: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も同様の症状のようです.
ご確認ください.
2018年7月1日 23:02
同じ環境にして動作させてみたのですが、同様の状態にはならないようです。
そもそも、カラム800pxで縦型3列にすると、342x192というサイズにはならない342x192は、2列用のサイズといった感じです。
Regenerate Thumbnailsプラグインの画面に出力されないのも、正常動作と言っていいと思います。
なのに何故かsrcsetに対して342x192が出力されるのがおかしいです。
推測として、以下のようなことは当てはまらないでしょうか。
- 以前は縦型2列にしていた
- ページキャッシュプラグインを利用している
- サーバー機能のmod_pagespeed等を利用している
- その他のキャッシュ機能を利用している
古いソースコードが利用されると、そんなこともあるのかもしれません。
トピックスターター 2018年7月2日 00:02
わいひらさん
さっそくのご確認ありがとうございます.
そちらでは再現しないんですね.
こちらでも再度,
- プラグインを全て停止
- キャッシュのクリア
をやってみましたが,相変わらずsrcsetに342x192が出力されています.
「Cocoon」を導入したのが一昨日前で,Ver. 0.7.5からでした.
「Simplicity」のときは2列で使っていましたが,「Cocoon」インストール後は,いろいろなカードタイプを試したので,2列も使ったかもしれません.
add_image_size('thumb342', 342, 192, true);
で回避できているので,もう少し調べてみます.
2018年7月2日 08:08
- キャッシュのクリア
ですが、プラグインの停止・削除をした状態で、キャッシュをクリアにしていない場合。キャッシュが残っていたのを見た事があります。
この場合、プラグインを有効にしてキャッシュをクリアにしてみるとでしょうか。
あとサーバーによっては、サーバー上でキャッシュが作られるサーバーもあったります。例えばwpxなど…
キャッシュっぽいですけど、どの範囲のキャッシュをクリアにされたのかと思いまして。
2018年7月2日 20:06
ただ、以下のコード挿入で問題ないようであれば、それでも全然大丈夫だと思います。
add_image_size('thumb342', 342, 192, true);
難点といえば、以下ぐらい。
- ディスク容量がいる(小さな画像サイズなのでそこまでではないと思うけど)
- アップロードに多少時間がかかる(同上)
反面、以下のような利点もあるのでプラマイゼロのような感じです。
- 幅が342px付近の端末で表示すると、画像が多少綺麗になるかも
トピックスターター 2018年7月2日 22:02
解決にはいたっていませんが,とりあえず分かったことを書いておきます.
自宅からアクセスすると
srcset="http:///aaaa-342x192.jpg 342w”
の記述が含まれるが,会社からアクセスすると,この記述はなくなる.
自宅からアクセスすると,Chrome,Edge,IE11,どのブラウザでも
srcset="http:///aaaa-342x192.jpg 342w”
の記述が含まれる.
トピックスターター 2018年7月3日 12:41
本日、昼休みに、再度、会社からアクセスしてみました。
結果、自宅と同様の結果になりました。
会社からアクセスしても
srcset="http:///aaaa-342x192.jpg 342w”
の記述が含まれる(自宅からのアクセスと同じ).
1日のディレイがあるということは、キャッシュがらみですかね?
ただ、なぜ、
srcset="http:///aaaa-342x192.jpg 342w”
のHTMLが出力されるのかは不明です。
2018年7月3日 22:59
僕も、やはり下の観点からキャッシュのような気がします。
- Regenerate Thumbnailsログイン画面のリストには表示されない
- 公開ページのsrcsetには表示される
でも、ページキャッシュプラグインのものであれば、一旦削除されたページでは復活はないはず…。
もしかしたら、WordPressの仕様として何かが原因で342x192のサムネイルがあると判断されているというのはあるのかも。
ただ、そこまで仕様に詳しいわけではないので、あまりピンと来るものは今のところないのですが。
2018年7月4日 08:19
ただ1回目のアクセスではキャッシュはない状態で、Cookieが作られたら画像にそのサイズの指定が入ってますよね。ほかにも何かの要因があるかもしれませんけど??
何か特別なサーバーで構築されてますか?
なぜそうなるかは不明なので、特殊なサーバーかな?位しか思いつきません。
トピックスターター 2018年7月4日 23:56
私が利用しているのは,スターサーバーになります.
今度の週末に,スターサーバーで検証用のサイトを立ち上げ,シンプルなダミーコンテンツで振る舞いを見てみます.
わいひら reacted
トピックスターター 2018年7月7日 18:15
私が実行した手順を思い出しながら再現してみました.
検証用のサイトでも,一度342x192のサムネイルを設定すると,それ以降,
srcset="http:///aaaa-342x192.jpg 342w”
のHTMLが出力されたままになりました.
ただ,これはCocoonの動作が悪いわけではなく,WordPress,サーバー,ブラウザのどこかに情報がキャッシュされているためと思われます.
以下のURLにアクセスしてもらって,HTMLソースに
srcset="http:///aaaa-342x192.jpg 342w”
が残っているかどうか見てもらえますか?
もし,皆さんからも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のサムネイルが生成された記事とされなかった記事が生じたようです.
2018年7月7日 20:33
僕の環境で、Regenerate Thumbnailsで違うサイズの再生成を行った場合、全ての画像が残っていて、srcsetでの表示は問題ありませんでした。
けれど、OhZooさんの環境の場合、404になるんですね。
※途中キャンセルのせいか他の要因があるのかはわかりませんが。
なので、srcsetを出力する際に、「存在しないファイルは出力しない」という処理を加えてみました。
その処理を加えたのがこちら。
https://github.com/yhira/cocoon/archive/master.zip
よろしければ上記テーマを適用してみて、またテストサイトを確認させていただければと思います。
トピックスターター 2018年7月7日 21:14
わいひらさん
確認ありがとうございます.
僕の環境で、Regenerate Thumbnailsで違うサイズの再生成を行った場合、全ての画像が残っていて、srcsetでの表示は問題ありませんでした。
けれど、OhZooさんの環境の場合、404になるんですね。
先に示した手順②で,Regenerate Thumbnailsで生成されたサムネイル画像は,私の環境でも保存されます.
”途中キャンセル”と同じ状況にしたかったので,全てのサムネイル画像を一度削除した後,手順③に進みましたので,342x192のサムネイル画像が残っていないのは正しいです.
「存在しないファイルは出力しない」バージョンの子テーマをイントールしました.
ご確認ください.
2018年7月7日 22:07
一度こちらのプラグインで再生成してもらってよいでしょうか。
こちらは不要なサムネイルを削除してくれるようです。
トピックスターター 2018年7月8日 00:19
わいひらさん
Force Regenerate Thumbnailsでサムネイルを再生成してみました.
不要なサイズのサムネイル画像が削除されただけでなく,不要なサイズのsrcset
srcset="http://***/aaaa-342x192.jpg 342w”
も出力されなくなりました.
ありがとうございました.
2018年7月8日 07:32
確認ありがとうございます。
うまくいったようでよかったです。
どうやら一旦作成してしまうと、サムネイルと何かが残るのかもしれませんね。
それを、Force Regenerate Thumbnailsで削除すると綺麗さっぱりとなるようです。
なので、後で「サムネイル再生性」の記事もForce Regenerate Thumbnailsを使った方法で差し替えようと思います。
https://wp-cocoon.com/regenerate-thumbnails/
あとよろしければ、配布最新版の1.0.2に戻してテストサイトで試してみてもらっているでしょうか。
「存在しないファイルは出力しない」バージョン部分のコードは不要であれば削除したいので。
トピックスターター 2018年7月8日 21:00
わいひらさん
下記のバージョンで確認しました.
Force Regenerate Thumbnailsでサムネイルを再生成後は,
srcset="http://***/aaaa-342x192.jpg 342w”
は,出力されません.
---------------------------------------------- テーマ名:Cocoon バージョン:1.0.2 ---------------------------------------------- 子テーマ名:Cocoon Child バージョン:0.0.5 ----------------------------------------------
わいひら reacted
2018年7月9日 20:52
動作確認ありがとうございます。
追加したコードはあまり意味がないようなので、削除しておこうと思います。
以下の記事も修正しておきました。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。