아약스와 워드프레스

Ajax에 대한 소개 기사에서 설명한 Ajax 기술은 페이지를 새로 고치지 않고도 웹 페이지 콘텐츠의 일부를 업데이트할 수 있게 해주므로 대중화되었습니다. 이는 향상된 사용자 경험을 제공합니다.

물론 WordPress 사이트도 예외는 아닙니다. 그러나 WordPress에서 Ajax를 사용하는 방법은 다른 웹 응용 프로그램에서 사용하는 것과 다릅니다.

admin-ajax란 무엇이며 어떻게 작동합니까?

WordPress는 자동 저장, 즉각적인 업데이트, 댓글 조정, 게시물 추가/삭제 등과 같은 자체 관리 기능을 위해 이미 Ajax를 구현했습니다. 즉, WordPress에서 제공하는 관련 기능만 활용하면 사용할 수 있습니다.

이를 위한 키 파일은 wp-admin 폴더 아래에 있는 admin-ajax.php 파일로, 클라이언트와 서버 간의 연결을 생성하는 데 사용됩니다.

이 파일 내부의 159번째 줄에서 일부 작업 후크가 모든 Ajax 요청을 등록하는 방법을 볼 수 있습니다.

 if ( ! empty( $_GET['action'] ) && in_array( $_GET['action'], $core_actions_get, true ) ) { add_action( 'wp_ajax_' . $_GET['action'], 'wp_ajax_' . str_replace( '-', '_', $_GET['action'] ), 1 ); } if ( ! empty( $_POST['action'] ) && in_array( $_POST['action'], $core_actions_post, true ) ) { add_action( 'wp_ajax_' . $_POST['action'], 'wp_ajax_' . str_replace( '-', '_', $_POST['action'] ), 1 ); }

wp_ajax_{$action}은 로그인한 사용자를 나타내고 wp_ajax_nopriv_{$_REQUEST['action']}는 사이트 방문자를 나타냅니다. 모든 사용자를 포함하는 요청을 생성하려면 두 후크를 모두 사용해야 합니다.

따라서 이러한 작업의 도움으로 사용자 정의 함수를 연결하고 데이터를 WordPress에 전달하여 Ajax 요청을 할 수 있습니다. 실제로 이것을 살펴보겠습니다.

워드프레스 아약스 예

Ajax 소개 기사에서 사용한 것과 동일한 예제를 사용하고 사용자가 기사 제목을 검색하고 제안된 결과를 즉석에서 볼 수 있는 양식을 작성합니다.

테마의 헤더 공간에 검색 양식에 대한 HTML 출력을 삽입합니다. Twenty Twenty-One 테마를 사용하므로 테마의 기본 폴더 아래에 있는 header.php 파일을 편집하고 <div id=”content” class=”site-content”> 줄 앞에 다음 줄을 삽입했습니다.

 <p><b>Search in articles:</b></p> <form> <input type="text" class="userInput"> </form> <p>Articles available: <span class="txtHint"></span></p>

이제 사용자가 사용할 수 있는 양식이 프런트 엔드에 표시되어야 합니다.

참고: 여기에서는 자식 테마를 만들지 않고 테마의 header.php 파일을 직접 편집합니다. 이것은 좋은 습관이 아니며 여러 가지 단점이 있습니다. 어린이 테마의 중요성에 대해 더 알고 싶다면 관련 기사를 읽어보세요. 이 예제의 목적을 위해 우리는 코드를 간단하고 주제에 맞게 유지했습니다. 따라서 프로덕션 웹 사이트에서 이 코드를 사용하지 않는 것이 좋습니다.

다음은 요청을 보낼 JavaScript 함수를 포함하는 것입니다. jQuery는 이미 WordPress와 함께 제공되고 사용할 준비가 되었기 때문에 대신 사용할 것입니다. 물론 WordPress 방식으로 스크립트를 포함해야 합니다.

스크립트를 대기열에 추가

테마의 function.php 파일을 편집하고 다음과 같이 스크립트를 대기열에 추가하여 WordPress에 JS 파일의 존재를 알릴 것입니다. 우리의 파일은 우리가 생성하여 테마의 메인 폴더 아래에 있는 새로운 "js" 폴더 안에 넣은 custom.js 가 될 것입니다.

 function ajax_search_script() { wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true ); $script_data_array = array( 'url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'search_titles_nonce' ), ); wp_localize_script( 'custom-script', 'ajax_object', $script_data_array ); wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'ajax_search_script' );

ajax_search_script() 함수에서 스크립트를 등록하고 현지화한 다음 내장된 wp_enqueue_script() 함수로 현지화된 데이터를 대기열에 넣었습니다. 그런 다음 우리는 wp_enqueue_scripts에 ajax_search_script() 함수를 연결했습니다. 이는 WordPress에서 스크립트를 대기열에 넣을 때 사용할 적절한 작업입니다.

wp_localize_script 사용은 여기에서 혼동될 수 있습니다. WordPress 기능으로서 원래 스크립트에 사용된 문자열을 번역하기 위해 설계되었기 때문입니다. 그러나 PHP에서 JavaScript로 일반 데이터를 전달하는 데에도 자주 사용됩니다. 우리의 경우 Ajax URL과 nonce 객체를 전달합니다.

Nonce 사용은 jQuery Ajax 요청이 웹사이트에서 오는 요청으로 검증될 수 있도록 하기 위해 필요합니다. WordPress의 nonce 사용에 익숙하지 않은 경우 관련 기사에서 자세히 읽을 수 있습니다.

ajax_object 는 wp_localize_script() 함수의 필수 $object_name 매개변수 값이며 나중에 jQuery 코드에서 사용될 것입니다.

엄청난! 이제 올바른 내용으로 함수를 채워봅시다.

자바스크립트

custom.js 파일 안에 jQuery를 포함했습니다.

 jQuery(function($) { $('.userInput').on('keyup', function() { var input = $(this).val(); if(input != '') { var data = { 'action': 'get_articles_titles', 'search_text': input, 'nonce': ajax_object.nonce } $.post(ajax_object.url, data, function(response) { $('#txtHint').html(response); }); } }); });

이번에는 원하는 데이터, action, search_text, nonce를 서버 측 스크립트에 전달하기 위해 jQuery와 JSON을 사용했습니다. 콜백 get_articles_titles() 함수는 백엔드에서 데이터를 처리하고 결과를 준비하며 응답을 다시 보내는 역할을 합니다.

또한 보시다시피 wp_localize_script의 wp_localize_script 를 두 개의 배열 값(nonce 및 url)과 함께 사용합니다.

후크

이제 인증된 Ajax 작업을 앞에서 언급한 필요한 후크와 바인딩해야 합니다. 로그인한 사용자와 로그인하지 않은 사용자를 모두 포함하려면 두 후크를 모두 사용해야 합니다. functions.php 파일에서 스크립트를 대기열에 추가하기 전에 추가한 코드 아래에 이 두 줄을 추가합니다.

 add_action('wp_ajax_get_articles_titles', 'get_articles_titles'); add_action('wp_ajax_nopriv_get_articles_titles', 'get_articles_titles');

이미 눈치채셨겠지만 후크 이름은 실제로 접두사 뒤에 작업 이름이 옵니다. get_articles_titles hooked 함수는 실제로 기사의 제목을 검색하는 곳입니다. 우리는 functions.php 내부에서도 이 functions.php 를 정의할 것입니다.

 function get_articles_titles() { check_ajax_referer('ajax_nonce', 'nonce'); $input = $_POST['search_text']; $args = array( 'posts_per_page' => -1, 'post_type' => 'post', ); $the_query = new WP_Query( $args ); $autocomplete = "<br>"; if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); $title = get_the_title( get_the_ID() ); if ( strpos( strtolower($title), strtolower($input) ) !== false ) { $autocomplete .= $title . "<br>" ; } } wp_reset_postdata(); } echo $autocomplete; wp_die(); }

check_ajax_referer는 Ajax 요청이 외부에서 처리되지 않았는지 확인하는 역할을 합니다.

여기서 필요한 매개변수는 ajax_search_script() 함수 내부의 'nonce' => wp_create_nonce( 'ajax_nonce' ) 와 관련된 액션과 nonce와 관련된 값입니다.

그리고 그게 다야! 우리는 아주 간단한 Ajax-PHP 예제를 만들었습니다. 이때 테스트 워드프레스 환경에서 코드를 시도해보면 다음과 같이 동작할 것이다.

여기서 서비스 1-5는 테스트 게시물의 제목입니다.

결론

이것은 Ajax의 이점을 활용하여 WordPress 웹사이트에서 응답성과 성능을 높이는 방법에 대한 기사였습니다. 이제 자신의 웹사이트에서 유사한 기술을 사용하고 사용자 경험을 개선할 준비가 되었기를 바랍니다!