Ajaxを使用してWordPressのデータベースにデータを挿入する方法
公開: 2021-12-30
Ajaxを使用してWordPressのデータベースにデータを挿入する方法をお探しですか？ これを達成するために従う必要のある簡単な手順を共有するので、読んでください。
このソリューションを実装するには、コーディングスキルが必要であることに注意してください。 ただし、WordPressサイトにソリューションを実装する方法を説明するために、各ステップを詳細に説明しようとします。
Ajaxは、ページをリロードせずにデータベースまたはサーバーにデータを送信することを意味します。 これにより、訪問者がWebサイトや現在のページを離れることがなくなります。 さらに、特に大きなフォームに入力する場合は、多くの時間を節約できます。
さっそく始めましょう。
概要
- フォームを作成する
- JQueryを使用してすべてのフォームデータを取得し、Ajaxを介してデータを送信します
- データベースへのデータのフェッチと挿入
フォームを作成する
最初のステップは、フォームを作成することです。 WordPressでAjaxリクエストを介してフォームを送信する場合、Ajaxを介してデータを送信し、URL admin_url（ 'admin-ajax.php'）;を介してテーマ内の関数に到達できます。 管理者に安全に連絡するため。
このURLの詳細については、WordPressが提供するAjaxドキュメントをご覧ください。
フォームを作成するには、このコードをコピーして、表示する場所に貼り付けます。 index.php、single.php、page.php、さらにはsidebar.phpファイルに表示できます。
<div class="container">
<h1>WordPress AJAX Insert Post Demo</h1>
<form id="enquiry_email_form" action="#" method="POST" data-url="<?php echo admin_url('admin-ajax.php'); ?>" enctype="multipart/form-data">
<div class="form-group">
<label for="">Enter Title</label>
<input type="text" class="form-control" name="post_title" id="post_title" placeholder="Enter Title" />
</div>
<div class="form-group">
<label for="">Enter Description</label>
<textarea name="post_description" id="post_description" cols="30" rows="10" class="form-control" placeholder="Enter Post Description"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-pencil"></i> Submit</button>
</div>
</form>
</div>
JQueryを使用してすべてのフォームデータを取得し、Ajaxを介してデータを送信します
このセクションでは、jQueryを使用して結果を取得します。 または、バニラJavaScriptを使用して同じ結果を得ることができます。
先に進む前に、$。ajax（）関数内のデータオブジェクト内のアクション変数に注意することを忘れないでください。 これは、Ajax関数内で関数を使用するためです。
$("#enquiry_email_form").on("submit", function (event) {
event.preventDefault();
var form= $(this);
var ajaxurl = form.data("url");
var detail_info = {
post_title: form.find("#post_title").val(),
post_description: form.find("#post_description").val()
}
if(detail_info.post_title === "" || detail_info.post_description === "") {
alert("Fields cannot be blank");
return;
}
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
post_details : detail_info,
action: 'save_post_details_form' // this is going to be used inside wordpress functions.php
},
error: function(error) {
alert("Insert Failed" + error);
},
success: function(response) {
alert("Insert Success" + response);
}
});
})
上記のコードは、送信ボタンをクリックすると、データがAjaxに送信されることを保証します。 WordPressのajax関数を使用して、テーマのfunctions.php内の値をフェッチする必要があります。
データベースへのデータのフェッチと挿入
まず、WordPress Ajax関数を記述して、データを取得してデータベースに挿入しましょう。
//Saving Ajax Data
add_action('wp_ajax_nopriv_save_post_details_form','save_enquiry_form_action');
上記のコードの文字列は、2つの主要部分で構成されています。 それらはnoprivとsave_post_details_formです。
noprivの部分は、ユーザーがログインしている場合にAjaxが失敗することを意味します。ただし、ユーザーがログインしていない場合、Ajaxトリガーは機能します。
save_post_details_formは、データオブジェクトの$ .ajax（）内のJavaScriptコードに記述したものです。 正しく一致していない場合、関数は機能しないことに注意してください。
add_action関数のもう1つの引数は、データを取得して必要な処理を実行する関数の名前です。
最後のステップは、結果に応じてアクションtrueまたはfalseを返し、それをフロントエンドに表示することです。
function save_enquiry_form_action() {
$post_title = $_POST['post_details']['post_title'];
$post_description = $_POST['post_details']['post_description'];
$args = [
'post_title'=> $post_title,
'post_content'=>$post_description,
'post_status'=> 'publish',
'post_type'=>post',
'post_date'=> get_the_date()
];
$is_post_inserted = wp_insert_post($args);
if($is_post_inserted) {
return "success";
} else {
return "failed";
}
}
メッセージをカスタマイズして別の出力を表示できることに注意してください。
結論
この簡単な投稿では、Ajaxを使用してWordPressのデータベースにデータを挿入する方法を共有しました。 前のセクションの「ifelse」条件は、Ajax内でトリックを実行し、結果メッセージをより説明的にすることができます。
このソリューションを実装できない場合は、お気軽にお問い合わせください。 あなたが何かを間違えた場合、あなたはあなたのサイトを破壊することができます。
この投稿が、ページをリロードせずにデータベースにデータを送信する方法を学ぶのに役立つことを願っています。
同様の記事
- Foreachループで登録済みサイドバーWordPressを取得する方法
- 実用的な例を使用してWordPressでカテゴリ名を表示する方法
- WordPressでログインしたユーザー情報を取得する方法
- WooCommerceチェックアウトページでチェックボックスフィールドを作成する方法