本記事では、WordPressでJavaScriptを読み込む方法についてまとめています。
目次
wp_enqueue_script
JavaScriptを読み込むには、wp_enqueue_script関数を使います。基本的な使い方は以下の通りです。
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script(
$handle, #スクリプトの一意な名前を指定。
$src = '', #スクリプトまでのパスを指定。
$deps = array(), #先に読み込ませたいスクリプトがある場合は、引数$handleの名前を指定。
$ver = false, #スクリプトのバージョンを指定。キャッシュ無効化の目的でクエリ文字列としてURLに追加される。
$in_footer = false #スクリプトをどのタイミングで読み込ませるか指定。「false→<head></head>タグ内 / true→</body>の直前」
);
});wp_enqueue_scriptsとは？
フロントエンドに表示されるスクリプトとスタイルをキューに入れるときに使用するフックです。
関連記事
【WordPress】CSSを読み込む方法 | Web忍
本記事では、WordPressでCSSを読み込む方法についてまとめています。 wp_enqueue_style CSSを読み込むには、wp_enqueue_style関数を使います。基本的な使い方は以下の通り…
【実践編】JavaScriptを読み込ませる
テーマ内にある「/build/index.js」ファイルを読み込ませる場合は、以下のように記述します。
<?php
define('CUSTOM_THEME_VERSION', wp_get_theme(wp_get_theme()->get('Version')));
function enqueue_files() {
wp_enqueue_script('webnin-js', get_theme_file_uri('/build/index.js'), array(), CUSTOM_THEME_VERSION, true);
};
add_action('wp_enqueue_scripts', 'enqueue_files');上記コードが実行されると、</body>タグの直前に以下のコードが生成されJavaScriptを読み込みます。
<script type="text/javascript" src="http://localhost:8888/webnin-article/wp-content/themes/webnin/build/index.js?ver=1.0.0" id="webnin-js-js"></script>
