WordPress评论中实现ajax无刷新

在我们开发Wordpress主题的时候,咱们需要给评论区增加一个Ajax无刷新,这样可以保证不刷新页面的情况下提交评论,这样可以大大提高网页的交互性和用户体验。

Ajax解释:

Ajax(Asynchronous JavaScript and XML)是一种用于创建快速动态Web页面的前端技术。它通过JavaScript和XML(现在通常使用JSON)等技术,实现了无需刷新整个页面就能实现局部更新的效果。例如,用户在网页中填写表单并点击“提交”按钮,通过Ajax技术可以将表单数据异步发送到服务器进行处理并获取响应,然后只更新需要更新的部分,而不需要刷新整个页面。

代码:

实现无刷新提交评论的方法是使用 Ajax 技术,并在主题的 functions.php 文件中添加一些 JavaScript。这是一个经典的 WordPress 网站开发技巧。以下是一个简单的示例:

第一步:添加 JavaScript

1.在 WordPress 主题的 functions.php 文件中添加以下代码:

function add_ajax_script() {
    wp_enqueue_script( 'ajax.js', get_template_directory_uri() . '/js/ajax.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'add_ajax_script' );

2.创建一个名为 ajax.js 的新文件,并将其放在您的主题的 JS 文件夹中。

3.在 ajax.js 文件中添加以下代码:

jQuery(document).ready(function($) {
    $('.comment-form').submit(function() {
        var form = $(this);
        var formData = form.serialize();
        $.ajax({
            type: 'POST',
            url: form.attr('action'),
            data: formData,
            success: function(response) {
                $('#comment').val('');
                $('#comments').html(response);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
        });
        return false;
    });
});

第二步:更新主题中的 comments.php 文件

1.打开您当前 WordPress 主题的 comments.php 文件并查找以下代码块(可能在不同的位置):

<?php comment_form(); ?>

2.将这行代码更改为:

<form id="commentform" class="comment-form" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post">

第三步:获取评论的方式

最后一步是通过 comments.php 的适当方式输出评论。在上面的 JavaScript 中,我们使用 Ajax 将数据提交到 wp-comments-post.php URL,并将响应替换评论表单之后的页面。这意味着您需要在 comments.php 文件中使用响应的 WordPress 函数输出评论。这通常在代码中像这样:

<?php comments_template(); ?>

或者:

<?php wp_list_comments(); ?>

确保使用正确的函数来呈现评论。

这就是实现无刷新提交评论的基础。请注意,上述代码可能需要进行一些适应,具体取决于您的主题和评论系统的特定实现方式。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

给TA打赏
共{{data.count}}人
人已打赏
html前端

子比主题调用现有的模态框

2023-4-15 14:53:38

css3前端

CSS3特效鼠标经过图片自动变大,离开后图片变小

2023-5-2 20:51:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索