,可以通过以下步骤实现:
<?php
/*
Template Name: Custom Template
*/
get_header(); ?>
<div id="ajax-posts-container">
<div id="post1"></div>
<div id="post2"></div>
</div>
<?php get_footer(); ?>
这个自定义页面模板定义了一个包含两个div容器的页面,用于展示两个ajax帖子。
jQuery(document).ready(function($) {
$.ajax({
url: '/wp-json/wp/v2/posts', // 替换为你的WordPress站点URL
type: 'GET',
data: {
per_page: 2 // 获取两篇帖子
},
success: function(posts) {
// 加载第一个帖子
$.ajax({
url: '/wp-json/wp/v2/posts/' + posts[0].id, // 替换为你的WordPress站点URL和第一个帖子的ID
type: 'GET',
success: function(post1) {
$('#post1').html('<h2>' + post1.title.rendered + '</h2><p>' + post1.content.rendered + '</p>');
}
});
// 加载第二个帖子
$.ajax({
url: '/wp-json/wp/v2/posts/' + posts[1].id, // 替换为你的WordPress站点URL和第二个帖子的ID
type: 'GET',
success: function(post2) {
$('#post2').html('<h2>' + post2.title.rendered + '</h2><p>' + post2.content.rendered + '</p>');
}
});
}
});
});
这段JavaScript代码使用了jQuery库来简化AJAX请求的处理。它首先通过GET请求获取最新的两篇帖子,然后分别加载这两篇帖子的标题和内容到页面上的对应div容器中。
function custom_enqueue_scripts() {
wp_enqueue_script('custom-ajax', get_template_directory_uri() . '/custom-ajax.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
这段代码使用了WordPress的wp_enqueue_script函数来加载自定义JavaScript文件。
现在,当你访问这个新创建的页面时,它将会通过AJAX加载最新的两篇帖子,并将它们展示在页面上的两个div容器中。
请注意,以上代码仅为示例,你可能需要根据你的具体需求进行修改和调整。此外,为了使这个功能正常工作,你需要确保你的WordPress站点已经正确配置并且具有足够的权限来访问REST API。
领取专属 10元无门槛券
手把手带您无忧上云