AJAX를 사용하여 WordPress 플러그인을 반응형으로 만들기
게시 됨: 2020-08-17WordPress는 웹사이트 구축을 위한 훌륭한 플랫폼입니다. 그러나 콘텐츠 관리자 도구에는 단점이 있습니다. WordPress에 웹 사이트를 구축한 경우 느린 로드 속도 문제에 직면하는 것은 드문 일이 아닙니다. 데이터베이스 및 코드베이스의 유입과 함께 추가된 많은 수의 플러그인으로 인해 실제로 드문 일이 아닙니다. 그러나 솔루션에 집중하는 것이 중요합니다. 느린 속도로 인해 청중이 초조해하고 떠나고 잠재적인 비즈니스를 잃게 되는 것을 원하지 않습니다!
AJAX라고 하는 간단한 기능을 플러그인에 통합하여 WordPress 웹사이트의 속도를 최적화할 수 있다고 말하면 어떨까요? AJAX라는 용어는 Asynchronous JavaScript and XML의 줄임말입니다. AJAX는 웹사이트의 속도를 향상시키는 데 도움이 됩니다. 페이지의 특정 부분만 로드하고 나머지 페이지는 정적으로 유지하여 로드 시간을 개선합니다. 여러 플러그인과 앱이 이미 이 기능을 사용하여 오늘날에도 웹페이지의 속도를 향상시키고 있습니다.
짧은 시간에 AJAX는 디지털 마케팅 세계에서 탁월한 명성을 얻었으며 대다수의 웹사이트 소유자가 사용하고 있습니다. 운 좋게도 WordPress는 AJAX에 대한 탁월한 지원을 제공하므로 AJAX에 통합된 플러그인을 더 쉽게 작성할 수 있습니다. WordPress 및 우리 기사의 지원으로 AJAX를 즉시 플러그인에 통합할 수 있습니다.
다음은 프로세스를 안내하는 단계별 가이드입니다.
1단계 – 플러그인 만들기
첫 번째 단계는 더 반응이 빠르고 웹 페이지의 로딩 시간을 줄이는 고급 제품을 개발하는 데 사용할 수 있는 간단한 플러그인을 만드는 것입니다. 좋은 소식은 한 줄짜리 데이터가 포함된 파일을 만들기만 하면 되므로 플러그인을 만드는 데 어려움이 없을 것입니다.
"wp-content/plugins" 파일을 검색하여 이 작업을 수행하고 원하는 이름의 폴더를 생성할 수 있습니다. 이 작업을 완료했으면 이제 폴더를 열고 이름이 "name_of_the_plugin.php"인 파일을 만들어야 합니다. 텍스트 편집기에서 이 파일을 연 후 텍스트 편집기에서 다음 코드를 입력합니다.
<?php
/*
Plugin Name: Your choice
Plugin URI: http://yout-choice.com
Description: This loads post via ajax
Author: Your name
Author URI: http://yourname.com
Version: 1
*/
2단계 – JavaScript 라이브러리 추가
"ajaxloadpost" 디렉토리를 생성하여 이 단계를 시작합니다. 어떻게 합니까? WordPress 플러그인과 함께 설치할 수 있으므로 매우 간단합니다. 이 단계가 완료되면 이제 코딩한 플러그인을 만들고 실행할 수 있습니다. 그런 다음 아래 코드를 ajaxloadpost에 추가해야 합니다.
define('AJAXLOADPOSTURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
function 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);
생성된 플러그인의 URL을 통해 WordPress를 지시해야 합니다. 이것이 AJAXLOADPOSTURL이라는 이름으로 변수를 정의해야 하는 이유입니다.
AJAX는 항상 프로그래밍 언어의 조합과 함께 사용되며 나머지 기사에서는 JavaScript로 작업할 것입니다. \wp-content\plugins\ajaxloadpost\js\folder에서 ajaxloadpost.js를 찾아 JavaScript를 추가합니다. 이제 스크립트에 JavaScript 변수를 추가할 수 있습니다.
3단계 – AJAX 핸들러 통합
위의 모든 것이 정렬되면 마침내 AJAX 핸들러를 플러그인에 통합할 수 있습니다. 다음은 AJAX 핸들러에 대한 코드입니다.
function ajaxloadpost_ajaxhandler() {
if ( !wp_verify_nonce( $_POST['nonce'], "ajaxloadpost_nonce")) {
exit("Wrong nonce");
}
$results = '';
$content_post = get_post($_POST['postid']);
$results = $content_post->post_content;
die($results);
}
위의 코드는 기본적으로 두 가지 작업을 수행합니다. 먼저 사용자가 요구하는 게시물에 대한 ID를 개발합니다. 두 번째 작업은 "nonce"를 만드는 것입니다. 두 번째 요소는 당분간 걱정하지 않으셔도 됩니다(글 말미에 자세히 설명되어 있음).
대신 WordPress 디렉토리에 AJAX 핸들러를 등록하는 두 번째 단계로 이동해야 합니다. 이렇게 하면 AJAX 함수가 요청되면 호출될 수 있습니다. 이 작업은 아래에 언급된 코드를 통해 수행할 수 있습니다.
add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
JavaScript에 대한 배경 지식이 있다는 것은 큰 장점입니다. 이 프로그래밍 언어에 익숙하지 않은 경우 전체 프로세스를 안내하는 전문가의 도움을 받을 수 있습니다. 웹 튜터나 여기에서 기사를 읽어 JavaScript 기술을 연마할 수도 있습니다.
4단계 – AJAX용 JavaScript 사용
다음으로 필요한 것은 AJAX가 AJAX 핸들러를 통해 반환된 데이터를 호출하고 업데이트할 수 있도록 하는 함수를 작성하는 것입니다. 함수는 일반적으로 ajacloadpost.js입니다. 다음 코드를 사용하여 위에서 설명한 작업을 결정할 수 있습니다.
function ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
type: 'POST',
url: ajaxloadpostajax.ajaxurl,
data: {
action: 'ajaxloadpost_ajaxhandler',
postid: postid,
nonce: nonce
},
success: function(data, textStatus, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html('');
jQuery(loadpostresult).append(data);
},
error: function(MLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
위의 함수는 두 개의 입력을 받습니다. 그 중 하나는 게시물의 id이고 두 번째는 nonce입니다. jQuery.ajax 함수를 사용하여 서버를 호출할 수 있습니다. 성공하면 AJAX 핸들러를 통해 반환된 데이터로 id #loadpostresult의 <div>를 업데이트합니다. 코드의 마지막 비트는 오류가 발생한 경우의 조건입니다. 오류가 발생하면 시스템에 팝업이 표시됩니다.
5단계 – 목록 표시
모든 기능이 정렬되면 게시물 제목을 표시하는 마지막 단계로 이동할 수 있습니다. 각 클릭은 다른 게시물 제목을 향할 수 있으며 귀하의 코드는 호출된 코드를 가져올 수 있어야 합니다. 다음 코드는 이를 달성하는 데 도움이 될 수 있습니다.
function ajaxloadpost_show_latest_posts($number = '5'){
$results ='';
$the_query = new WP_Query( 'posts_per_page='.$number );
while ( $the_query->have_posts() ) :
$the_query->the_post();
$nonce = wp_create_nonce("ajaxloadpost_nonce");
$arguments = get_the_ID().",'".$nonce."'";
$link = ' <a>'. get_the_title().'</a>';
$result.= '<li>' . $link . '</li>';
endwhile;
wp_reset_postdata();
$result.= '<div></div>';
return $result;
}
function ajaxloadpost_shortcode_function( $atts ){
return ajaxloadpost_show_latest_posts();
}
add_shortcode( 'AJAXLOADPOST', 'ajaxloadpost_shortcode_function' );
"논스"란 무엇입니까?
nonce는 요청이 진정한 소스에서 오는지 여부를 확인하는 데 사용됩니다. 간단한 WordPress 기능인 "wp_create_nonce"를 사용하여 nonce를 생성할 수 있습니다. "wp_verify_nonce" 함수를 사용하여 AJAX 핸들러를 통해 추가로 확인할 수 있습니다. WordPress에서 민감한 작업을 수행하는 경우 이 기능을 사용하는 것이 매우 중요합니다.
결론
AJAX를 플러그인과 통합하면 페이지의 응답성을 시각적으로 개선하는 데 도움이 될 수 있습니다. JavaScript가 익숙하지 않다면 코딩하기 쉬운 프로그래밍 언어를 선택하거나 플러그인 코딩을 도와줄 수 있는 전문가를 찾을 수 있습니다. AJAX를 플러그인에 통합하면 실망하지 않을 것입니다!