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你自己写