AJAX를 사용하여 WordPress 플러그인을 반응형으로 만들기
게시 됨: 2020-06-02
최종 업데이트 - 2021년 7월 8일
AJAX는 최신 개발 방법론이며 개발자에게 제공하는 사용 용이성으로 인해 서서히 추진력을 얻고 있습니다. WordPress 플러그인에 AJAX를 통합하기만 하면 기본적으로 전체 웹 페이지를 지속적으로 다시 로드해야 하는 필요성이 줄어듭니다. 즉, AJAX는 WordPress 플러그인을 반응형으로 만들고 페이지의 나머지는 정적으로 유지하면서 특정 부분만 다시 로드하여 사용자가 새로운 정보를 얻을 수 있도록 합니다.
이렇게 하면 웹 페이지나 플러그인이 응답할 수 있을 뿐만 아니라 대기 시간이 절반으로 줄어듭니다. 사용자에게 더 나은 경험을 제공하기 위해 Ajax를 사용하는 여러 플러그인과 애플리케이션이 있습니다. 예를 들어 WooCommerce는 Ajax 기능을 사용하여 장바구니에 추가 동작을 개선합니다.
이점을 고려하여 AJAX를 통해 WordPress 플러그인을 반응형으로 만드는 방법을 알려 드리겠습니다.
플러그인 만들기
AJAX로 마술을 부리기 전에 고급 반응형 제품을 만드는 데 사용할 수 있는 기본 플러그인 기반이 있어야 합니다.
플러그인을 만드는 것은 한 줄짜리 콘텐츠가 포함된 파일을 만들기만 하면 되므로 어렵지 않습니다. 이를 위해 첫 번째 단계는 wp-content/plugins 파일로 이동하여 원하는 이름으로 새 폴더를 만드는 것입니다. 폴더를 열고 name_of_the_plugin.php라는 새 파일을 만듭니다. 이제 텍스트 편집기에서 파일을 보고 다음 정보를 작성합니다.
<?php
/*
플러그인 이름: Coolness Inducer
플러그인 URI: http://coolness-inducer.com
설명: >-
웹사이트를 더욱 멋지게 만드는 데 완벽한 플러그인입니다.
버전: 1.3
저자: 베이더 양
작성자 URI: http://msvader.com
라이센스: GPL2
*/
?>
이 작업을 수행하기 전에 WordPress 플러그인 설치에 ajaxloadpost 디렉터리를 만듭니다. 이 작업을 수행하면 플러그인을 만들고 활성화합니다. 그런 다음 ajaxloadpost에 다음 정보를 포함합니다.
define('AJAXLOADPOSTURL', WP_PLUGIN_URL.”/”.dirname( plugin_basename( __FILE__ ) ) );
함수 ajaxloadpost_enqueuescripts() {
wp_enqueue_script('ajaxloadpost', AJAXLOADPOSTURL.'/js/ajaxloadpost.js', array('jquery'));
wp_localize_script( 'ajaxloadpost', 'ajaxloadpostajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', ajaxloadpost_enqueuescripts);
그런 다음 WordPress를 플러그인의 URL로 연결하는 데 필요하므로 AJAXLOADPOSTURL 변수를 정의합니다. 이제 WordPress의 wp_enqueue_scripts에 ajaxloadpost_enqueuescripts를 추가하여 스크립트를 대기열에 넣어야 합니다.
AJAX는 원시 형식으로 사용할 수 없습니다. 항상 다른 프로그래밍 언어(예: jQuery 또는 JavaScript)와 함께 사용됩니다. 이 경우 JavaScript로 작업하므로 기본적인 이해가 필요합니다.
계속해서 \wp-content\plugins\ajaxloadpost\js\folder에 있는 ajaxloadpost.js에 JavaScript를 추가하세요. 이 작업에 따라 JS 폴더를 만들고 그 안에 ajaxloadpost.js를 배치합니다.
이제 WordPress wp_localize_script를 사용하여 필요한 JS 변수를 추가합니다. 이 작업은 디렉토리에 구조를 제공하고 스크립트를 대기열에 넣습니다.
AJAX 핸들러 작성
AJAX 핸들러를 작성하려면 다음 코드가 필요합니다.
함수 ajaxloadpost_ajaxhandler() {
if ( !wp_verify_nonce( $_POST['nonce'], “ajaxloadpost_nonce”)) {
exit("잘못된 논스");
}
$ 결과 = ";
$content_post = get_post($_POST['postid']);
$결과 = $content_post->post_content;
다이($ 결과);
}
add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
이 작업을 완료하면 두 가지 결과가 나타납니다. 첫째, 사용자가 필요로 하는 게시물의 ID를 생성하고 두 번째는 nonce를 생성합니다. 그러나 그것은 요점에서 벗어났습니다! AJAX 핸들러의 코드가 준비되면 WordPress 디렉토리에 AJAX 핸들러를 등록하는 다음 단계로 이동해야 합니다. 이렇게 하면 WordPress 플러그인이 AJAX 호출에 응답하게 됩니다. 다음 코드를 통해 이를 달성할 수 있습니다.
add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
JavaScript 기초 및 AJAX
AJAX 호출과 AJAX 핸들러가 있으면 두 점을 연결하는 JS 함수를 만들어야 합니다. 다음 JavaScript는 ajaxloadpost.js에 넣을 이 작업을 수행하는 데 도움이 됩니다.
함수 ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
유형: '포스트',
URL: ajaxloadpostajax.ajaxurl,
데이터: {
작업: 'ajaxloadpost_ajaxhandler',
postid: postid,
논스: 논스
},
성공: 함수(데이터, 텍스트 상태, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html(");
jQuery(loadpostresult).append(데이터);
},
오류: 함수(MLHttpRequest, textStatus, errorThrown) {
경고(오류 발생);
}
});
}
위에서 언급한 단계와 마찬가지로 이 작업도 nonce와 post ID의 두 가지 결과를 생성합니다.
다음 단계는 jQuery도 능숙해야 합니다. 따라서 기술이 약간 소박하다면 이 기사가 도움이 될 것입니다!
계속해서 jQuery.ajax 함수를 사용하여 적절한 서버에 대한 AJAX 호출을 수행합니다. 위의 코드에서 URL은 admin-ajax.php URL로 스크립트를 대기열에 넣을 때 등록한 JavaScript 변수에서 찾을 수 있습니다. 또한 워드프레스에 등록된 액션 핸들러의 이름으로 이 액션을 지정하고 nonce와 포스트 ID도 함께 게시합니다.
모든 것이 올바르게 진행되면 ID #loadpostresult의 <div>를 업데이트하고 가져온 콘텐츠를 AJAX 처리기로 바꿀 수 있습니다.
코드에 얼굴을 대다
이제 적절한 게시물의 제목을 표시하는 코드를 만들고 AJAX 호출을 통해 사용자가 원하는 정보를 불러올 차례입니다. 다음 코드는 다음과 같습니다.
함수 ajaxloadpost_show_latest_posts($number = '5'){
$ 결과 = ";
$the_query = 새로운 WP_Query( 'posts_per_page='.$number );
동안 ( $the_query->have_posts() ) :
$the_query->the_post();
$nonce = wp_create_nonce("ajaxloadpost_nonce");
$arguments = get_the_ID().”,'”.$nonce.”'”;
$link = ' <a onclick=”ajaxloadpost_loadpost('.$arguments.');”>'. get_the_title().'</a>';
$result.= '<li>' . $링크 . '</li>';
그 동안;
wp_reset_postdata();
$result.= '<div id="loadpostresult"></div>';
$ 결과 반환;
}
기능 ajaxloadpost_shortcode_function( $atts ){
반환 ajaxloadpost_show_latest_posts();
}
add_shortcode( 'AJAXLOADPOST', 'ajaxloadpost_shortcode_function' );
이 기사가 WordPress 플러그인을 반응형으로 만드는 데 도움이 되었기를 바랍니다. 문의사항이 있으시면 댓글을 남겨주세요.
추가 읽기
- 반응형 디자인은 전환율을 높이는 데 도움이 됩니다.
- 최고의 반응형 WooCommerce 테마