开发了函数滤波器段的脚本片段，该脚本在function.php文件的底部 /主题 /Understrap-Child中开发了函数滤镜。顶部功能将AJAX文件加载在WordPress安装中，包括我创建的自定义AJAX文件，该文件是第三步。第二个功能从Ajax处理程序重新调整了帖子。
function bsubash_load_more_scripts() {
wp_enqueue_script('jquery');
wp_register_script( 'loadmore_script', get_stylesheet_directory_uri() . '/js/ajax.js', array('jquery') );
wp_localize_script( 'loadmore_script', 'loadmore_params', array(
'ajaxurl' => admin_url('admin-ajax.php'),
) );
wp_enqueue_script( 'loadmore_script' );
}
add_action( 'wp_enqueue_scripts','bsubash_load_more_scripts' );
function bsubash_loadmore_ajax_handler(){
$type = $_POST['type'];
$category = isset($_POST['category']) ? $_POST['category']: '';
$args['paged'] = $_POST['page'] + 1;
$args['post_status'] = 'publish';
$args['posts_per_page'] = $_POST['limit'];
if($type == 'archive'){
$args['category_name'] = $category;
}
query_posts( $args );
if( have_posts() ) :
while(have_posts()): the_post();
//write your single post card
the_title();
the_excerpt();
endwhile;
endif;
die;
}
add_action('wp_ajax_loadmore','bsubash_loadmore_ajax_handler');
add_action('wp_ajax_nopriv_loadmore','bsubash_loadmore_ajax_handler');
最终步骤：
创建了一个生活在我的主题文件夹 /js /ajax.js中的ajax.js文件，您将在第二步中在Funciton中看到它。单击加载后，AJAX将不会返回帖子，包括显示加载和加载更多静态消息。这似乎正常工作。jQuery(function($) {
$('.btn-load-more').click(function(e) {
e.preventDefault();
var button = $(this),
data = {
'action': 'loadmore',
'limit': limit,
'page': page,
'type': type,
'category': category
};
$.ajax({
url: loadmore_params.ajaxurl,
data: data,
type: 'POST',
beforeSend: function(xhr) {
button.text('Loading...'); // change the button text, you can also add a preloader image
},
success: function(data) {
if (data) {
$(".latest_posts_wrapper").append(data);
page++;
button.text('Load More');
if (page == max_pages_latest)
button.remove(); // if last page, remove the button
} else {
button.remove(); // if no data, remove the button as well
}
}
});
});
});
**
我的模板文件中有什么？**
上面，在我的页面模板的顶部，我还有其他出现的帖子。这些帖子正在从代理中返回。我只是指出了这一点，所以您也知道我的文件中的内容。这不会影响我的问题。
$magazines = [];
$wp_query = new WP_Query(
array(
'post_type' => 'Magazine',
'tax_query' => array(
array (
'taxonomy' => 'magazine_categories',
'field' => $categoryId,
'terms' => $category,
'posts_per_page' => $postsPerPage,
)
),
)
);
while ($wp_query->have_posts()) : $wp_query->the_post();
//$blogProxy = new BlogProxy(get_the_ID());
$magazine = new Magazine();
$magazine->title = get_the_title();
$magazine->featured_image = get_the_post_thumbnail_url(get_the_ID());
$magazine->preview_text = get_the_excerpt();
$magazine->permalink = get_the_permalink();
$magazine->date = get_the_date();
array_push($magazines, $magazine);
endwhile;
wp_reset_postdata();
?>
/* myloadmore.js */
jQuery(function($){ // use jQuery code inside this to avoid "$ is not defined" error
$('.misha_loadmore').click(function(){
var button = $(this),
data = {
'action': 'loadmore',
'query': misha_loadmore_params.posts, // that's how we get params from wp_localize_script() function
'page' : misha_loadmore_params.current_page
};
$.ajax({ // you can also use $.post here
url : misha_loadmore_params.ajaxurl, // AJAX handler
data : data,
type : 'POST',
beforeSend : function ( xhr ) {
button.text('Loading...'); // change the button text, you can also add a preloader image
},
success : function( data ){
if( data ) {
button.text( 'More posts' ).prev().before(data); // insert new posts
misha_loadmore_params.current_page++;
if ( misha_loadmore_params.current_page == misha_loadmore_params.max_page )
button.remove(); // if last page, remove the button
// you can also fire the "post-load" event here if you use a plugin that requires it
// $( document.body ).trigger( 'post-load' );
} else {
button.remove(); // if no data, remove the button as well
}
}
});
});
});/* To style the button the according way use CSS below. */
.misha_loadmore{
background-color: #ddd;
border-radius: 2px;
display: block;
text-align: center;
font-size: 14px;
font-size: 0.875rem;
font-weight: 800;
letter-spacing:1px;
cursor:pointer;
text-transform: uppercase;
padding: 10px 0;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
}
.misha_loadmore:hover{
background-color: #767676;
color: #fff;
}
This is the AJAX handler function. Insert it to your functions.php file.
/* Enqueue jQuery and myloadmore.js. Pass query parameters to the script. */
function misha_my_load_more_scripts() {
global $wp_query;
// In most cases it is already included on the page and this line can be removed
wp_enqueue_script('jquery');
// register our main script but do not enqueue it yet
wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/myloadmore.js', array('jquery') );
// now the most interesting part
// we have to pass parameters to myloadmore.js script but we can get the parameters values only in PHP
// you can define variables directly in your HTML but I decided that the most proper way is wp_localize_script()
wp_localize_script( 'my_loadmore', 'misha_loadmore_params', array(
'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
'posts' => json_encode( $wp_query->query_vars ), // everything about your loop is here
'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
'max_page' => $wp_query->max_num_pages
) );
wp_enqueue_script( 'my_loadmore' );
}
add_action( 'wp_enqueue_scripts', 'misha_my_load_more_scripts' );
function misha_loadmore_ajax_handler(){
// prepare our arguments for the query
$args = json_decode( stripslashes( $_POST['query'] ), true );
$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
$args['post_status'] = 'publish';
// it is always better to use WP_Query but not here
query_posts( $args );
if( have_posts() ) :
// run the loop
while( have_posts() ): the_post();
// look into your theme code how the posts are inserted, but you can use your own HTML of course
// do you remember? - my example is adapted for Twenty Seventeen theme
get_template_part( 'template-parts/post/content', get_post_format() );
// for the test purposes comment the line above and uncomment the below one
// the_title();
endwhile;
endif;
die; // here we exit the script and even no wp_reset_query() required!
}
add_action('wp_ajax_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_nopriv_{action}