WordPress纯代码实现ajax评论无限加载教程
要在 WordPress 中使用 AJAX 无限加载评论,你需要一些基本的前端和后端编码知识。下面是一个基本的教程,它会演示如何在 WordPress 中实现 AJAX 评论无限加载功能。请注意,这只是一个简单的示例,你可以根据自己的需求进行扩展和改进。
-
在主题中添加 JavaScript 文件:
在你的 WordPress 主题文件夹中,创建一个新的 JavaScript 文件(例如,customajaxcomments.js)。在这个文件中,你将处理 AJAX 请求和评论的加载。以下是一个简单的示例代码:
jQuery(document).ready(function($) { var page = 1; var loading = false; var $commentsContainer = $('#commentscontainer'); function loadComments() { if (loading) return; loading = true; var data = { action: 'load_comments', page: page, post_id: $commentsContainer.data('postid') }; $.ajax({ type: 'POST', url: ajaxurl, data: data, success: function(response) { if (response) { $commentsContainer.append(response); page; } loading = false; } }); } $(window).scroll(function() { if ($(window).scrollTop() $(window).height() > $commentsContainer.height() 100) { loadComments(); } }); loadComments(); });
-
在主题中添加 PHP 代码:
在你的主题的 functions.php 文件中添加以下代码,以处理 AJAX 请求并加载评论:
// 添加 AJAX 功能 add_action('wp_enqueue_scripts', 'my_enqueue'); function my_enqueue() { wp_enqueue_script('customajaxcomments', get_template_directory_uri() . '/js/customajaxcomments.js', array('jquery'), '', true); wp_localize_script('customajaxcomments', 'ajax_object', array('ajax_url' => admin_url('adminajax.php'))); } // 创建 AJAX 处理函数 add_action('wp_ajax_load_comments', 'load_comments'); add_action('wp_ajax_nopriv_load_comments', 'load_comments'); function load_comments() { $page = $_POST['page']; $post_id = $_POST['post_id']; $comments = get_comments(array( 'post_id' => $post_id, 'status' => 'approve', 'number' => 5, // 每次加载的评论数量 'offset' => ($page 1) 5 // 计算偏移量 )); if ($comments) { foreach ($comments as $comment) { // 输出评论内容 echo '
-
在主题模板中添加评论容器:
在你希望显示评论的地方,添加一个容器元素,例如:
这个容器用于加载评论内容。
-
确保 WordPress 后台开启了评论分页:
前往 WordPress 后台的“设置” > “讨论”页面,确保已启用评论分页。
-
刷新网站并测试:
确保你的主题中加载了 JavaScript 文件和评论容器,并尝试滚动到页面底部,触发评论的无限加载。
请注意,这只是一个基本示例,你可以根据自己的需求进行定制和扩展,包括设计评论的样式、加载动画、更多参数等。还要确保在实际项目中采取必要的安全措施,例如检查用户权限,防止潜在的安全漏洞。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
仍然有问题? 我们要如何帮助您?
' . $comment>comment_content . '
'; echo '