管理画面側でjavascript(jquery)を呼び出す

WordPress

これまでの管理画面の作りは、ほぼphpのみで実装してきました。

次にこの管理画面にjavascirpt(jquery)を動作させるように設定してみます。

まず、プラグインフォルダの中に、jsファイルを設置する為のディレクトリを作成します。

/ワードプレス設置ディレクトリ/wp-content/plugins/SamplePlugin1

上記のディレクトリに対し、jsディレクトリを作成します。

/ワードプレス設置ディレクトリ/wp-content/plugins/SamplePlugin1/js/

次に、そのディレクトリ内に、javascript用のファイルを設置します。

/ワードプレス設置ディレクトリ/wp-content/plugins/SamplePlugin1/js/sample1_script.js

jsの中は、jqueryが使用できるので、以下のようなサンプルコードを書きます。

(function($){
    alert("hello jquery !");
})(jQuery);

次に、プラグイン本体のphpのコンストラクタの中に、以下の読み込み命令文を書きます。

wp_register_script('sample1js', plugins_url( './js/sample1_script.js', __FILE__ ));
wp_enqueue_script('sample1js');

こうすることで、プラグインの画面にアクセスした時にjsがロードされます。
例では、アラートを表示するだけのシンプルなjsですが、画面にアクセスすると以下のようになります。

アラート表示だけのプログラムなので、あまり意味がないですが、jsが動作することを確認できました。

コメントを残す

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