Ajaxでfunction.phpに記述した関数を動かして何かするときに必要なこと -『WordPress』
WordPressを実装したサイトで、「ボタンをクリックしたときにデータベースにアクセスして何かとってくる」など、ユーザーのアクションに応じて、Ajax通信でfunction.phpに定義した関数を実行する方法です。
例として、ボタンを押すとカスタムフィールドの値をインクリメントするスクリプトをつくってみました。
呼び出すPHP関数の作成
JavaScriptからAjaxで呼び出したいphp関数をfunction.phpに定義します。
functions.php
function my_ajax_func() {
$meta_key = $_POST['meta_key'];
$meta_value = $_POST['meta_value'];
$post_id = $_POST['post_id'];
update_post_meta($post_id, $meta_key, $meta_value); // update the field.
echo 'success';
wp_die($fieldname = '', $fieldvalue = '', $postid = ''); // error
}
add_action('wp_ajax_action_name', 'my_ajax_func'); // ログインユーザ
add_action('wp_ajax_nopriv_action_name', 'my_ajax_func'); //未ログインユーザ
action_nameは任意の名前です。
wp_ajax_* でAjaxで扱う独自のアクションフックを登録しますが、wp_ajax_* はログインユーザー、wp_ajax_nopriv_*はログインしてないユーザ用のフィルタです。
JavaScripとテンプレートの用意
例として、single.phpに記述する感じです。
single.php (テンプレート)
<a class="js-btn" href="" data-id="<?php echo $post->ID; ?>" data-key="ex_key" data-value="<?php echo get_post_meta($post->ID, 'ex_key', ture) ?>">click :)</a>
jQueryの$.ajaxメソッドを利用して簡単に記述します。
javascript
(function($){
$('.js-btn').on('click', function(e) {
e.preventDefault();
var ajaxUrl = window.location.protocol + '//' + window.location.host + '/wp-admin/admin-ajax.php',
$this = $(this),
metaKey = $this.attr('data-key'),
metaValue = parseInt($this.attr('data-value')) + 1, // インクリメント
postId = $this.attr('data-id');
$.ajax({
type: 'POST',
url: ajaxUrl,
data: {
'action' : 'action_name', // フックの名前を渡す
'meta_key' : metaKey, // 変数を渡す
'meta_value' : metaValue,
'post_id' : postId
},
beforeSend: function() {
console.log('updating');
} ,
success: function (res) {
console.log(res);
},
error: function(data) {
console.log('error');
}
});
});
})(jQuery);
admin-ajax.phpへのパスを取得します。
var ajaxUrl = window.location.protocol + '//' + window.location.host + '/wp-admin/admin-ajax.php'
actionにアクションフック名を渡します。
'action' : 'action_name',
上と同じくdataに任意の名前で変数を渡します。
'meta_key' : metaKey
おわります。
