我之前收到了一些帮助,以便构建一个Wordpress Ajax加载更多功能,但我正在构建的网站在不同的页面页面上使用不同的差异。
我遇到的问题是从模板文件中控制'post-type'
'postsPerPage'
等变量,帮助我的人给了我一个为{{1}创建变量的方法并且在模板,functions.php和JS文件之间传递它完美地工作,我想要做的就是复制'category'
和'postsPerPage'
,这很容易吗?
显然不是,
我认为我没错,但是functions.php似乎根本没有收到'post-type'
变量:
我会将原始代码的原始代码放在其中,然后执行我尝试使其完成的每项更改:
初始模板文件
'postsPerPage'
已编辑的模板文件
<!-- ************************************************************************** -->
<!-- This controls the Load More AJax Function and Loadout for dropdow sections -->
<!-- ************************************************************************** -->
<div id="ajax-posts" class="row">
<?php
$cat_id = 2;
$postsPerPage = 4;
$args = array(
'post_type' => 'post',
'posts_per_page' => $postsPerPage,
'cat' => $cat_id
);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();
?>
<div class="small-6 large-3 columns end thumb">
<div class="grid">
<figure class="effect-zoe">
<?php the_post_thumbnail( $size, $attr ); ?>
<a href="<?php the_permalink(); ?> "><figcaption>
<h2><?php the_title(); ?></h2>
<hr class="light">
<p class="description"><?php the_content(); ?></p>
</figcaption></a>
</figure>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
<a id="more_posts" data-category="<?php echo $cat_id; ?>">Load More</a>
<!-- **************************************************************** -->
<!-- End of Load More AJax Function and Loadout for dropdown sections -->
<!-- **************************************************************** -->
初始functions.php
<!-- ************************************************************************** -->
<!-- This controls the Load More AJax Function and Loadout for dropdow sections -->
<!-- ************************************************************************** -->
<div id="ajax-posts" class="row">
<?php
$ppp_id = 6;
$cat_id = 2;
$postit_id = 'post';
$postsPerPage = 6;
$args = array(
'post_type' => $postit_id,
'posts_per_page' => $postsPerPage,
'cat' => $cat_id
);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();
?>
<div class="small-6 large-3 columns end thumb">
<div class="grid">
<figure class="effect-zoe">
<?php the_post_thumbnail( $size, $attr ); ?>
<a href="<?php the_permalink(); ?> "><figcaption>
<h2><?php the_title(); ?></h2>
<hr class="light">
<p class="description"><?php the_content(); ?></p>
</figcaption></a>
</figure>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
<a id="more_posts"
data-category="<?php echo $cat_id; ?>"
data-ppp="<?php echo $postsPerPage; ?>"
>Load More</a>
<!-- **************************************************************** -->
<!-- End of Load More AJax Function and Loadout for dropdown sections -->
<!-- **************************************************************** -->
已编辑的functions.php
function more_product_ajax(){
$ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 4;
$page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
$cat = (isset($_POST['cat_id'])) ? $_POST['cat_id'] : '';
header("Content-Type: text/html");
$args = array(
'post_type' => 'post',
'posts_per_page' => $ppp,
'cat' => $cat,
'paged' => $page,
);
$loop = new WP_Query($args);
$out = '';
if ($loop -> have_posts()) : while ($loop -> have_posts()) : $loop -> the_post();
$out .= '<div class="small-6 large-3 columns end thumb">
<div class="grid">
<figure class="effect-zoe light">
<?php the_post_thumbnail( $size, $attr ); ?>
<a href="<?php the_permalink(); ?> "></a>
</figure>
<h2 class="product-load"><?php the_title() ?></h2>
</div>
</div>';
endwhile;
endif;
wp_reset_postdata();
die($out);
}
add_action('wp_ajax_nopriv_more_product_ajax', 'more_product_ajax');
add_action('wp_ajax_more_product_ajax', 'more_product_ajax');
初始Custom.js
/***********************************************
This controls initial load more function
***********************************************/
function more_post_ajax(){
$ppp = (isset($_POST['postsPerPage'])) ? $_POST['postsPerPage'] : '';
$page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
$cat = (isset($_POST['cat_id'])) ? $_POST['cat_id'] : '';
header("Content-Type: text/html");
$args = array(
'post_type' => 'post',
'posts_per_page' => $ppp,
'cat' => $cat,
'paged' => $page,
);
$loop = new WP_Query($args);
$out = '';
if ($loop -> have_posts()) : while ($loop -> have_posts()) : $loop -> the_post();
$out .= '<div class="small-6 large-3 columns end thumb">
<div class="grid">
<figure class="effect-zoe">
'.get_the_post_thumbnail( get_the_ID(), $size, $attr ).'
<figcaption>
<h2>'.get_the_title().'</h2>
<hr class="light">
<p class="description">'.get_the_content().'</p>
</figcaption>
</figure>
</div>
</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');
已编辑custom.js
var ppp = 4; // Post per page
var cat = $('#more_posts').data('category');
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();
});
对于所有代码感到抱歉,只想给你全部图片,有人能看到我哪里错了吗?