🐡
WordPress｜Ajaxでデータを取得する方法（脱jQuery）
▼ At First ▼
WordPressを使用した案件の際にAjaxを利用し非同期でデータを取得することがあった際の備忘録となります
脱jQuery：そもそもjQuery使ったことないのでよくわかりません...
▼ Note ▼
- WPでAjaxを利用するには「wp-admin/admin-ajax.php」を経由する
- Ajaxを実行する関数を
new URLSearchParams();の「action」パラメータに格納する -
new URLSearchParams();を使用することでJSONからクエリパラメータが生成することができる
▼「functions.php」にAjax実行関数を記述 ▼
- カスタム投稿タイプを使用しています
function ajax_hoge () {
$postList = [];
$post_type = "hoge"; //カスタム投稿タイプ
$post_cat = "hoge_cat"; //スラッグ名
$post_per_page = 20;
$offset = isset($_POST["offset"]) ? $_POST["offset"] : 0;
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$post_arg = array(
'post_type' => $post_type,
'posts_per_page' => $post_per_page,
'offset' => $offset,
'paged' => $paged,
'order' => 'asc'
);
$post_query = new WP_Query($post_arg);
if ( $post_query->have_posts() ) :
while ( $post_query->have_posts() ) :
$post_query->the_post();
$title = get_the_title();
$data = array(
"title" => $title,
// ・・・省略・・・
);
array_push($postList, $data);
endwhile;
endif;
header("Content-type: application/json; charset=UTF-8");
echo json_encode($postList); //JSON形式の文字列で返す
wp_die(); // WordPressの実行を停止
};
add_action('wp_ajax_ajax_hoge', 'ajax_hoge');
※ Ajax実行関数内で「var_dump();」等のでデバッグ関数を実行するとAjaxが正しく機能しない
▼ 非同期処理を Fetch API で実装 ▼
const config = {
offset: 0,
add: 20 //$post_per_page
};
const getData = () => {
config.offset += config.add; //「post_per_page」を更新
const params = new URLSearchParams();
params.append('action', 'ajax_hoge'); //Ajax実行関数を「action」に追加
params.append("offset", config.offset);
fetch(
"https:~ /wp-admin/admin-ajax.php",
{
method: 'post',
body: params
}
)
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('通信に失敗しました', error);
});
};
getData(); //Ajaxを実行したい場所で実行する
▼ At The End ▼
・SQL文を使用せずWP内の関数を実行するだけでデータを取得できること
・「SCF」などカスタムフィールドからもデータを容易に取得できること
・「new URLSearchParams()」にパラメータを設置することで複雑なソートの実装をクエリを渡すことで容易にできること
以上のことがメリットに感じました
Discussion