此问题已解决。请参阅下面的更新
在一些不同的在线教程之后，我成功地创建了一个函数，根据从下拉菜单中选择的类别，通过Ajax修改我的WordPress帖子显示。
我现在想将Infinite Scroll添加到Ajax加载的内容中，但我似乎不知道该怎么做。
如果有任何关于如何进行的想法，我将不胜感激。提前谢谢。
以下是我的WordPress功能：
function ajax_filter_posts_scripts() {
// Register and enqueue script
wp_register_script('afp_script', get_stylesheet_directory_uri() . '/js/ajax-filter-posts.js', false, null, false);
wp_enqueue_script('afp_script');
// localize script
wp_localize_script( 'afp_script', 'afp_vars', array(
'afp_nonce' => wp_create_nonce( 'afp_nonce' ),
'afp_ajax_url' => admin_url( 'admin-ajax.php' ),
));
}
add_action('wp_enqueue_scripts', 'ajax_filter_posts_scripts', 100);
function wp_infinitepaginate() {
// Verify nonce
$nonce = $_POST['afp_nonce'];
if ( !isset( $nonce ) || !wp_verify_nonce( $nonce, 'afp_nonce' ) )
die ( 'Permission denied');
if (is_front_page()) {
$paged = (get_query_var('page')) ? get_query_var('page') : 1;
} else {
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
}
$cat = $_POST['val'];
$args = array(
'category_name' => $cat,
'post_status' => 'publish',
'posts_per_page' => '4',
'paged' => $paged,
);
query_posts($args);
get_template_part('custom-loop');
exit;
}
add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate'); // for logged in user
add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // if user not logged in
这是我正在使用的JS：
jQuery(document).ready(function($) {
jQuery("#la-chooser").change(function() {
loadArticlebyCat(this.value);
});
function loadArticlebyCat(cat){
data = {
action: 'infinite_scroll',
val: cat,
afp_nonce: afp_vars.afp_nonce,
};
jQuery.ajax({
url: afp_vars.afp_ajax_url,
type:'post',
data: data,
success: function( data, textStatus, XMLHttpRequest ) {
jQuery("#tb-ajax-content").html( data );
console.log( textStatus );
console.log( XMLHttpRequest );
},
error: function( MLHttpRequest, textStatus, errorThrown ) {
console.log( MLHttpRequest );
console.log( textStatus );
console.log( errorThrown );
jQuery("#tb-ajax-content").html( 'No posts found' );
}
});
return false;
}
});
以下是类别下拉过滤器：
Filter by Category: <select id="la-chooser" style="padding:5px 10px;margin-left:5px;">
<option value="">All Categories</option>
<?php
$categories = get_categories();
foreach ($categories as $category) {
$option = '<option value="'.$category->category_nicename.'">';
$option .= $category->cat_name;
$option .= '</option>'."'n";
echo $option;
}
?>
</select>
更新。。。这是适用于我的最终代码
这可能并不完美，但对我来说似乎很好，没有任何错误。如果您有任何改进建议，请随时添加。
JS代码
jQuery(document).ready(function($) {
var count = 2;
jQuery("#la-chooser").change(function() {
loadArticlebyCat(this.value);
});
function loadArticlebyCat(cat){
data = {
action: 'infinite_scroll',
val: cat,
afp_nonce: afp_vars.afp_nonce,
};
jQuery.ajax({
url: afp_vars.afp_ajax_url,
type:'post',
data: data,
success: function( data, textStatus, XMLHttpRequest ) {
jQuery("#tb-ajax-content").html( data );
jQuery('#infinitBtn span').html('Load More Entries');
console.log( textStatus );
console.log( XMLHttpRequest );
count = 2;
},
error: function( MLHttpRequest, textStatus, errorThrown ) {
console.log( MLHttpRequest );
console.log( textStatus );
console.log( errorThrown );
jQuery("#tb-ajax-content").html( 'No posts found' );
}
});
return false;
}
jQuery('#infinitBtn').click(function(){
loadArticle(count);
count++;
return false;
});
function loadArticle(pageNumber) {
var cat = jQuery("#la-chooser").val();
jQuery.ajax({
url: afp_vars.afp_ajax_url,
type:'POST',
data: "action=infinite_scroll&page_no="+ pageNumber + "&loop_file=loop&val="+ cat +"&afp_nonce="+afp_vars.afp_nonce,
success: function(html) {
if(html=="") {
jQuery('#infinitBtn span').html('All Entries Loaded');
} else {
jQuery('#infinitBtn span').html('Load More Entries');
}
jQuery("#tb-ajax-content").append(html);
}
});
return false;
}
});
WordPress功能
请注意，我在子主题中使用了这个，所以如果不使用子主题，您可能希望使用get-template目录uri而不是get_stylesheet_directory_uri。
function ajax_filter_posts_scripts() {
// Register and enqueue script
wp_register_script('afp_script', get_stylesheet_directory_uri() . '/js/ajax-filter-posts.js', false, null, false);
wp_enqueue_script('afp_script');
// localize script
wp_localize_script( 'afp_script', 'afp_vars', array(
'afp_nonce' => wp_create_nonce( 'afp_nonce' ),
'afp_ajax_url' => admin_url( 'admin-ajax.php' ),
));
}
add_action('wp_enqueue_scripts', 'ajax_filter_posts_scripts', 100);
function wp_infinitepaginate() {
// Verify nonce
$nonce = $_POST['afp_nonce'];
if ( !isset( $nonce ) || !wp_verify_nonce( $nonce, 'afp_nonce' ) )
die ( 'Permission denied');
$paged = $_POST['page_no'];
$cat = $_POST['val'];
$args = array(
'category_name' => $cat,
'post_status' => 'publish',
'posts_per_page' => '6',
'paged' => $paged,
);
query_posts($args);
get_template_part('custom-loop');
wp_reset_query();
exit;
}
add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate'); // for logged in user
add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate'); // if user not logged in
带有下拉类别选择器的主循环代码
<div class="latest-article-chooser clearfix">
<h1>Latest Blog Posts</h1>
<p>
<span>Filter Posts by Category:</span> <select id="la-chooser">
<option value="">All Categories</option>
<?php
$categories = get_categories();
foreach ($categories as $category) {
$option = '<option value="'.$category->category_nicename.'">';
$option .= $category->cat_name;
$option .= ' ('.$category->count.')';
$option .= '</option>'."'n";
echo $option;
}
?>
</select>
</p>
</div>
<div id="tb-ajax-content">
<?php
if (is_front_page()) {
$paged = (get_query_var('page')) ? get_query_var('page') : 1;
} else {
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
}
$count = 1;
query_posts(array(
'post_status' => 'publish',
'posts_per_page' => '6',
'paged' => $paged,
));
get_template_part('custom-loop');
?>
</div>
<div class="post-clear"></div>
<a class="button sc blue" href="#" id="infinitBtn"><span>Load More Entries</span></a>
自定义循环文件（Custom-Loop.php）
这里包含了一些特定于主题的功能，所以你想用你自己的功能（或本地WordPress功能）来代替它们。
<?php
$count = 1;
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> itemscope="itemscope" itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
<div class="entry-wrap">
<div class="entry-media">
<?php
if ( tb_option('medium_thumb') ) {
themebeagle_medium_thumbnail();
} else {
themebeagle_large_thumbnail();
}
?>
</div>
<div class="entry-container">
<header class="entry-header">
<?php
themebeagle_entry_title();
themebeagle_entry_meta();
?>
</header><!-- .entry-header -->
<div class="entry-content" itemprop="text">
<?php themebeagle_excerpt(); ?>
</div><!-- .entry-content -->
</div> <!-- .entry-container -->
<footer class="entry-footer">
<?php themebeagle_entry_meta_bottom(); ?>
</footer><!-- .entry-footer -->
</div> <!-- .entry-wrap -->
</article> <!-- article.post -->
<?php
$count = $count + 1;
endwhile;
endif;
wp_reset_query();
?>