이제 포트폴리오 부분이 거의 정리 되었습니다.
이번 주제는 ajax에 관련된 내용으로 비동기로 서버에서 다음 페이지의 내용을 가져와 화면의 원하는 영역에 추가 하는 작업을 같이 진행하겠습니다.
ajax를 사용하는 이유
- 비동기로 서버와 통신
- 원하는 영역만 로딩이 가능
functions.php
// custom
wp_enqueue_script( 'zeein-custom.js', get_stylesheet_directory_uri() . '/assets/js/custom.js', array(), 'v1.0', true );
wp_localize_script( 'zeein-custom.js', 'frontend_ajax_object',
array(
'ajaxurl' => admin_url( 'admin-ajax.php' )
)
);
63-66: fronfend_ajax_object.ajaxurl 에 admin-ajax.php 의 url을 저장하고 zeein-custom.js 핸들러 에서 사용할수 있도록 합니다.
// load_portfolio_by_ajax
add_action( 'wp_ajax_nopriv_load_portfolio_by_ajax', 'load_portfolio_by_ajax' );
add_action( 'wp_ajax_load_portfolio_by_ajax', 'load_portfolio_by_ajax' );
if ( !function_exists('load_portfolio_by_ajax') ) {
function load_portfolio_by_ajax() {
check_ajax_referer( 'load_more_portfolio', 'security' );
$args = array(
'post_type' => 'portfolio',
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' => 6,
'post_status' => 'publish',
'paged' => $_POST['paged'],
);
$posts = new WP_Query( $args );
$GLOBALS['wp_query'] = $posts;
if( ! $posts->have_posts() ) {
get_template_part( 'template-parts/content', 'none' );
} else {
while ( $posts->have_posts() ) {
$posts->the_post();
get_template_part( 'template-parts/content', 'portfolio' );
}
}
die();
}
}
79: wp_ajax_(action) : 로그인한 사용자에게 실행되는 ajax
80: wp_ajax_nopriv_(action) : 로그인하지 않은 사용자에게 사용하는 ajax
85: ajax 요청을 검증하며 다른 사이트나 시스템에서 전달 된 요청을 처리하지 못하도록 하는 역할을 합니다.
보통 로그인과 상관없이 노출하기 때문에 (action)명은 동일한 action명을 사용합니다.
나머지 부분은 index.php 의 내용과 거의 유사한 형태입니다.
custom.php
// load more
var defaultPageNum = 2;
$('#btn-load-more').on('click', function(e){
var $content = $('.ajax-portfolio');
var $loader = $('#btn-load-more');
var security = $loader.data('security');
var sendData = {
action: 'load_portfolio_by_ajax',
query_vars: frontend_ajax_object.query_vars,
paged: defaultPageNum,
security : security,
}
$.ajax({
type: 'post',
url: frontend_ajax_object.ajaxurl,
data: sendData,
beforeSend: function() {
$loader.html('LOADING PORTFOLIO..');
},
success: function(data) {
var $data = $(data);
if ($data.length) {
var $newElements = $data.css({opacity: 0});
$grid.append($newElements).imagesLoaded(function() {
$grid.masonry('appended', $data, true);
});
$newElements.animate({opacity: 1});
initMagnific();
$loader.html('VIEW MORE PORTFOLIO');
} else {
$loader.html('NO MORE PORTFOLIO');
}
defaultPageNum++;
},
error : function (jqXHR, textStatus, errorThrown) {
$loader.html($.parseJSON(jqXHR.responseText) + ' :: ' + textStatus + ' :: ' + errorThrown);
console.log(jqXHR);
}
});
return false;
});
80: 기본적으로 한페이지(posts_per_page => 6)의 내용이 화면에 출력되고 있으므로 이후 2번째 페이지 부터 시작해야 하기 때문에 시작 숫자를 2로 시작을 하고 ajax 처리 이후에 111 라인에서 처럼 다음 페이지를 로딩하도록 +1씩 증가 시킵니다.
81: 아이디 #btn-load-more 를 클릭할때 진행하도록 선언합니다.
91: 서버와 비동기식 통신을 시작하는데
95: 시작하기 전에 $loader의 html 을 ‘LOADING PORTFOLIO..’로 변경하고
98: 통신이 성공하고
100: 화면에 노출할 데이터가 있으면 추가해 주고 masonry와 popup 관련 magnific을 초기화 해주고
108: 데이터가 없으면 $loder의 html 을 ‘NO MORE PORTFOLIO”로 변경
111: 다음에 읽을 페이지의 포인트를 +1 해서 저장
113: 통신에 실패할 경우 에러 화면을 출력