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カスタマイズ依頼

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

共有:
通知
すべてクリア

[解決済] EWWW Image OptimizerでWEBPに画像が変換できない問題について

6 投稿
3 ユーザー
2 Reactions
259 表示
(@st5050)
Active Member Registered
結合: 7か月前
投稿: 3
トピックスターター  

相談内容:

Cocoonのテーマを使用してます。

JPGやPNGなどの画像をWEBPに自動変換したいため、EWWW Image OptimizerでWebP変換設定をしたのですが、何度画像をアップロードしてもJPGやPNGのままで、変換されずに困っています。

不具合の発生手順:
記事投稿画面、もしくはメディアから画像を投稿しましたが、画像がWEBPに変換されなかった。
拡張子が元のJPGやPNGのままであり、投稿した画像を保存したり、クロームのデベロッパーツール⇒Network⇒Imgで見ても変化なかったです。

ただ、これまでと変わらずに大きいサイズのPNGを投稿すると、容量削減のため、JPGに自動変換されます。
WebP変換設定する前も、した後もこれは変わりません。

解決のために試したこと:
・高速化設定をすべてON、もしくはすべてOFFにして画像を投稿しても変わりありませんでした。

・ブラウザのキャッシュを解除しても駄目でした。

・Firefox、クロームとブラウザを変えて画像を投稿しても駄目でした。

・こちらのサイト様を参考に、.htaccessに
ExpiresByType image/webp “access plus 1 weeks”
を追記しても駄目でした。現在はその項目を削除してます。
https://re-lifework.com/ewww-image-optimizer-webp

・Picture WebP リライトにチェックマークを入れて画像を投稿しても駄目でした。

・強制 WebPにチェックマークを入れて画像を投稿しても駄目でした。

・WebP 品質を変えてみてもだめでした。

●.htaccessの中身はこちらです。※ログインに関わる情報などは一部伏字

# BEGIN Redirect to https
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{ENV:HTTPS} !on
RewriteCond %{HTTP:X-Forwarded-Proto} http
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
# END Redirect to https

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(jpe?g|png|gif)$">
Header append Vary Accept
</FilesMatch>
</IfModule>
AddType image/webp .webp

#SITEGUARD_PLUGIN_SETTINGS_START
#==== SITEGUARD_RENAME_LOGIN_SETTINGS_START
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteRule ^wp-signup\.php 404-siteguard [L]
RewriteRule ^wp-activate\.php 404-siteguard [L]
RewriteRule ^login_伏字(.*)$ wp-login.php$1 [L]
</IfModule>
#==== SITEGUARD_RENAME_LOGIN_SETTINGS_END
#SITEGUARD_PLUGIN_SETTINGS_END

# BEGIN WordPress
# "BEGIN WordPress" から "END WordPress" までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

SetEnvIf Request_URI ".*" WpCommentNoLimit

# BEGIN EWWWIO
# "BEGIN EWWWIO" から "END EWWWIO" までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(jpe?g|png|gif)$">
Header append Vary Accept
</FilesMatch>
</IfModule>
AddType image/webp .webp
# END EWWWIO

----------------------------------------------
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:6.5.3
PHPバージョン:8.2.9
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:126.0) Gecko/20100101 Firefox/126.0
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.7,en;q=0.3
----------------------------------------------
テーマ名:Cocoon
バージョン:2.7.3.5
カテゴリー数:25
タグ数:9803
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:3894 バイト
functions.phpサイズ:767 バイト
----------------------------------------------
Gutenberg:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
Category Order and Taxonomy Terms Order 1.8.1
EWWW Image Optimizer 7.6.0
SiteGuard WP Plugin 1.7.7
Table of Contents Plus 2402.1
WebSub (FKA. PubSubHubbub) 3.2.1
WP Multibyte Patch 2.9
XML Sitemap & Google News 5.4.9
----------------------------------------------

画像はEWWW Image Optimizerの設定項目です。

何か分かる方がいましたら、よろしくお願いします。


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

https://wpb-tachiage.com/ewww-image-optimizer/
こちらに書かれているような設定はすべてされたんですよね。
Cocoonテーマではなく、WordPress公式テーマに変更すると、正常に表示されるのでしょうか?


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

私のローカル環境で試してみました。

普段、このプラグインは使用していないもので、良く分からないですけれど。
初期状態から、以下だけを変更しました。
(チェックを入れた)

 
.htaccessは変更していません。
(こちらは、webp画像の生成ではなく、実際のページ表示の際のコントロールだと思いますので)
 
メディアライブラリから、jpg画像をアップロードしました。
すると、メディアライブラリ上では、jpg画像しか見えませんでした。
(一覧表示では、「画像最適化」欄に「Webp」と書かれていました)
 
uploadsファルダを見ると、webp画像も生成されているみたいでしたけれど。
 
メディアライブラリ上は、同一画像として扱うのでjpgしか表示されないということなんでしょうか、おそらく。
(一覧表示では「Webp」の文字はありますけれど。このプラグインは使っていないので、良く分かりません・・・)
 
.htaccessに書き込むと、webp対応ブラウザかどうかを判定して、対応ブラウザならwebp、そうでないならjpgを表示するようにコントロールする感じだと思うのですけれど。
(今となっては、対応ブラウザがほとんどかと思います)
 
webp化されないというのは・・・。
投稿の表示がwebp化されないのか。
それとも、uploadsフォルダに、webp画像が生成されないのか。
 
どちらのことを仰っているのだろう・・・とは思いました。
 
私は、普段使っていないこともありますが、プラグインのことですので、良く分からないところも多々あります。

   
わいひら reacted
(@st5050)
Active Member Registered
結合: 7か月前
投稿: 3
トピックスターター  

わいひらさん、mk2さん、返信ありがとうございます。

設定変えたり、テーマ変更して戻したり、原因が分かりませんでしたが何とか画像をwebpで表示されるようになりました。

しっかり生成されているようです。

ただ一つで分からないことがあり、画像を2つ以上アップロードして記事にまとめて投入した場合、

<img src="https://サイトURL.com/wp-content/uploads/2024/06/画像1_720x1280.jpg" alt="画像1_720x1280" width="720" height="1280" class="alignnone size-full wp-image-26024" />

<img src="https://サイトURL.com/wp-content/uploads/2024/06/画像2_720x1280.jpg" alt="画像2_720x1280" width="720" height="1280" class="alignnone size-large wp-image-26025" />

alignnone size-full wp-image-26024

alignnone size-large wp-image-26025

という風になってしまい、2枚目以降の画像サイズがなぜか

size-largeに強制されてしまうようです。

画像を2つ以上アップロードし、まとめて記事に投入するのではなく、1コずつ選択して投稿すれば、size-fullになります。

2コ以上アップロードし、まとめて記事に投入すると、2枚目以降がすべてsize-largeとなります。

これは今回ではなく、ずっと前から続いてました。

Cocoonでブログを複数運営していて、メインのブログはこの問題が発生しませんが、別のブログだけ発生するので不思議におもってます。

これもWEBPで表示できないのに関係してる可能性もありそうで、size-largeだとwebpではなくjpgに表示されることもあり、不安定な感じがします。

もし分かる方がいましたら、教えていただけると助かります。

よろしくお願いします。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8063
 

スマホからなもので、あまり書けませんが。(調べてはいないです)

恐れ入りますが、トピック名とお問い合わせ内容が一致しません。

1つのトピックに1つの質問でお願い致します。

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

新たにトピックを立てていただければと思います。

その際、関連トピックとして本トピックをリンクしていただくと良いのではないかと思います。

 

また、できるだけ再現手順を明確に書いていただけますと、助かります。

こちらで再現するのに、どういう手順を踏めば良いのか少し不明瞭に感じました。

 

そして、先と同様ではありますけれど。

  • 当該プラグインが無効の時にも発生するのか
  • Cocoon以外のテーマでも発生するのか

これらのことを試していただいて、その結果を記載していただけますと助かります。


   
わいひら reacted
(@st5050)
Active Member Registered
結合: 7か月前
投稿: 3
トピックスターター  

mk2さんご返信ありがとうございます。

そのようにさせていただきます。


   
共有:

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

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

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

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

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

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

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

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