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とします。

/**
 * /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でカテゴリーリストを更新する想定です。

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から呼ばれるサーバ側の処理を記述する。

// 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で更新されます。

Tweet