WordPress PR

WPのJavaScriptの読み込みを管理する

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

WPでJavaScriptの読み込む時、「footer.php」に直接書けますが、WPデフォルトでjQueryを読み込んでいるので「functions.php」にまとめて管理するのがおすすめです。

今回は「functions.php」でJavaScriptを読み込む方法について紹介します。

WPのJavaScriptの読み込みを管理する

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

WPのJavaScriptの読み込む基本的な書き方

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

functioncustom_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()」に出力されます。

JavaScriptファイルを指定ページだけで読み込む

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

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

全ページに必要なもの以外は、ファイルを分けておくことで余計な読み込みを回避できます。

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)