您需要的是AJAX导航。这并不复杂，但也不是很容易。我为你写了一个简单的例子，希望对你有所帮助。
AJAX请求有两个步骤，首先是前端请求，当用户单击链接或元素时由浏览器发出，然后是服务器的响应。
如果我们需要在我们的网站上使用这种回应，还有第三步，那就是。。。正在使用我们网站中的响应！
根据用户需求创建AJAX请求如果用户单击链接，我们必须停止浏览器导航到该页面。我们可以通过使用jQuery函数来实现这一点，该函数名为preventDefault(). 这将阻止绑定到它的任何元素的默认操作，无论是表单还是链接。
我们需要建立一些自定义链接，以确保我们不会干扰其他链接，如社交网络。我们将向导航链接添加一个类和一个属性，以便在AJAX请求中使用它。
为了获取下一篇文章的数据，我们使用get_next_post(); 和get_previous_post();. 我们也需要身份证。因此：
$next_post = get_next_post();
$prev_post = get_previous_post();
// Check if the post exists
if ( $prev_post ) { ?>
<div class="prev ajax-link" data-id="<?php echo $prev_post->ID; ?>"><?php _e(\'« Previous Posts\',\'text-domain\'); ?></div><?php
}
if ( $next_post ) { ?>
<div class="next ajax-link" data-id="<?php echo $next_post->ID; ?>"><?php _e(\'Newer Posts »\',\'text-domain\'); ?></div><?php
}
现在，我们将编写一个jQuery函数并禁用自定义链接上的click事件：
(function($){
$(\'.ajax-link\').on(\'click\',function(e){
e.preventDefault();
// The rest of the code goes here, check below
});
})(jQuery);
通过使用
$(this) 我们获得之前保存在中的帖子的ID
data-id:
var postId = $(this).attr(\'data-id\');
好了，现在我们有了ID，让我们创建一个AJAX请求来输出尚未写入的REST端点，并将响应放在一个DIV中，该DIV用作内容的容器：
$.get( \'http://example.com/prisma/ajax_navigation/\', {
ajaxid: postId
}).done( function( response ) {
if ( response.success ) {
$( \'#content-div\' ).innerHTML( response.content );
}
});
其中
content-div 是的ID
DIV 保存您的内容。它是元素的ID，而不是类，并且在整个页面中必须是唯一的。好了，是时候写服务器端端点了。
创建REST端点以返回帖子的数据
创建REST端点与下面几行一样简单：
add_action( \'rest_api_init\', function () {
//Path to AJAX endpoint
register_rest_route( \'prisma\', \'/ajax_navigation/\', array(
\'methods\' => \'GET\',
\'callback\' => \'ajax_navigation_function\'
) );
});
我们已在
http://example.com/prisma/ajax_navigation/. 现在可以访问该路径，但我们仍然需要一个回调函数来返回帖子的数据。
function ajax_navigation_function(){
if( isset( $_REQUEST[\'ajaxid\'] ) ){
$post = get_post( $_REQUEST[\'ajaxid\'] );
$data[\'content\'] = $post->post_content;
$data[\'success\'] = true;
return $data;
}
}
就是这样。现在，每当用户单击next post或previous post元素时，将通过AJAX获取next post或previous post的内容，并将其插入到ID为的DIV元素中
content-div.
全部完成。
