wp_enqueueは、開発者がスクリプト（JavaScriptファイル）とスタイル（CSSファイル）をエンキューできるようにするWordPress関数です。
これは、開発者が特定のページで使用したいスクリプトとスタイルをWordPressに伝えることができ、WordPressがそれらを自動的にロードすることを意味します。
これは、ページが迅速かつ効率的にロードされることを保証するのに役立ち、また異なるスクリプトとスタイルの間の競合を防ぐのにも役立ちます。
スクリプトを適切にエンキューすることで、開発者は効率的で、保守可能で、互換性のあるプラグイン、テーマ、およびWebサイトを作成できます。
WordPressでJavaScriptとCSSをエンキューすべきなのはいつですか？
JavaScriptとCSSコードを使用してWordPressウェブサイトをカスタマイズでき、開発者はWordPressプラグインやテーマを作成する際にこれらの言語を使用します。
- JavaScriptはユーザーのブラウザで実行され、ウェブサイトにインタラクティブな要素（ スライダー、アラート、ボタン、ポップアップなど）を追加するために使用されます。
- CSS（Cascading Style Sheets）は、フォントのサイズや色、背景色、ページの幅など、サイトの視覚的な外観を定義するために使用されます。
ウェブサイトのオーナーで、特定の投稿やページにJavaScriptとCSSを追加したい場合は、wp_enqueueを使用する必要はありません。代わりに、コードスニペットプラグインのWPCodeを使用することを推奨します。これはWordPressウェブサイトにコードを追加する最も安全な方法です。
WordPressサイトにJavaScriptを簡単に追加する方法とカスタムCSSを簡単に追加する方法に関するガイドで、さらに詳しく学ぶことができます。
ただし、開発者である場合や、WordPressプラグインやテーマの作成方法を学んでいる場合は、プロジェクトにJavaScriptファイルとCSSスタイルシートを適切にエンキューする必要があります。
WordPressのエンキューシステムはどのように機能しますか？
新規開発者は、プラグインやテーマでスクリプトやスタイルシートを直接呼び出すという間違いを犯すことがあります。これは競合を引き起こし、WordPressのパフォーマンスを低下させる可能性があります。
これらの問題を回避するために、WordPressはエンキューシステムを提供しています。これにより、開発者はスクリプトとスタイルシートをロードする方法が得られ、すべてが正しく競合なく機能します。
エンキューシステムは次のように機能します。
- まず、
wp_register関数を使用してスクリプトまたはスタイルシートを登録する必要があります。これにより、WordPressはその存在と場所を認識します。 - 次に、wp_enqueue関数を使用してスクリプトとスタイルシートをエンキューします。これにより、WordPressはそれらをロードしたいことを認識します。
- 次に、ページがロードされると、WordPressはエンキューされたすべてのスクリプトを正しい順序でロードし、すべてが正常に機能するようにします。
WordPressでJavaScriptとスタイルを適切に追加する方法に関するガイドで、さらに詳しく学ぶことができます。
コード例
wp_enqueue_scriptおよびwp_enqueue_style関数を使用して、WordPressにファイルのロード時期、ファイルの場所、および依存関係を指示できます。
WordPressのエンキューシステムの使用方法を示す役立つコード例を見ると良いでしょう。
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のヒント、トリック、アイデアに関する記事の追加資料リストも以下をご覧ください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
