Ajax를 사용하여 WordPress의 데이터베이스에 데이터를 삽입하는 방법
게시 됨: 2021-12-30
Ajax를 사용하여 WordPress의 데이터베이스에 데이터를 삽입하는 방법을 찾고 있습니까? 이를 달성하기 위해 따라야 할 간단한 단계를 공유하므로 계속 읽으십시오.
이 솔루션을 구현하려면 몇 가지 코딩 기술이 필요합니다. 그러나 WordPress 사이트에서 솔루션을 구현하는 방법을 설명하기 위해 각 단계를 자세히 설명하려고 합니다.
Ajax는 페이지를 다시 로드하지 않고 데이터베이스나 서버로 데이터를 보내는 것을 의미합니다. 이것은 방문자가 귀하의 웹사이트나 현재 페이지를 떠나지 않도록 합니다. 또한 특히 큰 양식을 작성할 때 많은 시간을 절약할 수 있습니다.
바로 들어가 보겠습니다.
요약
- 양식 만들기
- JQuery를 사용하여 모든 양식 데이터를 가져오고 Ajax를 통해 데이터 보내기
- 데이터베이스에 데이터 가져오기 및 삽입
양식 만들기
첫 번째 단계는 양식을 만드는 것입니다. WordPress에서 Ajax 요청을 통해 양식을 제출할 때 Ajax를 통해 데이터를 보내고 URL admin_url('admin-ajax.php')을 통해 테마 내부의 기능에 연결할 수 있습니다. 관리자에게 안전하게 연락할 수 있습니다.
WordPress에서 제공하는 Ajax 문서에서 이 URL에 대해 자세히 알아볼 수 있습니다.
양식을 만들려면 이 코드를 복사하여 표시하려는 위치에 붙여넣습니다. 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');
위 코드의 문자열은 두 가지 주요 부분으로 구성됩니다. nopriv 및 save_post_details_form입니다.
nopriv 부분은 사용자가 로그인하면 Ajax가 실패한다는 것을 의미합니다. 그러나 사용자가 로그인하지 않은 경우 Ajax 트리거가 작동합니다.
save_post_details_form은 데이터 개체의 $.ajax() 내부 JavaScript 코드에 작성한 것입니다. 제대로 일치하지 않으면 기능이 작동하지 않는다는 점을 언급할 가치가 있습니다.
add_action 함수의 다른 인수는 데이터를 가져오고 원하는 모든 작업을 수행하는 함수의 이름입니다.
마지막 단계는 결과에 따라 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의 데이터베이스에 데이터를 삽입하는 방법을 공유했습니다. 마지막 섹션의 'if else' 조건은 Ajax 내부에서 트릭을 수행하고 결과 메시지를 더 설명적으로 만들 수 있습니다.
이 솔루션을 구현할 수 없는 경우 언제든지 당사에 문의하십시오. 실수를 하면 사이트가 망가질 수 있습니다.
이 게시물이 페이지를 다시 로드하지 않고 데이터베이스에 데이터를 제출하는 방법을 배우는 데 도움이 되었기를 바랍니다.
유사한 기사
- Foreach 루프로 등록된 사이드바 WordPress를 얻는 방법
- 실제 예를 사용하여 WordPress에 카테고리 이름을 표시하는 방법
- WordPress에서 로그인한 사용자 정보를 얻는 방법
- WooCommerce 결제 페이지에서 확인란 필드를 만드는 방법