ワードプレスの自作プラグインにjavascriptを追加する

ワードプレスの自作プラグインにそのプラグイン専用のjavascriptファイルを追加する場合について記載する。

javascriptファイルの配置場所

wp-content/plugins/[プラグインのフォルダ名]/js/[javascriptのファイル名].js

上記のようになるようにプラグインフォルダに「js」というフォルダを作成しそこにjavascriptファイルを配置する。javascriptファイル（拡張子js)のファイル名は好きに決めてよい。

プラグインにjavascriptを追加するコードを記述する。

ワードプレスのwp_enqueue_script()関数を使うことでjavascriptファイルを追加することができる。
以下のコードを自作プラグインに記述する。

function add_plugin_js() {
    $plugin_url = plugin_dir_url( __FILE__ );
    $plugin_path = plugin_dir_path( __FILE__ );

    $js_time =  date('YmdHis', filemtime( $plugin_path . 'js/javascript.js' ));
    wp_enqueue_script( 'script', $plugin_url . 'js/javascript.js', array(), $js_time );
}

add_action( 'wp_enqueue_scripts', 'add_plugin_js' );

上記コードの補足として変数$js_timeにはファイルの最終更新日時を入れ、それをjavascriptファイルのバージョン番号としてwp_enqueue_script()に指定している。

こうすることで、javascriptファイルを更新した場合、即時にバージョンとして反映されるため、ブラウザのキャッシュから古いファイルが読み込まれるということを防ぐ。

※関数名「add_plugin_js」は好きに変更してよい。
※javascriptファイル名「javascript.js」も好きに変更してよい。
※wp_enqueue_script()関数の第一引数は＜script＞タグのidとして出力されるのでこちらも好きに変更してよい。
※複数のjavascriptファイルを追加した場合は「wp_enqueue_script( ‘script2’, $plugin_url . ‘js/javascript2.js’ );」というようにコードを追加すればよい。

jQueryを使用する場合

jQueryを使用する場合は以下のコードを使用するとよい。先ほどのコードとの違いはwp_enqueue_script()関数の第三引数でワードプレス標準のjQueryを読み込ませるか、読み込ませないかの違いである。

使っているテーマによってはjQueryを使っていない場合があるため、以下のコードのようにjQueryを読み込ませる必要がある。

function add_plugin_js() {
    $plugin_url = plugin_dir_url( __FILE__ );
    $plugin_path = plugin_dir_path( __FILE__ );

    $js_time =  date('YmdHis', filemtime( $plugin_path . 'js/javascript.js' ));
    wp_enqueue_script( 'script', $plugin_url . 'js/javascript.js', array('jquery'), $js_time );
}

add_action( 'wp_enqueue_scripts', 'add_plugin_js' );

プラグインをオブジェクト指向（クラス）で作っている場合

もしプラグインをクラス（Class）で作っているのであれば、先ほどの8行目のコード「add_action( ‘wp_enqueue_scripts’, ‘add_plugin_js’ );」のコードは関数「__construct()」内に以下のように変更して記述すればよい。

// __construct()関数に追加する
add_action( 'wp_enqueue_scripts', array(&$this, 'add_plugin_js') );