現在デフォルトスキンとして「COLORS(ブルー)」を適用中。

親テーマのcssを極力インライン出力しないようにしたい | Cocoonテーマに関する質問 | Cocoon フォーラム

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

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
親テーマのcssを極力インライン出力し...
 
Share:

[解決済] 親テーマのcssを極力インライン出力しないようにしたい  


みるみ
(@mirumi)
Active Memberサイト
参加: 1か月 前
投稿: 18
みるみ - Twitter
2019年10月20日 15:18  

わいひらさん

いつもお世話になっております。みるみです。

ただいま読み込み速度のデータ取りなど色々実験しておりまして、「親テーマで使っていないcss(=子テーマ側で上書きしているプロパティ)は使用しないようにしたい、htmlでインライン出力しないようにしたい」と思いました。

①インライン化しないようにするにはstyles.css自体から内容を削除するしか方法を思いついていないのですが、他になにか策はありますか?

②これではテーマを更新するたびにstyles.cssが上書きされてしまいますが、一度クリーンな状態にした親cssを維持し続ける方法はなにかありますか?

お手すきなときにでもお返事いただけますと幸いです。
よろしくお願いいたします。

※ソース圧縮の類はOFFしておきました(外すとインライン化されなくなるようですのでONの方が良かったらおっしゃってください)


みるみ
(@mirumi)
Active Memberサイト
参加: 1か月 前
投稿: 18
みるみ - Twitter
2019年10月20日 15:24  

書きそびれました。

メインのstyles.css以外にも、下記のような使っていない外部cssのインライン化を防ぐ方法はありますか?

  • keyframes.css
  • slick系
  • baguetteBox(←これは画像拡大プラグインのcss…?ですか?)

よろしくお願いいたします。


ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 482
2019年10月20日 16:38  

①インライン化しないようにするには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設定に応じて行われている(読み込まれている=設定上必要なファイルだということ)ため、読み込みを削除するとスタイルが反映されない箇所が出てくると思います。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7088
わいひら - Facebookわいひら - Twitter
2019年10月21日 19:46  

baguetteBoxとかであれば、Cocoon設定の「画像の拡大効果」を「なし」にすれば読み込まれないかもしれません。
他は、ロコさんが疲れているようにPHPでカスタマイズするしかないかと思います。

This post was modified 3週間 前 by わいひら

わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7088
わいひら - Facebookわいひら - Twitter
2019年10月21日 19:52  

slickについては、Cocoon設定「カルーセル」で「表示しない」設定にするとcssとJavaScriptを読み込まない用にもしておきました(これは追加し忘れてました)。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------


みるみ
(@mirumi)
Active Memberサイト
参加: 1か月 前
投稿: 18
みるみ - Twitter
2019年10月21日 21:02  

ロコさん、わいひらさん、ありがとうございます。

具体的には、'tag_code_to_minify_css'や'css_url_to_css_minify_code'といったフックを用い、不要な箇所を空に置換するなど。

実際に子テーマと被っているcssを探し出す作業が大変すぎてこれはまだやっていませんが、空への置換でなんとかやってみようと思います…。
>ちなみにわいひらさん、上記2つのフックは今回の件で言うとなにか違いはありますか?

上記の方法で子テーマの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");

※見やすくするため便宜上改行などを入れています。

よろしくお願いいたします。


ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 482
2019年10月23日 11:53  

上記2つのフックは今回の件で言うとなにか違いはありますか?

'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ファイルは容量が大きい一方で、サイトの外形を整えるような重要なスタイルは含まれていないので、そのような実装になっています。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7088
わいひら - Facebookわいひら - Twitter
2019年10月23日 19:09  

IcoMoonファイルが読み込まれないと、シェアボタンやフォローボタンのアイコンが全部表示されなくなると思うんですけど、それでも無効にするということでしょうか。


みるみ
(@mirumi)
Active Memberサイト
参加: 1か月 前
投稿: 18
みるみ - Twitter
2019年10月23日 23:43  

>ロコさん

フックの件、承知しました。また分からない点が出てきたらこのトピックに質問させていただければ幸いです。

>ロコさん、わいひらさん

たぶん僕がやろうとしていることが意味不明すぎてあまり意図をお伝えできていなかったです…。

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");

が出力されなくなるようにするにはどうすればいいか?というご質問でした。
「この機能の出力元を知りたい」など、そういうイメージです。

大変分かりにくい上に何度もご足労おかけして申し訳ありません。


ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 482
2019年10月24日 14:02  

また分からない点が出てきたらこのトピックに質問させていただければ幸いです。

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の中身を必要に応じてカスタマイズすればよいのではないかと。

This post was modified 3週間 前 by ロコ

わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7088
わいひら - Facebookわいひら - Twitter
2019年10月24日 21:01  

最も手っ取り早くやるとすれば、子テーマno functions.phpで以下のように空のwp_enqueue_web_font_lazy_load_jsをオーバーライドで読み込めば、親テーマのは読み込まれ無くなります。

function wp_enqueue_web_font_lazy_load_js(){}

みるみ
(@mirumi)
Active Memberサイト
参加: 1か月 前
投稿: 18
みるみ - Twitter
2019年10月24日 23:27  

引き続きありがとうございます。

wp_enqueue_web_font_lazy_load_js();

はCocoonoテーマフォルダ内でパッと見たところ関数自体が見つからなかったのですが、本体はどこにあるのでしょうか?
(wp_enqueue_styleなどのようにWordPress側の動作になるということ…ですか?)

オーバーライドする案は実質非同期読み込みの設定をOFFにしているのと同じだと思いますので、できればicomoonだけいじりたいと思いました。


ロコ
(@lococo)
Reputable Member
参加: 2年 前
投稿: 482
2019年10月25日 00:03  

utils.php#L532ですね。
子テーマに関数を上書きする形でカスタマイズすることになります。


わいひら 件のいいね!
みるみ
(@mirumi)
Active Memberサイト
参加: 1か月 前
投稿: 18
みるみ - Twitter
2019年10月25日 10:18  

長々とありがとうございました。
やりたいことは実行できました。

このトピックは終了とさせていただければと思います。


Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年3ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:1年1ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon
  
動作中

ログイン または 登録 してください

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