자신의 플러그인으로 WordPress 사이트에서 PHP와 함께 AJAX 사용하기
게시 됨: 2021-07-23
이 기사에서는 WordPress 웹 사이트용 AJAX with PHP에 대해 설명합니다.
AJAX는 사용자가 웹 사이트에서 대화형 응용 프로그램을 개발할 수 있도록 도와주는 웹 개발 기술입니다. 사용자에게 더 빠르고 부드러운 웹 경험을 제공합니다. 이를 통해 사용자는 페이지를 다시 로드하거나 새로 고치지 않고도 웹 페이지의 내용을 변경하거나 업데이트할 수 있습니다. AJAX를 사용하려면 다양한 프로그래밍 언어를 알아야 합니다.
AJAX란 무엇입니까?
AJAX는 '비동기 JavaScript 및 XML'의 약자입니다. 앞서 언급했듯이, 재미있고 끊임없이 변화하며 상호 작용하는 웹 응용 프로그램을 만드는 데 사용됩니다.
AJAX 및 관련 기술의 도움으로 개발된 웹 애플리케이션의 인기 있는 예로는 Google 지도, Google 검색의 자동 완성 기능, 다양한 소셜 미디어 게시물의 댓글 및 좋아요 등이 있습니다.
AJAX의 기본
Ajax는 JavaScript, HTML, CSS 및 XML과 같은 다양한 프로그래밍 언어의 도움으로 더 빠르고 향상된 웹 응용 프로그램 및 웹 사이트를 개발합니다. 이러한 프로그래밍 언어 외에도 웹 애플리케이션 개발을 위해 AJAX with PHP 및 기타 서버 측 언어도 사용되고 있습니다.
콘텐츠 표시에 JavaScript를 사용하는 반면 CSS는 프레젠테이션 및 문서 개체 모델에 도움이 됩니다. 또한 콘텐츠에 XHTML을 사용합니다.
기존의 웹 애플리케이션이나 웹 페이지에서 정보는 서버와 동기적으로 교환됩니다. 반면, AJAX를 사용하도록 설계된 웹 애플리케이션에서는 버튼을 클릭하거나 폼을 채우는 등의 이벤트가 발생하면 JavaScript가 XMLHTTP 요청을 생성하여 XML 형식으로 서버에 보낸다.
서버는 요청을 처리하여 서버 측에서 응답을 생성하고 이를 브라우저로 다시 보냅니다. 그런 다음 JavaScript는 응답을 처리하고 현재 디스플레이 화면의 내용이 업데이트됩니다. 페이지를 새로고침하거나 새로 고칠 필요가 없으므로 사용자는 서버로 정보를 전송하는 것을 인식하지 못할 것입니다.
WordPress에서 AJAX를 사용하는 데 필요한 기술
위의 논의에서 알 수 있듯이 사용자는 AJAX를 올바르게 활용하기 위해 다음과 같은 기술이 필요합니다.
• JavaScript, HTML 및 CSS와 같은 프로그래밍 언어에 대한 지식
• PHP 등의 서버측 언어 능숙자
• XML 또는 JSON의 기초
AJAX의 장점
AJAX의 다양한 장점은 아래에 설명되어 있습니다.
• 현재 사용되는 모든 브라우저를 거의 지원합니다.
• 더 빠른 응답 시간을 포함하므로 속도와 성능 면에서 향상된 사용자 경험을 의미합니다.
• Prototype, jQuery 등의 오픈 소스 JavaScript 라이브러리 사용 가능
• 클라이언트와 서버 사이의 시간을 줄여주므로 서버 뿐만 아니라 사용자의 시간도 절약됩니다.
• 서버가 데이터 로드를 처리할 필요가 없으므로 대역폭 사용량을 줄이고 네트워크 운영을 최적화하는 데 도움이 됩니다.
• XMLHTTP 요청은 데이터 검색에 사용되므로 사용자는 동시에 여러 작업을 수행할 수 있습니다.
워드프레스의 AJAX
AJAX는 WordPress의 백엔드에서 사용되므로 게시물이나 카테고리가 변경될 때마다 또는 관리자가 댓글을 검토할 때마다 업데이트가 즉시 이루어집니다. AJAX는 주로 WordPress의 JQuery와 함께 사용됩니다. WordPress가 AJAX를 사용하는 프로세스는 다음과 같습니다.
• 요청 시 'wp-admin' 폴더에 있는 'admin-ajax.php' 파일을 통과한다.
• 이러한 요청은 'get' 또는 'post' 메서드를 사용하여 일반적으로 'action'이라고도 하는 데이터의 적어도 일부를 제공하는 데 필요합니다.
• 이 작업은 'admin-ajax.php' 파일의 코드에 'wp_ajax_my_action' 및 'wp_ajax_nopriv_my_action'이라는 두 개의 후크를 생성하도록 프롬프트합니다. 이 후크의 'my_action'은 'get' 또는 'post' 메소드의 'action' 변수 값을 나타냅니다.
• 첫 번째 후크는 로그인한 사용자가 수행하는 작업을 위한 것이고 두 번째 후크는 로그아웃한 사용자만을 위한 것입니다.
• 후크 함수는 브라우저에서 JavaScript가 비활성화된 경우에도 코드가 계속 작동하도록 하는 점진적인 성능 저하를 위해 계획되어야 합니다.
WordPress AJAX 플러그인 만들기
이 섹션에서는 'Post Likes Counter'라는 기본 WordPress AJAX 플러그인의 예를 살펴보겠습니다. 이 플러그인에는 다음 기능이 포함되어 있습니다.
• 프런트엔드에서 즉시 업데이트됩니다.
• 로그인한 사용자는 게시물을 좋아할 수 있습니다.
• 로그아웃한 사용자가 게시물에 좋아요를 누르면 화면에 오류 메시지가 나타납니다.
• 이 플러그인은 '좋아요' 수의 총 기록을 유지하고 표시하는 데 도움이 됩니다.
먼저 빈 WordPress 플러그인을 만들고 활성화해야 합니다. 플러그인을 생성하려면 다음 단계를 수행해야 합니다.
1단계 : 플러그인의 고유한 이름을 선택합니다. 플러그인 저장소를 확인하여 제안된 플러그인 이름이 이미 사용 중이 아닌지 확인할 수 있습니다. 일반적으로 플러그인 개발자는 수행해야 하는 기능에 따라 플러그인 이름을 선택합니다.
2단계 : 다음 단계에서 선택한 플러그인 이름을 사용하여 생성하려면 PHP 파일이 필요합니다. 이 플러그인을 설치할 사용자는 설치를 위해 워드프레스 플러그인 디렉토리 'wp-content/plugins-'에 PHP 파일을 배치해야 하므로 플러그인은 PHP 파일에 대해 동일한 이름을 공유할 수 없습니다.
따라서 저장소의 다른 플러그인과의 충돌을 피하기 위해 플러그인 파일 이름도 고유해야 합니다. 자신의 이름이나 접두사에 회사 이름을 사용하여 PHP 파일의 고유한 이름을 만들 수 있습니다.
3단계 : WordPress 플러그인에는 JavaScript, CSS, 언어 및 이미지 파일과 함께 하나 이상의 PHP 파일이 포함되어야 합니다. 여러 파일이 있는 경우 디렉토리의 고유한 이름과 기본 PHP 파일의 기본 이름을 선택하십시오.
모든 플러그인 파일을 생성된 디렉토리에 넣고 플러그인 사용자에게 이 전체 디렉토리를 'wp-content/plugins/' 디렉토리에 업로드하도록 요청합니다.
WordPress 설치는 표준 플러그인 디렉토리 'wp-content/plugins/'를 변경하도록 구성할 수 있습니다. 따라서 PHP 코드에서 plugin_dir_path() 및 plugin_url() 또는 절대 경로 및 URL을 사용해야 합니다.
테마의 포스트 템플릿
플러그인을 만든 후에는 테마의 'single.php' 포스트 템플릿을 찾아야 합니다. 활성 테마의 루트 디렉토리에서 찾을 수 있습니다. 단일 게시물을 조회할 때 사용됩니다. 'Post Like Counter' 플러그인을 배치하려는 위치입니다. 파일은 편집을 위해 열어 두어야 합니다.
AJAX 호출을 위한 포스트 템플릿 준비
사용자가 게시물을 좋아할 수 있도록 링크를 생성해야 합니다. 사용자가 JavaScript를 활성화한 경우 JavaScript 파일(나중에 생성됨)을 사용할 수 있으며 그렇지 않은 경우 링크를 직접 따라갈 수 있습니다. 이를 위해 'single.php' 파일에 다음 코드를 삽입합니다. 이 코드는 'single.php' 파일에 포함된 템플릿 부분에도 추가할 수 있습니다.
// '좋아요' 메타 키 값은 특정 게시물에 대한 총 좋아요 수를 저장합니다. 빈 문자열이면 0을 표시합니다. 아이디, "좋아요", true); $likes = ($likes == "") ? 0 : $좋아요; ?> 이 게시물의 좋아요 수는 <span id='like_counter'></span>개<br>입니다. // admin-ajax.php 파일에 연결합니다. 추가 보안을 위해 Nonce 체크가 포함되어 있습니다. JS 사용 클라이언트의 "user_like" 클래스에 유의하십시오. 아이디.'&nonce='.$nonce); echo '<a class="user_like" data-nonce="' . $nonce . '">ID . '" href="' . $링크 . '">이 게시물에 좋아요</a>'; ?>
JavaScript 없이 Ajax 호출 처리하기
이전 단계에서 생성된 링크를 클릭하면 'admin-ajax.php' 스크립트로 전달됩니다. 그러나 함수가 작업을 실행하도록 생성되지 않았기 때문에 유용한 결과를 찾지 못할 것입니다. 플러그인 파일에서 함수를 생성하고 WordPress에서 생성한 후크에 추가하려면 다음 코드를 삽입합니다.
<?php // 여기서는 구문 강조 표시를 활성화하기 위해서만 사용됩니다. 플러그인 파일에 이미 포함되어 있는 경우 제외합니다.
// 생성된 두 개의 후크에 대한 작업을 정의합니다. 첫 번째는 로그인한 사용자를 위한 것이고 다음은 로그아웃한 사용자를 위한 것입니다.
add_action("wp_ajax_my_user_like", "my_user_like");
add_action("wp_ajax_nopriv_my_user_like", "Please_login");
// 로그인한 사용자에 대해 실행될 함수 정의
함수 my_user_like() {
// 추가 보안 계층을 확인하지 않고 실패하면 함수가 종료됩니다.
if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_like_nonce")) {
exit("워프워프");
}
// 게시물의 like_count를 가져오고 비어 있으면 0으로 설정하고 클릭이 등록되면 1씩 증가
$like_count = get_post_meta($_REQUEST["post_id"], "좋아요", true);
$like_count = ($like_count == ') ? 0 : $like_count;
$new_like_count = $like_count + 1;
// 'likes' 값 업데이트 지정된 게시물에 대한 메타 키, 존재하지 않는 경우 게시물에 대한 새 메타 데이터 생성
$like = update_post_meta($_REQUEST["post_id"], "좋아요", $new_like_count);
// 위의 작업이 실패하면 결과 유형이 'error'로 설정됩니다. 그리고 like_count가 이전 값으로 설정되고 성공하면 new_like_count로 업데이트됨
if($like === 거짓) {
$result['type'] = "오류";
$결과['like_count'] = $like_count;
}
또 다른 {
$result['type'] = "성공";
$결과['like_count'] = $new_like_count;
}
// Ajax 호출을 통해 작업이 실행되었는지 확인합니다. 그렇다면 JS 코드가 트리거되고, 그렇지 않으면 사용자가 게시물 페이지로 리디렉션됩니다.
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttp요청') {
$결과 = json_encode($결과);
에코 $ 결과;
}
또 다른 {
header("위치: ".$_SERVER["HTTP_REFERER"]);
}
// die() 함수로 스크립트를 끝내는 것을 잊지 마십시오 - 매우 중요
주사위();
}
// 로그아웃한 사용자에 대해 실행될 함수 정의
함수 please_login() {
echo "좋아요를 하려면 로그인해야 합니다"
주사위();
}
모든 것이 제대로 작동하면 로그인한 사용자가 '이 게시물에 좋아요' 링크를 클릭하면 좋아요 수가 자동으로 업데이트됩니다. 반면 자바스크립트가 비활성화되면 페이지가 새로 고쳐지고 '좋아요'의 업데이트된 수가 표시됩니다.
JavaScript 지원 추가
JavaScript에 대한 지원을 추가하면 일을 더 쉽게 할 수 있습니다. WordPress에서 PHP와 함께 AJAX를 사용하려면 플러그인의 사용자 정의 JavaScript 파일과 함께 jQuery 라이브러리를 대기열에 추가해야 합니다. 이를 위해 플러그인에 다음 코드를 작성합니다.
admin_url( 'admin-ajax.php' )))); // 위에서 등록한 jQuery 라이브러리와 스크립트를 대기열에 넣습니다. wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'liker_script' ); }
다음으로 자바스크립트 파일 'liker_script.js'를 생성해야 하며, 이 파일은 플러그인의 루트 폴더에 추가로 업로드됩니다. 다음 코드는 'liker_script.js' 파일을 생성하는 데 사용됩니다.
jQuery(문서).ready( 함수() {
jQuery(".user_like").click( 함수(e) {
e.preventDefault();
post_id = jQuery(this).attr("data-post_id");
nonce = jQuery(this).attr("데이터 임시");
jQuery.ajax({
유형 : "게시물",
데이터 유형 : "json",
url : myAjax.ajaxurl,
데이터: {액션: "my_user_like", post_id: post_id, nonce: nonce},
성공: 함수(응답) {
if(response.type == "성공") {
jQuery("#like_counter").html(response.like_count);
}
또 다른 {
alert("좋아요를 추가할 수 없습니다.");
}
}
});
});
});
WordPress 테마에서 AJAX를 구현하는 방법
다음 단계는 WordPress 테마에서 PHP로 AJAX를 구현하는 데 도움이 됩니다. 예를 들어, 드롭다운 메뉴에 범주를 표시하고 '상위 범주'를 클릭하면 하위 범주가 다른 드롭다운 상자에 표시된다고 가정해 보겠습니다. 이 작업은 다음 단계를 통해 수행됩니다.
1단계 : 대시보드 왼쪽의 '카테고리'를 선택하고 오른쪽에 나타나는 상자에 카테고리 이름을 입력하고 아래에 카테고리 슬러그를 삽입합니다. 상위 카테고리가 생성 중이면 '없음'을 선택하고, 하위 카테고리를 생성 중이면 옵션에서 상위 카테고리를 선택합니다.
2단계 : 이 단계에서는 AJAX 기능이 구현될 WordPress 템플릿이 생성됩니다. 새 PHP 파일을 열고 저장하십시오. 생성된 페이지에 다음 코드를 삽입합니다.
위의 코드에서 'Template Name: Implement Ajax'는 워드프레스 템플릿의 이름이고 'get_header()'와 'get_footer()' 함수는 페이지의 머리글과 바닥글 내용을 표시하는 데 사용됩니다.
먼저 jQuery 라이브러리 파일이 페이지에 포함되어야 AJAX 항목을 추가하는 데 도움이 됩니다. AJAX with PHP는 모든 JavaScript 라이브러리를 사용하거나 원시 JavaScript로 AJAX를 호출할 수 있습니다. 다음 예제에서는 jQuery JavaScript 라이브러리를 사용하여 AJAX를 구현합니다.
3단계 : 템플릿에 jQuery 파일을 추가하고 'wp_dropdown_categories' 함수를 호출하여 드롭다운 메뉴의 상위 카테고리를 검색할 수 있도록 합니다.
#내용{폭:자동; 높이:400픽셀; 여백:50픽셀;}
<div>
</div>
<?php
4단계 : jQuery 코드를 삽입하여 선택 중인 기본 카테고리의 ID를 가져옵니다. 'functions.php' 파일로 보내 선택한 상위 카테고리 ID 아래의 하위 카테고리를 가져옵니다. 그런 다음 결과를 새로 고치지 않고 페이지로 다시 보낼 수 있습니다.
$(함수(){
$('#main_cat').change(함수(){
var $mainCat=$('#main_cat').val();
// 아약스 호출
$("#sub_cat").empty();
$.ajax({
URL:"/wp-admin/admin-ajax.php",
유형: '포스트',
데이터:'action=my_special_action&main_catid=' + $mainCat,
성공:기능(결과)
{
// 경고(결과);
$("#sub_cat").removeAttr("비활성화됨");
$("#sub_cat").append(결과);
}
});
}
);
});
위의 코드에서 '#main_cat' ID로 메인 카테고리 드롭다운 변경 이벤트에 코드가 추가되었습니다.
var $mainCat=$('#main_cat').val();
.val() 함수는 드롭다운에서 선택한 옵션 값을 가져와 변수 '$mainCat'에 저장하는 데 도움이 됩니다.
$("#sub_cat").empty();
하위 범주 드롭다운 '#sub_cat'이 이전 값을 포함하는 경우 AJAX를 호출하기 전에 비워야 합니다.
다음 jQuery 라인은 AJAX jQuery 함수를 호출하는 데 도움이 됩니다. 아래 섹션에 제공된 AJAX 함수의 매개변수를 확인하십시오.
url:"bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
유형: '포스트',
AJAX가 WordPress에서 작동하도록 하기 위해 'URL' 매개변수가 사용됩니다. 따라서 요청은 'admin-ajax.php' 파일로 전송됩니다. 다음으로 'functions.php' 파일의 후크가 호출되어 '/wp-admin/admin-ajax.php' URL로 전송된 게시된 데이터를 가져옵니다.
요청과 함께 값을 보내기 위해 'data' 매개변수가 사용됩니다. 이 예에서는 data 매개변수가 있는 두 개의 인수(action 및 main_catid)가 사용됩니다.
5단계 : 'functions.php' 파일에서 다음 코드를 사용하여 작업을 연결합니다.
add_action('wp_ajax_my_special_action', 'my_action_callback');
위의 작업에서 hook에는 두 개의 인수가 있습니다. 첫 번째 인수 'wp_ajax_my_special_action'에서 'wp_ajax_'는 데이터 매개변수 'action'과 함께 전송되는 값입니다. 두 번째 인수 'my_action_callback'에서 데이터가 처리되고 결과가 다시 전송됩니다.
위의 작업 후크는 로그인한 사용자를 위한 것입니다. 로그아웃한 사용자의 경우 다음 작업을 후크할 수 있습니다.
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
사용자와 콜백 기능 모두에 후크를 추가한 후의 최종 코드는 다음과 같습니다.
함수 구현_ajax() {
if(isset($_POST['main_catid']))
{
$categories= get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
foreach($범주를 $cat으로) {
$option .= 'term_id.'">';
$옵션 .= $cat->cat_name;
$option .= ' ('.$cat->category_count.')';
$옵션 .= '';
}
echo 'Scegli...'.$option;
주사위();
} // 종료되는 경우
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//로그인하지 않은 사용자의 경우.
6단계 : 이 단계에서는 대시보드에 새 페이지를 만들고 템플릿을 할당합니다. 페이지가 브라우저에 로드된 후 상위 카테고리가 있는 첫 번째 드롭다운이 페이지에 로드됩니다.
두 번째 드롭다운이 비어 있으므로 첫 번째 드롭다운에서 옵션을 선택하여 작동 방식을 확인합니다.
따라서 AJAX with PHP는 새로 생성된 플러그인을 사용하여 WordPress 사이트에서 사용할 수 있습니다.