• HOME
  • WordPress
  • 管理画面でAjaxを使う際のぷちまとめ。

管理画面でAjaxを使う際のぷちまとめ。

function.phpに

//Ajax 設定
function add_my_ajaxurl() {
?>
	<script>
		var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
	</script>
<?php
}
add_action( 'wp_head', 'add_my_ajaxurl', 1 );

//管理画面に既存のjQueryを読み込む
function load_script(){
	wp_enqueue_script('jquery');
}
add_action('init', 'load_script');

//管理画面全体にJSを読み込ませる
function add_my_js() {
	wp_enqueue_script('admin_print_styles',  get_bloginfo('template_url') . '/js/admin.js' , array('jquery'), '', true );
}
add_action('admin_print_scripts', 'add_my_js');

WordPressでAjaxを使う場合は必ずdmin-ajax.phpを通して使わないといけないというルールがあるので
そのファイルを読み込むように設定する

管理画面にwordpressが使っているjQueryを読み込む。
通常つかっている場合もあるけどもjqueryが重複してもどうにかしてくれる関数のようだよ。
んで、Ajaxを記述するためのjsを読み込む。
第5引数をtrueにするとbodyの閉じのあたりに読み込んでくれる。
※wp_footerは必要

読み込むjsはとりあえずこちら。

jQuery(document).ready(function ($) {
$( '#kuma' ).on( 'click', function(){
	$post_type = $("#post_type_select").val();
	$.ajax({
		type: 'POST',
		url: ajaxurl,
		datatype: 'json',
		data: {
			'action' : 'get_custom_taxonomies',
			'post_custom_type' : $post_type,
		},
		success: function( result ){ 
		var $taxonomies = $.parseJSON(result);
			console.log($taxonomies);
			$.each( $taxonomies, function( i, $taxonomy ){
				console.log($taxonomy);
				$("#taxonomy_select").append("<option value='"+ $taxonomy +"'>" + $taxonomy + "</option>");
			});
			$("#taxonomy_select").show();
		 },
	});
	return false;
});
});

‘action’ : ‘get_custom_taxonomies’,
この部分で実行したい関数名を指定

function.phpに戻り実行させたい関数の記述

// Ajaxのアクションの設定
function get_custom_taxonomies(){
	$post_type = $_POST['post_custom_type'];
	$taxonomy_name = array();
	$taxonomies = get_object_taxonomies( $post_type, 'objects' );
	if($taxonomies){
		foreach( $taxonomies as $key => $taxonomy ){
			$taxonomy_name[] = $taxonomy->name;
		}
		$result = json_encode($taxonomy_name);
	}else{
		$result = "";
	}
	echo $result;
	die();
}
add_action( 'wp_ajax_get_custom_taxonomies', 'get_custom_taxonomies' ); //ログインユーザ
add_action( 'wp_ajax_nopriv_view_sitename', 'view_sitename' ); //未ログインユーザ

これが基本的な状態になる。
んで、少しハマったところがそのままjqueryの記述がコンクリフトの関係で$が使えないので
jQuery(document).ready(function ($) {

});
囲みをちょっと変更する必要がある。
これを行うと通常時と同じように$が使えるようになる。

add_action( ‘wp_ajax_view_sitename‘, ‘view_sitename‘ ); //ログインユーザ

add_action( ‘wp_ajax_ //ログインユーザ用
add_action( ‘wp_ajax_nopriv_ //未ログインユーザ用

あとは実行したい関数名を変更したい場合は太字にしているところも変更する必要がある