1.首先在functions.php中添加代码，用来处理ajax请求的函数
//局部页面刷新
// 处理Ajax请求的函数
function ajax_refresh_content()
{
// 获取传递的分类目录 ID（这个id是js会传入的）
$category_id = isset($_POST['category_id']) ? intval($_POST['category_id']) : 0;
// 构建查询参数
$args = array(
'cat' => $category_id
);
// 查询文章
$query = new WP_Query($args);
$posts = array();
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$post_data = array(
//获取文章的标题，显示6个单词，显示不开的用...来表示
'title' => wp_trim_words(get_the_title(), 6, '...'),
//获取文章的详情链接
'permalink' => get_the_permalink(),
//获取文章的特色图像的链接
'thumbnail' => get_the_post_thumbnail_url(),
//获取文章的内容，显示不下的用...来代替
'content' => wp_trim_words(get_the_content(), 8, '...')
);
$posts[] = $post_data;
}
wp_reset_postdata();
}
// 返回内容
echo json_encode($posts);
wp_die(); // 结束请求
}
// 注册Ajax处理函数
add_action('wp_ajax_refresh_content', 'ajax_refresh_content');
add_action('wp_ajax_nopriv_refresh_content', 'ajax_refresh_content');
代码解释：为什么要使用add_action 将同一个函数注册两次
add_action 函数用于将回调函数与特定的动作钩子关联起来。在 WordPress 的 Ajax 功能中，存在两种情况需要处理：
- 当用户已登录（Authenticated User）时，使用
wp_ajax_动作钩子处理 Ajax 请求。 - 当用户未登录（Non-authenticated User）时，使用
wp_ajax_nopriv_动作钩子处理 Ajax 请求。
这样做是为了确保在用户已登录时只处理特定的 Ajax 请求，并在用户未登录时也能处理相应的请求。因此，我们需要使用两个 add_action 来注册这两个不同的动作钩子。
关于动作名称，wp_ajax_ 和 wp_ajax_nopriv_ 是固定的前缀，不能更改。而后面的动作名称，例如 refresh_content，是可以自定义的，只要保证在 add_action 函数中使用相同的名称即可。这样才能正确地将 Ajax 请求路由到相应的回调函数。
总结起来，wp_ajax_refresh_content 是处理已登录用户的 Ajax 请求的动作钩子，wp_ajax_nopriv_refresh_content 是处理未登录用户的 Ajax 请求的动作钩子。它们的名称是固定的，不能更改前缀，但可以自定义后缀部分。
第二步要显示文章分类和文章页面中的代码，哪里显示在哪里写
<div class="clssify-box">
<div class="topics">Topics</div>
<ul>
//从这里开始就是要获取文章的分类目录了
<?php
$argsTwo = array(
'hide_empty' => false, // 隐藏没有文章的分类目录（分类目录下一个文章也没有也要显示这个分类目录）
'orderby' => 'name', // 按名称排序
'order' => 'ASC', // 升序排序
'exclude' => array(1, 2, 3, 7, 8, 9, 35, 36, 37, 38), // 排除指定分类目录的ID不需要显示的分类目录
);
// 获取所有的分类目录
$categories = get_categories($argsTwo);
// 循环遍历分类目录
foreach ($categories as $category) {
// 获取分类目录的名称
$category_name = $category->name;
// 获取分类目录的 ID
$category_id = $category->term_id;
// 获取分类目录下文章的数量
$post_count = $category->count;
// 输出分类目录名称和文章数量，并将分类目录的 ID 作为按钮的 id
echo '<li id="refresh-button-' . $category_id . '">' . $category_name . ' (' . $post_count . ')</li>';
//将每个分类目录输出到li当中，当然输出到button当中也可以，每个生成不同的id，然后显示分类目录的名称，以及里面的文章的数量
}
// 输出 JavaScript 代码，发送ajax请求（前提要保证你的运行环境有jquery）
echo '
<script>
jQuery(document).ready(function($) {
// 当按钮被点击时发送Ajax请求，如果你前面生成的是button就 将下面的li换一下
$("li[id^=\'refresh-button-\']").click(function(e) {
e.preventDefault();
// 获取按钮的 ID
var buttonId = $(this).attr("id");
// 提取分类目录的 ID
var categoryId = buttonId.replace("refresh-button-", "");
// 发送Ajax请求
$.ajax({
url: ajax_object.ajaxurl, // WordPress提供的全局变量，包含Ajax请求的URL（这个url等下讲怎么引入）
type: "POST",
data: {
action: "refresh_content", // 与你在第一步中注册的函数名相对应
category_id: categoryId // 传递分类目录的 ID
},
success: function(response) {
// 在成功接收到响应后更新内容
let data = JSON.parse(response);
console.log(data);
var html = \'\';
for (var i = 0; i < data.length; i++) {
var post = data[i];
// 构建带有图片、标题和内容的 HTML 结构
html += \'<div class="p_box">\';
html += \'<div style="width: 190px;margin:auto;height:100px;background-image:url(\' + post.thumbnail + \');background-repeat: no-repeat;background-position: center center;background-size: cover;"></div>\';
html += \'<a href="\' + post.permalink + \'">\';
html += \'<li style="margin-top: 20px;font-size: 18px;">\' + post.title + \'</li>\';
html += \'</a>\';
html += \'<p style="">\'+ post.content +\'</p>\';
html += \'</div>\';
}
$("#message-container").html(html);
},
error: function(xhr, status, error) {
// 处理错误
}
});
});
});
</script>
';
?>
</ul>
<div class="topics-btn">
//这个是wordpress页面路径跳转
<a href="<?php echo esc_url(home_url('/map-data')); ?>" target="_blank">
Explore Your neighbour Production
</a>
</div>
</div>
下面讲一下上面js代码中的，发送ajax请求的url是怎么获取到的
在functions.php 文件中添加代码，找到这个wp_enqueue_scripts添加代码
function custom_jquery()
{
wp_localize_script('custom_jquery', 'ajax_object', array('ajaxurl' => admin_url('admin-ajax.php'))); // 设置Ajax请求的URL
}
add_action('wp_enqueue_scripts', 'custom_jquery');
解释一下上面的代码
这段代码是在 WordPress 中用于注册和加载自定义的 jQuery 脚本，并将 AJAX 请求的 URL 传递给前端脚本。
解释如下：
-
function custom_jquery() { ... }：定义了一个名为custom_jquery的自定义函数。该函数将被添加到wp_enqueue_scripts钩子的回调函数中。 -
wp_localize_script('custom_jquery', 'ajax_object', array('ajaxurl' => admin_url('admin-ajax.php')))：这是wp_localize_script()函数的调用，用于将数据传递给前端脚本。'custom_jquery'是需要传递数据的脚本句柄，通常是你自己定义的脚本句柄。'ajax_object'是用于在 JavaScript 中访问这些数据的对象名称，你可以根据需要修改它。array('ajaxurl' => admin_url('admin-ajax.php'))是一个关联数组，其中'ajaxurl'是要传递的数据键名，admin_url('admin-ajax.php')是一个 WordPress 提供的函数，用于获取处理 AJAX 请求的 PHP 文件的 URL。
-
add_action('wp_enqueue_scripts', 'custom_jquery')：将自定义函数custom_jquery添加到wp_enqueue_scripts钩子的回调函数中。这将确保在加载脚本时调用custom_jquery函数。
通过上述代码，你可以将 AJAX 请求的 URL 传递给前端脚本，使得在 JavaScript 中可以轻松地访问到这个 URL，从而实现与后台的 AJAX 通信。
wp_localize_script() 是 WordPress 提供的一个函数，用于将数据传递给前端脚本（通常是 JavaScript）。
该函数的语法如下：
wp_localize_script( $handle, $name, $data );
$handle：（字符串）要传递数据的脚本句柄。这通常是你在使用wp_enqueue_script()函数加载脚本时指定的句柄。$name：（字符串）在 JavaScript 中访问这些数据的对象名称。你可以根据需要为对象指定一个名称。$data：（数组或对象）要传递给前端脚本的数据。你可以使用关联数组或对象来表示数据。
wp_localize_script() 的作用是将 PHP 中的数据传递到前端脚本中，这样前端脚本就可以在运行时使用这些数据。通常情况下，这种技术被用于将 AJAX 请求的 URL、动态生成的数据或其他需要在 JavaScript 中访问的数据传递给前端脚本。
在前端脚本中，你可以通过访问 ajax_object 对象（或你在 $name 参数中指定的对象名称）来获取传递的数据。例如，如果你传递了一个名为 'ajaxurl' 的数据键名，你可以通过 ajax_object.ajaxurl 来获取对应的值。
这样，通过 wp_localize_script() 函数，你可以轻松地在 PHP 和 JavaScript 之间传递数据，实现更灵活和交互性的功能。
最终实现效果css你自己写
224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
