お世話になっております。
インラインで埋め込まれているCSSやJSを外部ファイルにまとめるのはかなり難易度が高いですね・・・。
（SANGOのCSSやJSだけでなく、Google Analyticsのスクリプトをどうするか、なども考える必要があるかと思います）
ちなみに1つにまとめたい目的はどのようなものなのでしょうか？
パフォーマンス向上が目的なのであれば、外部ファイル化するのは逆効果かと思います。
よろしくお願いします。
お世話になっております。ご返信有難うございます。
外部ファイル化したい理由は・・・
・メンテナンス性向上
・要素がより上に来るようにする為
です。SEO的にはHTMLの上の方に本文が来た方が望ましいとのことです。
アナリティクスのスクリプトも含め、外部ファイル化して問題ないものだと思っていますが、どのようなデメリットがあるのでしょうか。
ありがとうございます。
それでいうと
・メンテナンス性の向上
⇒テーマのCSSやJSを1つにまとめる場合、テーマのコードを大幅に変える必要があるため、メンテナンス性は低下します。テーマをアップデートした場合、エラーが頻出する可能性があります。
また、SANGOでは設定に応じて、JSの出力有無をPHP側で判断し、不必要なJSを出力しないようにしています。
1つのJSファイルにまとめるのであれば、この条件分岐はJS側で行う必要があります（例えば、記事一覧切替タブが有効化されていない場合は処理を行わないようにするなど）。
・要素がより上に来るようにするため
⇒「SEO的にはHTMLの上の方に本文が来た方が望ましい」とのことですが、SANGOのインラインCSSは全くと言っていいほどSEOには関係はないと思われます。
むしろGoogleはCSSやJSをインライン化する（もしくは非同期ロードする）ことでレンダリングブロックを防ぎ、高速に表示することを推奨しています。例えばGoogleが普及させようとしている「AMP」ではCSSは、HTMLコード内のstyleタグに書くことになっています。
・アナリティクスのスクリプトも含め、外部ファイル化して問題ないものだと思っていますが、どのようなデメリットがあるのでしょうか。
⇒デメリットではなく、出力の制御がさまざまな場所に分散されているため、JSをまとめるのが大変という感じですね。
例えば絵文字を変換するJSはテーマ関係なくWordPressデフォルトで出力されることになっています。また、カスタマイザーの「追加CSS」もWP本体の機能ですが、こちらも自動でインライン出力される仕様になっています。
プラグインを入れた場合、そのプラグインによってJSやCSSがインライン埋め込みされることもあります。
それらを1つにまとめるのは至難の技です。
どうしてもインライン化する必要がある場合は、テーマを自作した方がメンテナンスしやすく、結果として時間も節約できる気がします。
ご要望を実現するための回答ができず恐縮ですが、ご理解いただけますと幸いです。
大変ご丁寧に教えてくださり、本当にありがとうございます。
一点だけ質問です。
個々のJSやCSSを、一つにまとめるのではなく、それぞれ別の外部ファイル化するといった場合も、ご説明いただいた通り難しいでしょうか。
お忙しい中恐縮ですが、よろしくお願いいたします。
難しいと思います。というか、ものすごく大変、という感じですね…。
どうしてもやらなければならない事情があるのであれば、僕ならob_start()などを使って、最終的に出力されるHTMLを取得し、
scriptタグとstyleタグを正規表現ですべて取得し、CSSとJSファイルにその場で書き込むかと思います。
参考：ワードプレスの全てのHTMLコードを最終出力前に取得して一部分を置き換える方法
参考までに。
WordPressテーマSANGOの質問
トップページなどのJSおよびCSSを外部ファイル化したい
いつもお世話になっております。また、素晴らしいテーマのおかげで快適に運営させていただいています。
今回ですが、トップページ、個別記事ページ、記事一覧ページのソースコードにおけるJavaScriptとCSSを外部ファイル化したいのですが、いくつか疑問点があります（というか自分で出来る自信がない・・・汗）。まず、私が調べた限りでは、以下のような流れになると推測しています
1.header.phpにおけるheadタグ内の を設定している、「/wp-includes/default-filters.php」を開く
2.上記における add_action( ‘wp_head’, ‘wp_enqueue_scripts’, 1 ); を削除して、「何かしらのコードを追加する・・・1」⇦削除するのは外部ファイル化した.jsとの二重を防ぐため。
3.ソースコードにおける各スクリプトタグをコピーして、それぞれ名前をつけて.jsで外部ファイル化「ただ、どのディレクトリに保存すべきなのか分からない・・・2」「ソースコードのスクリプトタグをコピペして良いのか・・・3」File Managerというプラグインで.jsをアップロードしようと思います。
大まかには、このような流れで出来そうだ・・・と推測していますが、PHP未経験者である私にミスなく出来るのかという点も不安です。（専門家におねがいした方が良いのでしょうか・・・）
疑問点は上記の
・何かしらのコードを追加する・・・1
・どのディレクトリに保存すべきなのか分からない・・・2（wp-include…?）
・ソースコードのスクリプトタグをコピペして良いのか・・・3（wp_head();の出力元のいJSやCSSがどこかにあるのでしょうか？）
稚拙な質問で申し訳ありませんが、ご回答いただけたら幸いです。よろしくお願いいたします。