WordPress에서 Ajax를 사용하는 방법
게시 됨: 2023-02-12귀하의 웹 사이트에 참여하고 활동적인 고객 기반이 있는 경우 그들에게 진정으로 상호 작용하고 풍부한 웹 경험을 제공할 수 있는 방법이 궁금할 것입니다. 실시간 상호 작용을 제공하면 청중에게 큰 도움이 될 수 있습니다.
다행스럽게도 Ajax(Asynchronous JavaScript and XML)는 웹 사이트에 대화형 기능을 추가하는 접근하기 쉬운 방법입니다. WordPress의 경우 Ajax 기반 플러그인을 사용하여 프로세스를 단순화할 수도 있습니다.
이 기사에서는 Ajax와 작동 방식을 소개합니다. 또한 WordPress에서 Ajax를 시작하는 방법도 안내합니다. 바로 뛰어들자!
Ajax란 무엇이며 어떻게 작동합니까?
Ajax는 HTML, CSS, JavaScript 등과 같은 다양한 프로그래밍 언어를 함께 제공합니다. 실제로는 웹 브라우저에서 요청을 받아 서버로 보내고 그 결과를 다시 브라우저로 전송하기 위해 배후에서 작동합니다.
웹 사용자는 Ajax가 실행되고 있다는 사실을 모를 것입니다. 고도의 대화형 경험을 얻을 수 있습니다. 예를 들어 자신의 사이트에서 Ajax를 사용하여 로그인한 사용자의 게시물에 대한 좋아요를 수락하고 실시간 집계를 표시할 수 있습니다.
Ajax가 유용한 이유
Ajax를 사용하면 사용자는 특정 변경 사항을 확인하기 위해 페이지를 다시 로드할 필요가 없습니다. 이는 귀하의 사이트가 빠르게 유지되고 보다 원활한 사용자 경험을 제공한다는 것을 의미합니다. Ajax는 효율적이기 때문에 필요한 데이터만 주고받으며 대역폭을 최대화하고 대량의 데이터 전송을 피할 수 있습니다.
웹 사용자로서 우리는 항상 Ajax의 이점을 누리고 있습니다. 한 가지 예는 Google의 자동 완성 검색 기능입니다.
익숙한 다른 예로는 Facebook 댓글과 Instagram 좋아요가 있습니다. Ajax는 웹 페이지와 상호 작용하고 정보를 즉시 받을 수 있는 곳이라면 어디에서나 작업할 수 있습니다.
WordPress에서 Ajax 시작하기
WordPress와 관련하여 Ajax가 유용한 몇 가지 방법이 있습니다. 먼저 Ajax URL을 살펴보고 WordPress 기능 후크와 함께 사용하는 방법을 살펴보겠습니다.
WordPress의 Ajax URL
WordPress는 관리자 대시보드에서 기본적으로 Ajax를 사용하므로 Ajax 기능을 더 추가하는 것은 어렵지 않습니다. 그러나 사이트의 프런트 엔드에서 Ajax를 사용하려면 Ajax URL이 작동하는 방식을 이해해야 합니다.
WordPress에서 admin-ajax.php 파일에는 URL이 있습니다. 이는 처리를 위해 데이터를 전송하는 데 필요한 정보를 제공하며 프런트 엔드 Ajax 개발에 필수적입니다. WordPress는 wp_localize_script() 호출을 사용하여 Ajax URL을 사용하여 JavaScript 및 PHP 함수를 연결합니다. PHP는 일부 도움 없이 이를 직접 미러링할 수 없기 때문입니다.
WordPress에서 Ajax 액션 후크를 사용하는 방법
WordPress는 플러그인 및 테마가 WordPress Core와 상호 작용하는 방법으로 프로그래밍에 후크를 사용합니다. 후크는 '액션'과 '필터'의 두 가지 종류가 있습니다. Ajax를 사용하면 작업 후크를 사용하여 기능을 실행하게 됩니다.
작업을 사용하면 WordPress에 데이터를 추가하거나 작동 방식을 변경할 수 있습니다. Ajax에서는 wp_ajax_(action) 작업을 사용합니다. 그런 다음 Ajax 호출 중에 실행되도록 사용자 지정 함수를 여기에 연결할 수 있습니다.
예를 들어 이 WordPress 샘플 코드는 Ajax 호출과 JavaScript 개체를 동일한 파일에서 결합하여 작업을 실행하는 방법을 보여줍니다.
<?php
add_action( 'wp_ajax_my_action', 'my_action' );
함수 my_action() {
글로벌 $wpdb; // 이것은 데이터베이스에 액세스하는 방법입니다.
$whatever = intval( $_POST['무엇이든'] );
$무엇이든 += 10;
에코 $whatever;
wp_die(); // 이것은 즉시 종료하고 적절한 응답을 반환하는 데 필요합니다.
}
Ajax 작업에 대해 별도의 JavaScript 파일을 만들 수도 있습니다. 호출이 손실되지 않도록 Ajax URL을 사용해야 합니다.
예제 플러그인으로 작업하여 Ajax를 사용하는 방법(3단계)
Ajax를 실험하고 싶다면 가장 좋은 방법은 Ajax로 플러그인을 구축하는 것입니다. 다행스럽게도 시작할 수 있는 예제 코드나 베어본 플러그인이 많이 있습니다. 이 예에서는 다운로드 가능한 WordPress Plugin Boilerplate 샘플 코드를 사용할 것입니다.
1단계: 적절한 파일 구조 만들기
먼저 플러그인의 이름을 지정하고 이에 적합한 파일 구조를 만들어야 합니다. 이름은 고유해야 하며 WordPress Plugin Directory의 다른 도구와 충돌하지 않아야 합니다. 사용자가 플러그인을 업로드하면 wp-content/plugins/ 디렉토리로 이동하기 때문입니다.
이름을 결정했으면 자신의 wp-content/plugins/ 디렉토리에 다음 세 개 이상의 파일을 만들어야 합니다.
- 플러그인 이름.php
- 플러그인 이름.js
- 플러그인 이름.css
새 플러그인의 폴더에 .php 파일을 넣고 JavaScript 및 CSS 파일이 상주할 별도의 하위 폴더를 만들고 싶을 것입니다. 플러그인이 작동하는 데 필요한 모든 파일은 동일한 마스터 폴더에 있어야 합니다.
다음 단계에서는 사용 중인 샘플 코드가 미리 생성된 파일 구조와 함께 제공되는 것을 볼 수 있습니다. 그러나 처음부터 시작하는 방법과 파일을 특정 방식으로 구성해야 하는 이유를 이해하는 것이 중요하다고 생각합니다.
2단계: 시작할 샘플 코드 선택
샘플 코드 파일을 사용하는 것은 첫 번째 플러그인에서 Ajax를 시도할 때 시작하기에 좋은 장소입니다. 그러나 항상 샘플 코드를 다시 확인하여 안전하고 오류가 없는지 확인해야 합니다.
앞에서 언급했듯이 예제에서는 WordPress Plugin Boilerplate를 사용할 것입니다. 이 샘플 코드는 플러그인을 완성하는 데 필요한 파일과 함께 제공됩니다.
이 샘플 플러그인은 WordPress의 코딩 및 문서 표준도 준수합니다. 상용구 웹사이트에서 플러그인의 .zip 파일을 다운로드하여 시작할 수 있습니다.
3단계: 작업을 코드에 연결
우리가 사용하고 있는 플러그인 샘플 코드는 OOP(Object-Oriented Programming)로 빌드됩니다. 이는 프로그래머가 코드를 구성하고 쉽게 공유하고 재사용할 수 있는 개발 패턴을 만드는 데 도움이 됩니다.
또한 코드는 /includes/ 디렉토리의 활성화 및 비활성화 파일을 포함하여 플러그인 개발에 필요한 모든 파일과 함께 패키지로 제공됩니다. 또한 필요에 따라 공개 및 관리자용 파일을 쉽게 찾을 수 있습니다.
plugin-name.php 파일의 시작 부분을 확인하여 샘플 플러그인을 살펴보겠습니다.
<?php
/**
* 플러그인 부트스트랩 파일
*
* 플러그인에서 플러그인 정보를 생성하기 위해 WordPress에서 이 파일을 읽습니다.
* 관리 영역. 이 파일에는 플러그인에서 사용하는 모든 종속성도 포함되어 있습니다.
* 활성화 및 비활성화 기능을 등록하고 기능을 정의합니다.
* 활성화 및 비활성화 기능을 등록하고 기능을 정의합니다.
* 플러그인을 시작합니다.
*
* @링크 http://example.com
* @1.0.0부터
* @package 플러그인_이름
*
* @워드프레스 플러그인
* 플러그인 이름: 워드프레스 플러그인 상용구
* 플러그인 URI: http://example.com/plugin-name-uri/
* 설명: 플러그인이 하는 일에 대한 간단한 설명입니다. WordPress 관리 영역에 표시됩니다.
* 버전: 1.0.0
* 저자: 귀하의 이름 또는 귀하의 회사
* 저자 URI: http://example.com/
* 라이선스: GPL-2.0+
* 라이선스 URI: http://www.gnu.org/licenses/gpl-2.0.txt
* 텍스트 도메인: 플러그인 이름
* 도메인 경로: /언어
*/
코드의 이 부분에 포함된 모든 정보는 WordPress에 플러그인을 등록하는 데 중요합니다. 이것이 플러그인 디렉토리가 플러그인에 대해 표시할 내용을 아는 방법입니다.
이제 모든 점을 연결하기 위해 다음을 포함하여 몇 가지 작업을 수행해야 합니다.
- 스크립트에서 Ajax URL을 사용할 수 있는지 확인하십시오. 이를 위해 wp_localize_script()를 사용할 수 있습니다.
- plugin- name.php 파일에서 Plugin-Name{} 클래스로 플러그인 이름 클래스를 생성합니다. 여기에서 작업 후크를 정의합니다.
- plugin-name.js 파일에서 해당 JavaScript 함수를 작성하십시오.
Ajax 접근 방식의 중요한 요소 중 하나는 특히 프런트 엔드 상호 작용을 생성할 때 누가 각 기능을 사용할 수 있는지 정의하는 것입니다. WordPress의 일부 샘플 코드를 사용하여 프런트 엔드 작업을 연결합니다.
if ( is_admin() ) {
add_action( 'wp_ajax_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_nopriv_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_my_backend_action', 'my_backend_action' );
// 여기에 다른 백엔드 작업 후크를 추가합니다.
} 또 다른 {
// 여기에 Ajax가 아닌 프런트엔드 작업 후크를 추가합니다.
}
이 예에서 몇 가지 사항에 유의해 보겠습니다. 첫째, 이러한 작업은 계정에 로그인했는지 여부에 관계없이 사이트의 모든 사람이 사용할 수 있습니다. 이는 'wp_ajax_nonpriv_()' 호출로 표시됩니다. 둘째, 프런트 엔드 작업 중에 연결되는 백엔드 관리 작업도 있음을 알 수 있습니다.
이 일련의 작업에서 발생하는 프로세스를 이해하려면 my_frontend_action이 PHP 함수 my_frontend_action_callback()을 트리거한다는 사실을 아는 것도 중요합니다.
4단계: 플러그인 테스트 및 디버그
필요한 모든 작업 후크와 해당 기능을 설정한 후에는 플러그인을 테스트하고 잠재적으로 디버깅하고 싶을 것입니다(문제가 있는 경우). 웹 호스트는 호스팅 패키지의 일부로 디버깅 도구를 제공할 수 있습니다.
여기 WP Engine에서는 문제 지점을 찾는 데 도움이 되는 WP Engine 오류 로그를 제공합니다.
당사의 오류 로그는 사이트 코드의 모든 오류와 오류가 당사 서버 또는 사이트의 다른 부분과 상호 작용하는 위치를 색상으로 구분된 안내를 제공합니다. 따라서 Ajax로 작업하든 완전히 다른 작업으로 작업하든 관계없이 문제 해결이 훨씬 쉬워집니다.
다른 WP 엔진 리소스 및 도구 탐색
이제 Ajax로 놀라운 WordPress 플러그인을 만드는 중이므로 필요한 다른 도구를 평가하고 싶을 수 있습니다. WP Engine은 완전한 디지털 경험 플랫폼(DXP)을 제공하며 WordPress용 새 플러그인을 만드는 데 도움을 드립니다.
버그 없는 플러그인을 실행할 수 있도록 WP 엔진 오류 로그에 관심이 있거나 견고하고 안전한 WordPress 호스팅이 필요한 경우 사용할 수 있는 다양한 계획과 리소스를 제공합니다!