WordPress PR

WordPressのJavaScriptの読み込みを管理する方法

記事内に商品プロモーションを含む場合があります

WordPressでJavaScriptの読み込みをする時、「footer.php」に直接書くこともできますが、WordPressデフォルトでjQueryを読み込んでいるので「functions.php」にまとめて管理したほうがよいです。
今回は、「functions.php」でJavaScriptを読み込む方法について紹介します。

WordPressのJavaScriptの読み込みを管理する方法

では早速JavaScriptを読み込んでいきましょう。

 

基本的な書き方

基本的な書き方は、下記になります。
パスは、自分が読み込みディレクトリのパスに変更してください。

function custom_print_scripts() {
  wp_enqueue_script('common-js', get_template_directory_uri() . '/common/js/common.js' , '' , '' , true );
}
add_action('wp_print_scripts', 'custom_print_scripts');

「wp_enqueue_script」の5番目の引数を指定なしの場合「wp_head()」に出力、「true」の場合「wp_footer()」に出力されます。

 

指定ページだけで読み込む

if文で指定ページだけで読み込みも可能です。
ページのスラッグやIDで指定します。

function custom_print_scripts() {
  //sampleページで読み込む
  if (is_page("sample")) {
    wp_enqueue_script('sample-js', '/パス/' , '' , '' , true );
  }
}
add_action('wp_print_scripts', 'custom_print_scripts');

 

 

WordPressオリジナルテーマを作れるようになるための記事を制作しています!
随時更新しているので、ぜひ覗いてみてください!!
WordPressオリジナルテーマの作り方!0から作れるようになるまで

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。 ココナラでもお仕事募集しております。 HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。