私はデフォルトのWordpressの起動プロセスに従って、最初functions.phpに呼び出され、その後すべてのテーマのものに行くことを知っています。しかし、私は現在、テーマを完全にリファクタリングして最適化しています。私のアイデアは、共通のプロパティ、正規化、色用の1つの基本cssファイルを用意することです。または、単一のCSSファイルを保持するために、この場合、functions.phpページを決定するためにスイッチケースをハードコーディングする必要があります。また、すべてのスタイルが定義された巨大なcssスタイルファイルをロードすることは意味がないため、各ページに固有の別のファイル。
だから私の質問は、特定のスクリプト/スタイルをロードするためにフックするのに最適な場所は何ですか？
それはheader-xxx.php別のファイルですか？多分このアイデアをよりスケーラブルでエレガントな方法で実装する方法はありますか？
どんな助けにも感謝します。
回答:
それはすべて、カスタマイズの規模と、コンテンツの編成方法によって異なります。しかし、それを行うには主に2つの方法があります。functions.phpおよびテンプレートファイル
私がそれをするのが好きな方法は、すべてのスクリプト/スタイルをfunctions.phpに登録することです。そのため、何を処理するかはわかっていますが、必要なときに必要なものだけをエンキューします。
functions.phpファイル（if( is_page( 'blah') { //... enqueue stuff }）内にすべてのものを条件付きでキューに入れるか、テンプレートファイルを使用して特定のカテゴリ/タグ/投稿/ページなどのスタイルを設定できます。
次に、そのテンプレートファイル内で、エンキュースクリプト/スタイルファイルを呼び出します。これは、何がどこにロードされているかを理解するための簡潔な方法にもなります。
しかし、間違いなく、スタイルシートを小さなファイルに分解したい場合は、使用する必要があります
同じロジックが、対応する登録/エンキュー関数を持つスクリプトに適用されます
また、戦略内のリクエストの数を考慮してください。もしあなたのものを複数のファイルに分解するなら、読み込まれるファイルの数を少なくして、ページの読み込みに悪影響を及ぼさないようにしてください。
ページの読み込みを高速化するためにできる別の方法があります。ブラウザにスタイルシートをキャッシュするように指示した場合、サイト全体に複数のファイルがあり、常にサーバーからフェッチする必要がある場合は、おそらく1（または少数）がキャッシュからロードされる可能性が高くなります。ロードされる新しいページごとに新しいファイル要求。これを覚えておいてください。
いずれにせよ、1つまたは多くのアセットをキャッシュすることは良いアプローチであり、サイトの速度の点でWebサイトの応答性を向上させます。
これらの関数の使用方法についてさらにガイダンスが必要な場合は、お知らせください。
編集
スクリプトを登録する主な理由は次のとおりです
注意
登録されているスクリプト/スタイル$depsは、現在エンキューしているファイルのリストに含まれている場合、エンキューする必要はありません。
例（必ずしもそれをどのように行うべきかではなく、目的を理解している）
登録しました
これでこれらのスタイルが登録されたので、特定のページに移動して、そこに別のスタイルを適用したい場合は、私はそのように（functions.phpまたは私のページテンプレートの条件付きステートメントによって）そのページにエンキューしますspecific-style.css。
add_action( 'wp_enqueue_scripts', 'my_specific_style' );
function my_specific_style(){
wp_enqueue_style( 'specific-style', get_stylesheet_directory_uri() . '/path/to/specific-style.css', array( 'common-style', 'navigation', 'button') );
}のwp_enqueue_style配列は、すでに登録されているスタイルのハンドルの配列であることに注意してください。WPは、依存関係を尊重するために、4つのファイルすべてを正しい順序で便利にロードします。
各スクリプト/スタイルを正しい依存関係に登録するだけで依存関係をカスケードできます
つまり、buttons.cssはcommon- style.cssに依存するnavigation.cssに依存します
そのロジックを念頭に置いて登録した場合、特定のstyle.cssを依存関係としてbuttons.cssでエンキューするだけでよく、WPはロードをデイジーチェーンして順序を尊重します。
「リファクタリング」、「最適化」、「スケーラブル」、「エレガント」。大きな懸念！あなたは正しい道を進んでいます。ただし、CSSファイルをいくつかに分割することは、これらの懸念に対する答えではありません。理由は次のとおりです。
ブラウザはCSSファイルをキャッシュします。したがって、最初のページが読み込まれると、ブラウザは次のページに対して同じCSSファイルを要求しません。はい、最初のページの読み込みはわずかに、著しく遅くなります。しかし、残りのページはこれから利益を得ます。
リクエストの減少は、ウェブサイトの速度を最適化するための最も重要な方法の1つです。（Steve Soudersまたはこの記事を参照してください）。
さらに最適化するには、CSS を縮小します。（Google PageSpeedの投稿を参照してください。）提案をありがとう@bynicolas。
確かにあなたは言うかもしれませんが、エレガンスはどうですか？これが良いニュースです。SassとLESSです。これらを使用すると、より少ないコードを記述し、1つのCSSファイルにコンパイルされるいくつかのファイルにそれを分割することができます。
common.css、2つ目は各ページに固有です。
誰かがどのページにいるのかを確認し、各ページの特定のスタイルシートをエンキューするための条件付きを確かに実行できますが、CSSを使用してページをターゲティングする方がよい場合があります。
header.phpファイルで、次のようにbody_class関数がbodyタグ内にあることを確認します。
<body <?php body_class(); ?>>これにより、ページの特定の機能をターゲットにするために使用できるbodyタグにクラスが挿入されます。
たとえば、特定のページのH1を赤にしたい場合は、次のようにします。
body.page-id-12 h1 {
color: #ff0000;
}したがって、ID 12のページでは、そのスタイルが適用されます。
特定のページテンプレートをターゲットにするには、次のようにします。
body.page-template-template-about h1 {
color: #ff0000;
}これは、「about」テンプレートが適用されたページをターゲットにします。スタイルを設定するページのbodyタグ内のクラスを確認してください。
ただし、特定のページの特定のスタイルシートをエンキューしたい場合は、次のようにします。
function na35_enqueue_styles() {
if ( is_page( 12 ) ) {
wp_enqueue_style( 'page-12-styles', get_template_directory_uri() . '/css/page-12.css' );
}
}
add_action( 'wp_enqueue_scripts', 'na35_enqueue_styles' );if ( is_page( 'careers' ) || is_page( 'portfolio' ) ) {}
wp-register-style/scriptすべてのページのfunctions.phpでスクリプト/スタイルを使用すると、パフォーマンスに影響しませんか？すべてのスタイルを登録し、必要な場合にのみそれらをエンキューする利点は何ですか？