WordPressでは、単にヘッダーに追加するのではなく、依存関係を管理する付加価値を持つ、アセットを扱う標準化した方法である、エンキューという方式で行う必要があります。 wp_enqueue_scriptsを使用して、その方法を以下で確認します。

• キューの仕組み
• キューの基本 wp_enqueue_scripts
• 依存性の管理
• スクリプトのロードは フッター
• スタイルのメディア指定

How Enqueueing Works

スクリプトまたはスタイルをキューに入れるとき、2 つのステップを実行します。 まず、WordPress に登録し、次に実際にキューに入れ、最終的にヘッダーまたは閉じられた body タグの直前に出力されます。 WordPress にアセットを知らせたいが、すべてのページでそれを使用したくない場合があります。 たとえば、次のような場合です。 たとえば、Javascript を使用するカスタム ギャラリー ショートコードを構築している場合、ショートコードが使用されるときのみ、JS を実際にロードする必要があります – おそらくすべてのページではありません。

これを実現する方法は、最初にスクリプトを登録し、ショートコードが表示されたときにのみ、実際にそれをキューに入れることです (推奨文献: The Ultimate Guide to WordPress Shortcodes)

wp_enqueue_scripts によるキューの基本

フロントエンドでスクリプトとスタイルをキューに入れるには、wp_enqueue_scripts フックを使用する必要があります。 フックされた関数内では、wp_register_script()、wp_enqueue_script()、wp_register_style()、wp_enqueue_style() 関数を使用できます。

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) ); wp_enqueue_style( 'custom-gallery' ); wp_enqueue_script( 'custom-gallery' );}

上記の例では、同じ関数内でアセットの登録とキューイングを行っていますが、これは少し冗長です。 実際には、register 関数で行うのと同じ引数を使用して、enqueue 関数を使用してすぐに登録とキューイングを行うことができます。

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );}

この 2 つの関数を分離するとしたら、別のフックで使用することによってそうします。 実際の例では、アセットを登録するために wp_enqueue_scripts フックを使用し、それらをエンキューするためにショートコードの関数を使用できます。

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );}add_shortcode( 'custom_gallery', 'custom_gallery' );function custom_gallery( $atts ){ wp_enqueue_style( 'custom-gallery' ); wp_enqueue_script( 'custom-gallery' ); // Gallery code here}

Dependency Management

WordPress のエンキュー機構には、wp_register_style() および wp_register_script() 関数の両方の第 3 引数を使用して、依存性管理のサポートが組み込まれています。 分離する必要がなければ、すぐにエンキュー関数を使用することもできます。

第3引数は、現在の資産がエンキューされる前にロードする必要がある登録されたスクリプト/スタイルの配列です。 上記の例では、おそらく jQuery に依存しているので、今それを指定しましょう。

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );}

jQuery はすでに WordPress の一部なので、私たち自身が登録したりキューに入れたりする必要はありません。 WordPress で使用できるスクリプトとスタイルの一覧は、Codex に記載されています。

独自の依存関係がある場合は、それらを登録する必要があり、そうしないとスクリプトが読み込まれないからです。 以下はその例です。

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) ); wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery' ) );}

最初のスクリプトがギャラリーで、2 番目は画像をライトボックスで開くようにするその拡張だと仮定します。 2 番目のスクリプトが jQuery に依存している場合でも、最初のスクリプトがすでに jQuery を読み込むため、これを指定する必要はないことに注意してください。

これで WordPress はどのスクリプトが必要かを知り、ページに追加する必要がある順番を計算できるようになりました。 これは、見かけのページ ローディング時間を増加させ、特に AJAX 呼び出しを含む場合、スクリプトのロード中に Web サイトがハングするのを防ぐことができます。

キューイング機構は、5 番目のパラメーター (4 番目は任意のバージョン番号) を使用してフッターにスクリプトを追加できます。

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ), '1.0', true ); wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery', 'jquery' ), '1.0', true );}

第 5 パラメータに true を指定するとフッターにスクリプトが置かれ、false を使用するか、パラメータを省略するとヘッダーにロードされます。 4058>

Specifying Media For Styles

Style Register/enqueue 関数の第 5 パラメータを使用すると、スクリプトが定義されているメディア タイプ (print, screen, handheld, など) を制御することができます。 このパラメーターを使用すると、スタイルの読み込みを特定のメディア タイプに制限することができ、これは便利な最適化トリックです。

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery-print', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0', 'print' );}

使用できるメディア タイプの全リストは、CSS 仕様を参照してください。 これは、あなたや他のプラグイン/テーマ メーカーに、システム全体に対するより多くのコントロールを与え、依存関係の管理をあなたの手から取り除きます。

それが十分でない場合、それはあなたの資産を追加する方法です、多くのテーマ マーケットプレイスと WordPress レポジトリ自体は、この方法を使用しない場合はあなたの仕事を承認しないでしょう。 あなたのウェブサイトをターボチャージし、当社のベテランWordPressチームから24時間365日サポートを受けることができます。 当社のGoogle Cloudを利用したインフラは、自動スケーリング、パフォーマンス、およびセキュリティに重点を置いています。 Kinstaの違いをお見せしましょう。 プランをチェックする