サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
20/10/2019 3:18 pm
わいひらさん
いつもお世話になっております。みるみです。
ただいま読み込み速度のデータ取りなど色々実験しておりまして、「親テーマで使っていないcss（＝子テーマ側で上書きしているプロパティ）は使用しないようにしたい、htmlでインライン出力しないようにしたい」と思いました。
①インライン化しないようにするにはstyles.css自体から内容を削除するしか方法を思いついていないのですが、他になにか策はありますか？
②これではテーマを更新するたびにstyles.cssが上書きされてしまいますが、一度クリーンな状態にした親cssを維持し続ける方法はなにかありますか？
お手すきなときにでもお返事いただけますと幸いです。
よろしくお願いいたします。
※ソース圧縮の類はOFFしておきました（外すとインライン化されなくなるようですのでONの方が良かったらおっしゃってください）
20/10/2019 4:38 pm
①インライン化しないようにするにはstyles.css自体から内容を削除するしか方法を思いついていないのですが、他になにか策はありますか？
Cocoonでは各CSSファイルをインライン化する際に縮小化コードを通していますが、そのコード実行時に不要なスタイルのコードを除外するようにする方法があります。
具体的には、'tag_code_to_minify_css'や'css_url_to_css_minify_code'といったフックを用い、不要な箇所を空に置換するなど。
②これではテーマを更新するたびにstyles.cssが上書きされてしまいますが、一度クリーンな状態にした親cssを維持し続ける方法はなにかありますか？
上記の方法で子テーマのfunctions.phpにでもプログラムを書いておけば、アップデートされるマスターのファイルを触る必要がないので、上書きされる心配はありません。
メインのstyles.css以外にも、下記のような使っていない外部cssのインライン化を防ぐ方法はありますか？
ほとんどのスタイルファイル読み込みはwp_enqueue_style関数で行われていると思うので、不要な該当ファイルのハンドル名を調べて、wp_dequeue_style関数で読み込みから削除すればよいかと思います。
スタイルの読み込みはscripts.phpにまとめられているので、このファイル内にある各関数を見ることでハンドル名を調べることができます。
ただし、各スタイルファイルの読み込みはCocoon設定に応じて行われている（読み込まれている＝設定上必要なファイルだということ）ため、読み込みを削除するとスタイルが反映されない箇所が出てくると思います。
わいひら reacted
21/10/2019 7:52 pm
slickについては、Cocoon設定「カルーセル」で「表示しない」設定にするとcssとJavaScriptを読み込まない用にもしておきました（これは追加し忘れてました）。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
Topic starter
21/10/2019 9:02 pm
ロコさん、わいひらさん、ありがとうございます。
具体的には、'tag_code_to_minify_css'や'css_url_to_css_minify_code'といったフックを用い、不要な箇所を空に置換するなど。
実際に子テーマと被っているcssを探し出す作業が大変すぎてこれはまだやっていませんが、空への置換でなんとかやってみようと思います…。
＞ちなみにわいひらさん、上記２つのフックは今回の件で言うとなにか違いはありますか？
上記の方法で子テーマのfunctions.phpにでもプログラムを書いておけば、アップデートされるマスターのファイルを触る必要がないので、上書きされる心配はありません。
おっしゃるとおりですね、まさにこういうのをお聞きしたかったです！ありがとうございます。
ほとんどのスタイルファイル読み込みはwp_enqueue_style関数で行われていると思うので、不要な該当ファイルのハンドル名を調べて、wp_dequeue_style関数で読み込みから削除すればよいかと思います。
上記のようにわいひらさんが対応してくれましたので、実際に作業を行ったのはkeyframes.cssだけでしたが、上手く行きました。これもありがとうございます。
slickについては、Cocoon設定「カルーセル」で「表示しない」設定にするとcssとJavaScriptを読み込まない用にもしておきました（これは追加し忘れてました）。
ご対応ありがとうございます。昔自分で導入したslickとぶつかって困ったりしたこともありましたので、大変助かります！
大変恐縮ですが、追加で質問させてください…！
同じ背景で、icomoonで使用するcssもインライン化して外部ファイルとして読み込まれないようにしたいです。
実際のcssを子テーマのcssに転記して読み込まれるようになったのはいいのですが、「icomoon/style.css」だけは他のwp_enqueue_scriptsと違い、下記のような表示になるため上手く制御できませんでした。フィルターフックでfalseを返すとかもできず…。
「loadWebFont」というものについて知識がないので八方塞がりでした。ぜひ教えていただけませんか！
【非短縮時】
loadWebFont("https://milmemo.net/wp-content/themes/cocoon-master/webfonts/fontawesome/css/font-awesome.min.css");
loadWebFont("https://milmemo.net/wp-content/themes/cocoon-master/webfonts/icomoon/style.css");
【短縮時】
performance.mark("inline-js-12-start");
loadWebFont("https://milmemo.net/wp-content/themes/cocoon-master/webfonts/fontawesome/css/font-awesome.min.css");
loadWebFont("https://milmemo.net/wp-content/themes/cocoon-master/webfonts/icomoon/style.css");
performance.mark("inline-js-12-end");
performance.measure("inline-js-12", "inline-js-12-start", "inline-js-12-end");
※見やすくするため便宜上改行などを入れています。
よろしくお願いいたします。
23/10/2019 11:53 am
上記２つのフックは今回の件で言うとなにか違いはありますか？
'css_url_to_css_minify_code'は個々のCSSファイルをインライン化した際に実行されるフック、'tag_code_to_minify_css'は最終的に全てのインライン化されたスタイルを出力する際に実行されるフックですが、実際に今回の件でコードを書く分にはあまり大きな違いはないかと思います。
強いて言うなら、個々のCSSファイルのURLを活用するかどうかで、特定のファイルURLに絞ってコードを実行させたいのであれば、'css_url_to_css_minify_code'を利用する形になります。
同じ背景で、icomoonで使用するcssもインライン化して外部ファイルとして読み込まれないようにしたいです。
loadWebFontはアイコンフォント用のファイルを非同期読み込みさせるためのものです。
（高速化設定の「アイコンフォントの非同期読み込みを有効にする」を有効化した場合に動作）
アイコンフォント用CSSファイルは容量が大きい一方で、サイトの外形を整えるような重要なスタイルは含まれていないので、そのような実装になっています。
わいひら reacted
Topic starter
23/10/2019 11:43 pm
＞ロコさん
フックの件、承知しました。また分からない点が出てきたらこのトピックに質問させていただければ幸いです。
＞ロコさん、わいひらさん
たぶん僕がやろうとしていることが意味不明すぎてあまり意図をお伝えできていなかったです…。
icomoonで使うcssは、子テーマのcssに追記して使用してます（この子テーマcssはインライン化されて読み込まれる）。この変更によって、icomoonを使ってオリジナルで実装しているSNSボタンの表示が爆速になりました。
というか今まではページ読み込み時に背景色すら表示されなかったですが、フォントの実体が読み込まれたおかげでボタン全体もすぐに表示されるようになり満足です。画像添付しておきます。
そして、そうなると「wp-content/themes/cocoon-master/webfonts/icomoon/style.css」は無駄な読み込みになってしまいますし、事実404になっています。ロコさんがおっしゃるように「アイコンフォントの非同期読み込みを有効にする」をOFFにすればその状態ではなくなりますが、FontAwesomeの件を考慮するとOFFにしたくはありません。
そこで、ここの設定をONにしつつ
loadWebFont(" https://milmemo.net/wp- content/themes/cocoon-master/webfonts/icomoon/style.css");
が出力されなくなるようにするにはどうすればいいか？というご質問でした。
「この機能の出力元を知りたい」など、そういうイメージです。
大変分かりにくい上に何度もご足労おかけして申し訳ありません。
24/10/2019 2:02 pm
また分からない点が出てきたらこのトピックに質問させていただければ幸いです。
WordPressの高速化施策は細かくやりだすとキリがないので、詳しい実装方法などはサポート対象外になるのかもしれません。
icomoonで使うcssは、子テーマのcssに追記して使用してます（この子テーマcssはインライン化されて読み込まれる）。この変更によって、icomoonを使ってオリジナルで実装しているSNSボタンの表示が爆速になりました。
厳密には、表示速度が速くなったわけではなく、icomoonのスタイルを読み込む分だけサイト表示に時間がかかり、その代わりにサイトの表示と同時にicomoonのアイコンも表示されるようになっただけだと思います。
表示速度の改善と視覚的な品質のバランスは人によるかと思います。
この機能の出力元を知りたい
前の返信でも書いた通り、基本的にはscripts.phpにまとめられていますので、ここから各々の関数を見ていけばいいわけです。
///////////////////////////////////
//WEBフォントの非同期読み込み
///////////////////////////////////
wp_enqueue_web_font_lazy_load_js();
とあるように、関数wp_enqueue_web_font_lazy_load_jsの中身を必要に応じてカスタマイズすればよいのではないかと。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。