WordPressの自作プラグインでAjaxする方法で、正しく行う方法がないか探していた。Googleで検索しても、Ajaxを使ってるプラグインの情報がたくさん出てくるばっかりで、作り手に有益な情報を調べるにまでいけなかった。だから、必要なファイルのみを無理矢理require_onceで読み込んでインスタンスを生成してから、やりたい処理を行うという強引な方法を取っていた。しかし、Ajaxしたいところで毎回require_onceをやるのは面倒だし、正しくやる方法があるに違いないと思っていたら、あったよ！やっぱり！
http://wpdocs.sourceforge.jp/AJAX_in_Plugins
上のサイトの例では、javascriptライブラリとしてSACKを使っているが、俺はprototype.js&scriptaculousファンなので、prototype.jsを使ったAjaxで勝負！
まず、プラグイン側でjavascriptファイルを読み込む設定を行う。
プラグインの名前は、hogeとします。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 | /** * /wp-content/plugins/hoge/hoge.php * * 管理画面でjavascriptを読み込む */add_action('admin_enqueue_scripts', 'hoge_script_admin');function hoge_script_admin($hook_suffix){ // 指定したページのみでjsを読み込むために、条件を設定 // ここではhogeプラグインのカテゴリー管理ページに焦点と絞ったとする if (preg_match('/page_hoge_category_list$/', $hook_suffix)) { // hoge_category.jsと、prototype.jsを読み込む wp_enqueue_script('hoge_category', plugins_url('hoge/js/hoge_category.js'), array('prototype'), '1.0', false); }} |
次に、hoge_category.js側に処理を記述する。
関数 update_category_list が呼ばれると、Ajaxでカテゴリーリストを更新する想定です。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 | function update_category_list(){ // ajaxurlはWordPressが定義してくれてる var params =[]; // Ajaxアクションを指定 params.push('action=hoge_get_category'); // あとは必要なパラメータを設定 params.push('abc=xyz'); new Ajax.Updater( 'category_list', // 更新される領域のID ajaxurl, { method: 'post', parameters: params.join('&') } });} |
最後に、hoge_category.jsから呼ばれるサーバ側の処理を記述する。
01 02 03 04 05 06 07 08 09 10 11 | // ajaxで呼ばれるアクションを追加するadd_action('wp_ajax_hoge_get_category', 'hoge_get_category');// 実際に呼ばれるアクションを定義するfunction hoge_get_category(){ $output = '<ul>' . "\n"; for($i = 1; $i < 10; $i++){ $output .= '<li>カテゴリーその'. $i .'</li>' . "\n" } $output .= '</ul>' . "\n"; echo $output;} |
これで、カテゴリーリストがAjaxで更新されます。
