web-dev-qa-db-ja.com

ページ固有のスクリプト/スタイルを読み込む方法

私は、デフォルトのWordpress起動プロセスに従って、まずfunctions.phpが呼び出されることを知っています。しかし、私は現在それを最適化するために私のテーマを完全にリファクタリングするつもりです。私の考えは、共通のプロパティ、正規化、色用に1つのベースCSSファイルを用意することです。または、単一のcssファイルを保存するには、この場合、ページを判別するためにfunctions.phpに大文字と小文字を切り替えるコードをハードコードする必要があります。各ページに固有のもう1つのファイルです。すべてのスタイルが定義された巨大なCSSスタイルファイルをロードするのは意味がありません。

だから私の質問は、特定のスクリプトやスタイルをロードするためにフックするのに最適な場所は何ですか？

それはheader-xxx.phpまたは他のファイルであるべきですか？このアイデアをよりスケーラブルでエレガントな方法で実装する方法はあるでしょうか。

私はどんな助けにも感謝します。

functionsthemescsswp-enqueue-scriptwp-enqueue-style
7
CROSP

それはすべて、カスタマイズの規模と、アイテムの整理方法に依存します。しかし、それを行うには主に2つの方法があります。 functions.phpおよびtemplate files

私がやりたいことは、register functions.phpのすべてのスクリプト/スタイルなので、何を扱うかは知っていますが、enqueue必要なときだけですそれが必要。

Functions.phpファイル（if( is_page( 'blah') { //... enqueue stuff }）内で条件付きですべてのものをキューに入れるか、特定のカテゴリ/タグ/投稿/ページなどをスタイルするために テンプレートファイル を使用できます。

次に、そのテンプレートファイル内で、enqueue script/styleファイルを呼び出します。それにより、どこに何がロードされているかを理解するためのニートな方法にもなります。

ただし、スタイルシートを小さなファイルに分割する場合は、間違いなく使用する必要があります。

同じロジックが、対応するregister/enqueue関数を持つスクリプトに適用されます

また、戦略のリクエスト数を考慮してください。もしものを複数のファイルに分割する場合は、ロードされるファイルの数を少なくして、ページのロードに悪影響を与えないようにしてください。

ページの読み込みを高速化するために別の方法があります。ブラウザにスタイルシートをキャッシュするように指示した場合、サイト全体に複数のファイルがあり、常にサーバーから取得する必要がある場合は、キャッシュからロードする可能性が1（または少数）になりますロードされる新しいページごとに新しいファイル要求。そのため、これに留意してください。

とにかく、1つまたは多くのアセットをキャッシュすることは優れたアプローチであり、サイトの速度の観点からWebサイトの応答速度を向上させます。

これらの機能の使用方法に関するガイダンスが必要な場合は、お知らせください。

編集

スクリプトを登録する主な理由は次のとおりです

  • 必要なときにスクリプト/スタイルを簡単に呼び出すことができます
  • ロードする必要があるファイルの依存関係として、登録済みのスクリプト/スタイルを使用できるようにします。
  • 必要以上に同じコードを書くことを防ぎ、コードを効果的に簡素化する
  • 私が今考えていないかもしれないより多くのもの

NOTE

登録されているスクリプト/スタイルは、現在キューに入れているファイルの$depsとしてリストされている場合、キューに入れる必要はありません。

例（必ずしもそれを行う方法ではありませんが、目的を理解するため）

登録しました

  • common-style.css
  • navigation.css
  • buttons.css

これでこれらのスタイルが登録されたので、specificページに移動して、そこに別のスタイルを適用したい場合。そのように、specific-style.css（functions.phpの条件文またはページテンプレートのいずれかで）そのページにエンキューします。

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に依存navigation.cssそれはcommon-style.cssに依存

そのロジックを念頭に置いて登録する場合、依存関係としてspecific-style.cssとbuttons.cssをエンキューするだけで、WPはデイジーになります順序を尊重するようにロードをチェーンします。

8
bynicolas

" リファクタ "、 " 最適化 "、 " スケーラブル "、 " エレガント "。大きな懸念！あなたは正しい道を進んでいます。しかしながら、CSSファイルをいくつかに分割することは、これらの懸念に対する答えではありません。これが理由です：

ブラウザはCSSファイルをキャッシュします。そのため、最初のページが読み込まれるとブラウザは次のページに同じCSSファイルを要求しません。はい、最初のページの読み込みはわずかに、目に見えないほど遅くなります。しかし、残りのページはこれから利益を得るでしょう。

少ないリクエスト は、 最適化 ウェブサイトの速度を向上させる最も重要な方法の1つです。 （ Steve Souders または この記事 を参照）.

さらなる最適化は minify your CSSです。 （ Google PageSpeed post を参照。）提案をくれてありがとう@bynicolas。

確かにあなたが言うかもしれませんが、 エレガンス についてはどうですか？これが良い知らせです： Sass と _ less _ 。彼らはあなたがより少ないコードを書くこと、1つのCSSファイルにコンパイルされるいくつかのファイルにそれを分割すること、そしてはるかに多くを可能にします。

3
zendka

誰かがどのページにアクセスしているかを確認し、各ページの特定のスタイルシートをエンキューするために条件付きで実行することもできますが、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' );
2
Nate Allen