WordPress에서 추가 게시물 로드 Ajax 버튼
나는 오래된 질문들을 훑어보고 이것을 할 수 있는 많은 다양한 방법들을 시도했다.내가 가장 가까이 있는 건 여기 있는 거야커스텀 WP_Query Ajax에 페이지네이션 구현 방법
다 해봤는데 안 되네.페이지에는 전혀 변화가 없습니다.[ ]하면 [Load More]에서 가 [.션을 수행합니다.<a id="more_posts">Load More</a>로로 합니다.<a id="more_posts" disables="disabled">Load More</a>★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★게시물을 추가하는 것이 아니라 간단한 것을 놓치고 있는 것 같지만 아무리 생각해도 해결할 수 없습니다.
템플릿 파일의 코드는 다음과 같습니다.
<div id="ajax-posts" class="row">
<?php
$postsPerPage = 3;
$args = [
'post_type' => 'post',
'posts_per_page' => $postsPerPage,
'cat' => 1
];
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post(); ?>
<div class="small-12 large-4 columns">
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
</div>
<?php
endwhile;
echo '<a id="more_posts">Load More</a>';
wp_reset_postdata();
?>
</div>
함수 파일의 코드는 다음과 같습니다.
function more_post_ajax(){
$offset = $_POST["offset"];
$ppp = $_POST["ppp"];
header("Content-Type: text/html");
$args = [
'suppress_filters' => true,
'post_type' => 'post',
'posts_per_page' => $ppp,
'cat' => 1,
'offset' => $offset,
];
$loop = new WP_Query($args);
while ($loop->have_posts()) { $loop->the_post();
the_content();
}
exit;
}
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
바닥글의 jQuery는 다음과 같습니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready( function($) {
var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";
// What page we are on.
var page = 5;
// Post per page
var ppp = 3;
$("#more_posts").on("click", function() {
// When btn is pressed.
$("#more_posts").attr("disabled",true);
// Disable the button, temp.
$.post(ajaxUrl, {
action: "more_post_ajax",
offset: (page * ppp) + 1,
ppp: ppp
})
.success(function(posts) {
page++;
$("#ajax-posts").append(posts);
// CHANGE THIS!
$("#more_posts").attr("disabled", false);
});
});
});
</script>
제가 놓쳤거나 도울 수 있는 사람이 있나요?
업데이트 24.04.2016.
https://madebydenis.com/ajax-load-posts-on-wordpress/ 페이지에 Twintheen 테마에 대한 구현에 관한 튜토리얼을 작성했으므로 부담없이 확인하시기 바랍니다.
편집
제가 이걸 Twenty 15일에 테스트해 봤는데, 효과가 있어요, 그러니 잘 될 거예요.
index.php(메인 페이지에 투고를 표시하고 싶지만 페이지 템플릿에 넣어도 동작한다고 가정)에 다음과 같이 입력합니다.
<div id="ajax-posts" class="row">
<?php
$postsPerPage = 3;
$args = array(
'post_type' => 'post',
'posts_per_page' => $postsPerPage,
'cat' => 8
);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();
?>
<div class="small-12 large-4 columns">
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
<div id="more_posts">Load More</div>
카테고리 8에서 3개의 투고가 출력됩니다(그 카테고리에 투고가 있었기 때문에, 사용하고 싶은 것을 사용해 주세요).자신이 속한 카테고리를 조회할 수도 있습니다.
$cat_id = get_query_var('cat');
그러면 쿼리에 사용할 카테고리 ID가 제공됩니다.이것을 로더에 넣고(더 많은 div를 로드하고) jQuery로 풀링할 수 있습니다.
<div id="more_posts" data-category="<?php echo $cat_id; ?>">Load More</div>
그리고 카테고리를 끌어당겨서
var cat = $('#more_posts').data('category');
하지만 지금은 빼도 돼
다음 기능입니다.php 추가했습니다.
wp_localize_script( 'twentyfifteen-script', 'ajax_posts', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'noposts' => __('No older posts found', 'twentyfifteen'),
));
★★★★★의wp_localize_scriptWordPress admin-ajax.php - ajax ajax Ajax 。
기능 종료 시.php 파일 당신의 글을 로드하는 함수를 추가했습니다.
function more_post_ajax(){
$ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
$page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
header("Content-Type: text/html");
$args = array(
'suppress_filters' => true,
'post_type' => 'post',
'posts_per_page' => $ppp,
'cat' => 8,
'paged' => $page,
);
$loop = new WP_Query($args);
$out = '';
if ($loop -> have_posts()) : while ($loop -> have_posts()) : $loop -> the_post();
$out .= '<div class="small-12 large-4 columns">
<h1>'.get_the_title().'</h1>
<p>'.get_the_content().'</p>
</div>';
endwhile;
endif;
wp_reset_postdata();
die($out);
}
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
여기에 페이지 키를 배열에 추가했습니다.이것에 의해, 투고를 로드했을 때에, 루프가 그 페이지를 추적할 수 있습니다.
로더에 카테고리를 추가한 경우 다음을 추가합니다.
$cat = (isset($_POST['cat'])) ? $_POST['cat'] : '';
8이 8을$cat은 에 $_POST어레이를 사용하면 Ajax에서 사용할 수 있습니다.
마지막은 아약스 그 자체입니다.functions.js에 삽입한$(document).ready();환경
var ppp = 3; // Post per page
var cat = 8;
var pageNumber = 1;
function load_posts(){
pageNumber++;
var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax';
$.ajax({
type: "POST",
dataType: "html",
url: ajax_posts.ajaxurl,
data: str,
success: function(data){
var $data = $(data);
if($data.length){
$("#ajax-posts").append($data);
$("#more_posts").attr("disabled",false);
} else{
$("#more_posts").attr("disabled",true);
}
},
error : function(jqXHR, textStatus, errorThrown) {
$loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
}
});
return false;
}
$("#more_posts").on("click",function(){ // When btn is pressed.
$("#more_posts").attr("disabled",true); // Disable the button, temp.
load_posts();
});
저장 후 테스트하여 동작:)
증명 이미지(조잡한 스타일링에 구애받지 않고 빠르게 완성되었습니다).투고 내용도 횡설수설 xD
갱신하다
대신 '무한 로드'의 경우 버튼을 클릭하여 이벤트를 클릭합니다(보이지 않게 하기만 하면 됩니다).visibility: hidden;)로 시험할 수 있습니다.
$(window).on('scroll', function () {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
load_posts();
}
});
이 조작은load_posts()페이지 하단에서 100px 위치에 있을 때 기능합니다.내 사이트의 튜토리얼의 경우, 투고가 로드되고 있는지 체크할 수 있습니다(Ajax를 두 번 기동하지 않도록 하기 위해). 그리고 스크롤이 바닥글의 맨 위에 도달하면 실행할 수 있습니다.
$(window).on('scroll', function(){
if($('body').scrollTop()+$(window).height() > $('footer').offset().top){
if(!($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts'))){
load_posts();
}
}
});
이 경우 유일한 단점은 다음 값까지 스크롤할 수 없다는 것입니다.$(document).height() - 100또는$('footer').offset().top웬일인지 그래.그럴 경우 스크롤할 위치를 늘리기만 하면 됩니다.
를 넣으면 쉽게 확인할 수 있습니다.console.log코드를 입력하고 인스펙터에서 무엇을 폐기하는지 확인합니다.
$(window).on('scroll', function () {
console.log($(window).scrollTop() + $(window).height());
console.log($(document).height() - 100);
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
load_posts();
}
});
거기에 맞추어 조정해 주세요;)
이것이 도움이 되기를 바랍니다:) 질문이 있으면 질문해 주십시오.
카테고리를 사용하지 않을 경우 이 코드를 어떻게 사용할 수 있습니까?사실 이 코드를 커스텀 포스트 타입으로 사용하고 싶습니다.
언급URL : https://stackoverflow.com/questions/31587210/load-more-posts-ajax-button-in-wordpress
'programing' 카테고리의 다른 글
| Angular JS는 렌더링 중입니다.Angular JS는 렌더링 중입니다.줄바꿈이 아닌 텍스트로줄바꿈이 아닌 텍스트로 (0) | 2023.03.27 |
|---|---|
| PostgreSQL의 JSON 스키마 검증 (0) | 2023.03.27 |
| 봄철에 쿼츠 일에 콩 레퍼런스를 주입할 수 있나요? (0) | 2023.03.27 |
| Wordpress 플러그인:사용자 지정 URL에 연결 (0) | 2023.03.27 |
| ORA-12514 TNS: 청취자가 현재 Connect Descriptor에서 요청된 서비스를 인식하지 않음 (0) | 2023.03.27 |