WordPressのテーマに独自jsファイル(Vue.js)を読み込ませる方法

WordPressのテーマに独自で作成したjsファイル(Vue.js)を読み込ませる機会があったので、その方法について記事にしました。

 

【今回したいこと】

js/index.js(vue)をテーマに読み込ませたい

子テーマ

– js

  - index.js

– functions.php

– header.php

 

 

wp_enqueue_script() 関数を使って読み込ませるのが便利

wp_enqueue_script()関数を使って読み込ませると、jsファイルのミニファイ(圧縮)やフッターでのロード、依存関係の順序、多重読み込み防止といった利点があります。header.phpやfooter.phpに<script src=”…”>で直接記載するよりもアプリのパフォーマンス的におすすめです。

 

js/index.js(vue)をテーマに読み込ませる方法

jsファイルの記法がvueでもjQueryでも方法は同じになります。

 

1. <head>にvueをcdnで読み込ませる

header.phpの<head>内に以下を追記

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

 

2. functions.phpに関数を記述

js/index.jsの読み込みを登録します。

add_action( 'wp_enqueue_scripts', function() {
   wp_enqueue_script( 'index', get_stylesheet_directory_uri().'/js/index.js', array(), false, true);
});

 

 

js/index.jsにconsole.log(111111);を記述してアプリを読み込ませてみましょう。コンソールに111111が表示すれば成功です。