wp_enqueueはWordPressの関数で、開発者がスクリプト（JavaScriptファイル）とスタイル（CSSファイル）をエンキューするためのものです。
つまり、開発者は特定のページで使用したいスクリプトやスタイルをWordPressに伝えることができ、WordPressはそれらを自動的に読み込む。
これにより、ページの読み込みが迅速かつ効率的になり、異なるスクリプトやスタイルの衝突を防ぐことができます。
スクリプトを適切にエンキューすることで、開発者は効率的で保守性が高く、互換性のあるプラグイン、テーマ、サイトを作成することができます。
WordPressでJavaScriptとCSSをエンキューするタイミングは？
JavaScriptとCSSコードを使ってWordPressサイトをカスタムすることができ、開発者はWordPressプラグインやテーマを作成する際にこれらの言語を使用します。
- JavaScriptはユーザーのブラウザー上で動作し、スライダー、アラート、ボタン、ポップアップなどのインタラクティブな要素をサイトに追加するために使用されます。
- CSS（CascadingStyle Sheets）は、フォントのサイズや色、背景色、ページの幅など、サイトの外観を定義するために使用されます。
サイトオーナーで、特定の投稿やページにJavaScriptやCSSを追加したい場合は、wp_enqueueを使用する必要はありません。代わりに、WordPressサイトにコードを追加する最も安全な方法であるWPCodecode snippetsプラグインを使用することをお勧めします。
さらに詳しくは、JavaScriptを簡単に追加する方法とWordPressサイトにカスタムCSSを簡単に追加する方法のガイドをご覧ください。
しかし、開発者やWordPressプラグインやテーマの作成方法を学んでいる場合は、JavaScriptファイルとCSSスタイルシートをプロジェクトに適切にエンキューする必要があります。
WordPressのエンキューシステムの仕組みとは？
新規開発者は、プラグインやテーマでスクリプトやスタイルシートを直接呼び出すという間違いを犯すことがあります。これはコンフリクトを引き起こし、WordPressのパフォーマンスを低下させます。
このような問題を避けるために、WordPressはenqueueシステムを提供しています。これにより、開発者はスクリプトやスタイルシートをロードする方法を得ることができ、すべてが競合することなく正しく動作するようになります。
エンキュー・システムの仕組みはこうだ：
- まず、
wp_register関数を使用してスクリプトまたはスタイルシートを登録し、WordPressがその存在と場所を認識できるようにする必要があります。 - 次に、wp_enqueue関数を使ってスクリプトとスタイルシートをenqueueし、WordPressに読み込みたいことを知らせます。
- そして、ページが読み込まれると、WordPressは、すべてが正しく機能するように、キューに入れられたスクリプトを正しい順序で読み込みます。
さらに詳しくは、WordPressでJavaScriptとスタイルを正しく追加する方法をご覧ください。
コード例
wp_enqueue_script関数とwp_enqueue_style関数を使用すると、WordPressにファイルを読み込むタイミング、ファイルの場所、依存関係を指示することができます。
WordPressのenqueueシステムの使い方を示す、参考になるコード例をご覧ください。
WordPressのスクリプトを正しく読み込むために、プラグインファイルやテーマのfunctions.phpファイルに貼り付けるコードの例を以下に示します：
?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
そして、スタイルシートをエンキューする方法の例である：
<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>
これらのコード例の完全な説明については、WordPressでJavaScriptとスタイルを正しく追加する方法のガイドをご覧ください。
WordPress のwp_enqueueについて、この投稿がお役に立てれば幸いです。また、WordPress の便利なヒントやトリック、アイデアに関する関連投稿は、以下の「Additional Reading」リストをご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
