아약스, 또는 비동기 자바 스크립트와 XML, 서버 측 스크립트와 통신하는 데 사용되며 페이지를 다시로드하지 않고도 동적 내용을로드 할 수 있습니다.

예를 들어 사이트 웹 긍정적인 분위기를 조성하고자 합니다. "라고 표시된 버튼을 추가할 수 있습니다.사랑을 보여줘! »홈 페이지에 카운터가 있고 AJAX 덕분에 버튼이 활성화 될 때마다 (클릭한 사람 방문객) 페이지를 다시로드하지 않고 카운터가 증가합니다.

이 튜토리얼에서 빌드 할 예제입니다.

이 튜토리얼에서는 AJAX의 정의, 사용 방법 및 WordPress에서 AJAX를 사용하여 멋진 기능을 만드는 방법에 대해 자세히 알아 봅니다.

시작하자.

AJAX의 기본

• AJAX 피드는 일반적으로 다음 단계를 따릅니다.
• 사용자 작업으로 인해 AJAX 호출 시작
• 수신 서버에서 요청을 처리
• JavaScript를 통해 응답을 캡처하고 필요한 모든 조치를 수행하십시오.
• 새로운 테마 환경 설정

이것을 WordPress에서 실행 해 보겠습니다. 첫 번째 예는 제목을 클릭 할 때 기사에 대한 댓글 수가 포함 된 간단한 팝업을 표시합니다. 우리는 " 스물 열 여섯 WordPress에서.

여기에 당신이해야 할 작업은 다음과 같습니다

"에서 WordPress 설치의 Themes 디렉토리에 새 폴더를 작성하십시오. WP - 콘텐츠 "이름을 지정"ajax-test ", 두 개의 파일 생성 워드 프레스에 의해 요구, 즉 " functions.php ","Styles.css ""script.js "라는 새 파일을 추가합니다. CSS 스타일 시트의 헤더에 다음 코드를 추가합니다 (있는 style.css).

/ * 테마 이름 : 아약스 테스트 테마 테마 URI : http://premium.wpmudev.com 설명 : 다니엘 파타키 저자 URI : http://danielpataki.com 틀 : twentysixteen 버전 : 1.0.0 라이센스 우리의 지식 AJAX 저자 테스트를위한 테마 GNU 일반 공중 사용 허가서 이상 v2 라이센스 URI : http://www.gnu.org/licenses/gpl-2.0.html * /

상위 테마의 스타일 시트는 하위 테마에 의해로드되어야합니다. 과거에는 CSS 파일을 자식 테마로 가져 와서이 작업을 수행했지만 이렇게하는 데 권장되는 방법은 "대기열"을 사용하는 것입니다. 이 기능을 사용하는 방법을 보여 드렸습니다.

이제 부모의 스타일 시트와 우리의 자바 스크립트 파일을 직접 추가 할 수 있습니다 :

ADD_ACTION ( 'wp_enqueue_scripts', 'ajax_test_scripts'); ajax_test_scripts 기능 () {wp_enqueue_style (부모 - 스타일 ', get_template_directory_uri ()'/style.css. '); wp_enqueue_script (. '아약스 - 테스트 스크립트'get_stylesheet_directory_uri () '/scripts.js', 배열 ( 'JQuery와'), 1.0.0 ', TRUE); }

한 걸음 더 나아갈 에너지가 있다고 생각되면 멋진 이미지를 찾아 880 x 660 픽셀로 잘라서 어린이 테마 폴더에 넣은 다음 이름을 " screenshot.png ". 테마를 활성화하고 싶을 때 모양 섹션에 나타납니다.

이 자식 테마는 " 스물 열 여섯 그리고 우리는 아무것도 변경하지 않았지만 (아직!),이 사이트는 " 스물 열 여섯 ".

버튼 추가

시작하기 위해 " 사랑 unpeu보기! ". 그것을 표시하기에 좋은 장소는 주제별 기사의 사이드 바에있을 것입니다.

조사한 결과, 사이드 바는 " twentysixteen_entry_meta () »디렉토리에있는 곳« INC / 템플릿 tags.php ".

이 기능은 " 접속 즉, 자신의 functions.php 파일에 정의하여 수정할 수 있습니다. 첫 번째 단계는 전체 함수를 복사하여 자신의 functions.php 파일에 붙여 넣는 것입니다.

function twentysixteen_entry_meta () {if ( 'post'=== get_post_type ()) {$ author_avatar_size = apply_filters ( 'twentysixteen_author_avatar_size', 49); printf ( ' % 1 $ s % 2 $ s % 3 $ s ', get_avatar (get_the_author_meta ( 'user_email'), $ author_avatar_size), _x ( '저자', '게시자 이름 앞에 사용됨.', 'twentysixteen'), esc_url (get_author_posts_url (get_the_author_meta ( 'ID'))), get_the_author ()); } if (in_array (get_post_type (), array ( 'post', 'attachment'))) {twentysixteen_entry_date (); } $ 형식 = get_post_format (); if (current_theme_supports ( 'post-formats', $ 형식)) {printf ( ' % 4 $ s % 1 $ s ', sprintf ( ' % s ', _x ( '형식', '포스트 형식 앞에 사용됨.', ' twentysixteen ')), esc_url (get_post_format_link ($ 형식)), get_post_format_string ($ 형식)); } if ( 'post'=== get_post_type ()) {twentysixteen_entry_taxonomies (); } if (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ ( '댓글 을 % s ', 'twentysixteen'), get_the_title ())); 에코 ' '; }}

모든 메타 데이터의 맨 아래에 키를 추가합시다 :

$ love = get_post_meta (get_the_ID (), 'show_some_love', true); $ 사랑 = (빈 ($ 사랑))? 0 : $ 사랑; 에코 ' '. $ 사랑. ' ';

이 모든 코드를 설명합니다 :

첫 번째 줄은 기사가받은 사랑의 수를 검색합니다. 경우에 따라이 데이터는 존재하지 않습니다. 즉, 버튼을 아직 클릭하지 않은 경우입니다. 이러한 이유로 우리는

값이 비어 있으면 코드의 두 번째 줄에서 값을 0로 설정합니다.

세 번째 줄은 이미지와 사랑의 수를 포함하는 범위로 구성된 버튼을 제공합니다. SVG를 사용하고 싶기 때문에 이미지 소스를 비워 두었습니다. base64로 인코딩된 SVG를 사용하여 이미지 라인을 생성할 수 있습니다. 이렇게 하면 요구를 하지 않아도 되고 웹 사이트 더 효율적입니다.

이 작은 무료 이미지를 사용했습니다. 이 링크. 받은 코드를 다음과 같이 이미지 소스에 복사하여 붙여 넣습니다.

$love = get_post_meta( get_the_ID(), 'show_some_love', true );
$love = ( empty( $love ) ) ? 0 : $love;
echo '<span class="love-button"> <img width="28" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0MHB4IiBpZD0iTGF5ZXJfMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0MCA0MCIgd2lkdGg9IjQwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xOS45NzkwMDAxLDkuMTk1MzAwMSAgQzI1LjYzOTIwMDItMS44ODY3LDM4LjUxMTY5OTcsMy4zOTU5OTk5LDM3Ljk0OTE5OTcsMTMuMzAyN0MzNy4zNjM4LDIzLjYxNjE5OTUsMjIuODc0NTAwMywyNy4xNzM3OTk1LDE5Ljk3OTAwMDEsMzQuOTgxODk5MyAgQzE3LjA4MzAwMDIsMjYuOTc5MDAwMSwyLjc4OTU5OTksMjMuODExNTAwNSwyLjAwODMwMDEsMTMuMzAyN0MxLjI3MzksMy40MDc3MDAxLDE0LjkzNTk5OTktMS45MzEyLDE5Ljk3OTAwMDEsOS4xOTUzMDAxeiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZGNTk0RjsiLz48L3N2Zz4="><span class="number">' . $love . '</span></span>';

또한 버튼 스타일링에 약간의 CSS를 사용하여 호버 효과를 부여했습니다. 버튼인지 여부는 명확하지 않지만 간단한 테스트에는 해당됩니다.

- 좋아 버튼 IMG {마진 - 오른쪽 : 6px을; 불투명도 : 0.7; 커서 : 포인터; } - 좋아 버튼 IMG : 호버 {불투명도 : 1; }

액션 트리거

마지막으로 JavaScript를 시작합니다! 상품을 타겟팅하고 클릭을 감지해야합니다. 방법은 다음과 같습니다.

(함수 ($) {$ (문서) .on ( 'click', '.love-button img', function () {alert ( "love is shared");})}) (jQuery);

이 시점에서 버튼을 클릭하면 "Love is shared"라는 텍스트와 함께 JavaScript 경고가 표시됩니다. "

데이터 요구 사항

이 텍스트 대신 AJAX 호출을 트리거해야합니다. 코드를 작성하기 전에 보내야 할 내용을 이해합니다.

AJAX URL

우선 데이터를 보낼 장소가 필요합니다. 데이터를 보내는 곳에서 데이터를 처리하고 전화를받습니다. WordPress에는 AJAX 호출을 처리 할 수있는 기본 제공 장소가 있습니다. 관리자-ajax.php "내부" wp-admin ". 이 URL을 스크립트 ("원시"코딩을 사용하는 것은 허용되지 않습니다.), 그럼 어떤 교활한 워드 프레스를 사용하자.

기능 wp_localize_script () 원래는 JavaScript 파일의 문자열을 번역하기위한 것으로 잘 작동합니다. 또한이를 사용하여 JavaScript 파일 (이 경우 AJAX 파일의 URL)에 변수를 전달할 수 있습니다. 파일에 다음 코드를 추가하십시오. " 기능 다음과 같이 :

wp_localize_script ( 'ajax-test-scripts', 'ajaxTest', 배열 ( 'ajax_url'=> admin_url ( 'admin-ajax.php')));

이 마지막 객체의 결과 이름은 ajaxTest이며, 마지막 매개 변수에 주어진 배열을 속성으로 포함합니다. 사용할 수있는 값을 입력하려면 ajaxTest.ajax_url 우리의 자바 스크립트 코드입니다.

기사의 식별자

기사의 식별자로 임의의 데이터를 전송합니다 (우리가 "작은 사랑을 추가"하려는 기사를 식별하는 데 사용할). 이것은 DOM에서 검색 할 수 있습니다. 아래 "Twenty Sixteen"테마에 사용 된 구조를 살펴보십시오.

우리 버튼에는 조상 중 하나로 "기사"가 있습니다. 이 요소는 클래스를 가지며 기사의 숫자 식별자를 포함합니다. 가장 우아한 솔루션은 아니지만 거기에서 ID를 가져올 수 있습니다.

$ (문서) CSTE 연구진 (VAR = {post_id를에서는 parseInt ($ (이)) ( '- 좋아 IMG의 단추를'클릭 '기능 .parents ('article.post:first '). Attr의 ( "ID") .replace ( '포스트' '')); CONSOLE.LOG (ID)})

액션

또한 WordPress에서는 action이라는 매개 변수를 보내야합니다. 모든 작업이 admin-ajax로 전송되므로 이러한 요청을 구분할 수있는 방법이 필요하므로이 매개 변수를 사용해야합니다.

AJAX 요청 보내기

이제 모든 것을 하나로 모을 수 있습니다. "에 대한 AJAX 호출을 만들어야합니다. WP - 관리자 / 관리자 - ajax.php 기사 ID와 작업이 포함됩니다. 다음은 어떻게 보일지입니다.

(함수 ($) {$ (문서) CSTE 연구진 ( '- 좋아 IMG의 단추를'클릭 '함수 () {= VAR으로 parseInt post_id를 ($ (이) .parents ('article.post:first '). . ATTR ( 'ID가'() ','후 '') 교체); $ 아약스 ({URL : ajaxTest.ajax_url 유형 '게시물'데이터 : {조치 : 'add_love은'POST_ID : post_id를} 성공 : 함수 (대응)})})}) (jQuery를) {경고 (+ 응답의 성공, 새로운 카운트는 ')};

$ .ajax ()는 많은 매개 변수를 사용하는 함수입니다. url은 현재 우리 파일 인 대상을 포함합니다 아약스 - url.php ". 유형이 " 게시 » a가 보낸 모든 요청처럼 형태. 데이터 매개변수는 " 키 - 값 우리가 서버로 보내려고합니다. 나중에 $ _POST [ 'action'] 및 $ _POST [ 'post_id']를 사용하여 읽을 수 있습니다.

응용 프로그램 처리

일반적으로 파일 " 관리자-ajax.php », 요청이 거기에 전송되기 때문입니다. 시스템 파일이므로 수정하지 않을 것입니다. WordPress에서는 action 매개 변수와 함께 대괄호를 사용하여 AJAX 요청을 전달할 수 있습니다. 모델은 다음과 같습니다.

당신이 당신의 행동을 지명했다면 add_love "라는 후크에 함수를 첨부해야합니다. wp_ajax_add_love 그리고 / 또는 wp_ajax_nopriv_add_love ". 행동 NoPriv ”로그 아웃 한 사용자에 대해 실행되고 로그인 된 사용자에 대해서만 실행됩니다. 우리의 경우에는 둘 다 사용하고 싶습니다. 빠른 테스트로 기본 반환 값을 설정합니다.

success 매개 변수는 AJAX 호출이 완료 될 때 실행되는 함수입니다. "잘하셨습니다!"라는 간단한 경고가 표시됩니다. 새 계정은 "우리의 답변이 끝에 추가되었습니다.

ADD_ACTION ( 'wp_ajax_add_love'ajax_test_add_love '); ADD_ACTION ( 'wp_ajax_nopriv_add_love'ajax_test_add_love '); ajax_test_add_love 함수 () {4 에코; () 다이; }

우리는 기능을 두 괄호에 모두 첨부했습니다. 에코 4를 누른 다음 " ) (다이 ". 이것은 WordPress에서 필요합니다. 그렇지 않으면 각 답변의 끝에 0가 제공됩니다. 지금 버튼을 클릭하면 다음을 볼 수 있습니다 :

실제 좋아요 수를 얻으려면 현재 번호를 검색하고 XNUMX 씩 증가한 다음 데이터베이스에 저장하고 새 번호를 표시하기 만하면됩니다.

ajax_test_add_love 함수 () {$ 사랑 = get_post_meta ($ _POST [ 'post_id를'] show_some_love 'TRUE); 사랑 = $ (빈 ($ 사랑))? 0 : $ 사랑; $ 사랑 ++; update_post_meta ($ _ POST [ 'post_id를', 'show_some_love'사랑 $); $ 사랑을 에코; () 다이; }

이제 버튼을 클릭하면 팝업 창이 "1". 페이지를 새로 고치면 새 번호가 표시됩니다. 버튼을 다시 클릭하면 2 ". 지금해야 할 일은 숫자가 UI에 직접 반영되는지 확인하는 것입니다.

응답을 사용하여 사용자 인터페이스를 변경하십시오.

이 부분은 쉬운 것 같습니다 (왜냐하면), 그러나 일반적으로 합치기가 가장 어렵습니다. 지금 우리가해야 할 일은 현재 숫자를 포함하는 요소를 찾고 응답으로 그 내용을 수정하는 것입니다.

(함수 ($) {$ (문서) CSTE 연구진 ( 'IMG의 - 좋아 버튼을'클릭 '기능 () {var에 =에서는 parseInt post_id를 ($ (이) .parents ('article.post:first '). . ATTR ( 'ID는') '); var에 $ 번호 = $ (이) .parent () (찾을 수 있습니다. (', '후') '대신 숫자') $ 아약스 ({URL :. ajaxTest.ajax_url을, 형식 : '포스트'데이터 : {조치 : 'add_love는'POST_ID : post_id를,}, 성공 : 기능 (응답) {$의 number.text (응답);}})})}) (jQuery를);

이전 JS 코드에 두 줄만 추가했습니다. 5 행에서 숫자를 포함하는 요소를 변수에 저장합니다. $ 번호. 14 줄에서이 요소의 텍스트를 수정하여 답을 표시합니다. 이것은 새로운 숫자입니다.

기본적으로이 새로운 기능이 사용자 지정 테마에서 작동하는 것을 볼 수 있어야합니다. 문제가 있으면 알려주십시오. 공유하고 싶은 다른 팁이 있습니까? 댓글 섹션에서 수행하십시오.