也想出现在这里?联系我们

WordPress文章密码保护Ajax设置

2024.01.19 wordpress教程
  • 文章介绍
  • 升级版本
  • 评价&建议

要在WordPress文章中使用Ajax设置密码保护,你需要创建一个自定义的Ajax请求,以便在文章密码验证时加载内容。以下是一种实现方法:

  1. 在主题的functions.php文件中添加以下代码:
function custom_password_protect_ajax() {
    // 验证密码是否正确
    if (post_password_required()) {
        echo '密码错误';
    } else {
        // 在这里加载受保护的内容,可以是文章内容或其他内容
        the_content();
    }

    die(); // 终止脚本
}

add_action('wp_ajax_custom_password_protect', 'custom_password_protect_ajax');
add_action('wp_ajax_nopriv_custom_password_protect', 'custom_password_protect_ajax');
  1. 创建一个JavaScript文件,用于处理Ajax请求。

在你的主题文件夹中创建一个名为customajax.js的新JavaScript文件,并将以下代码添加到该文件中:

jQuery(document).ready(function($) {
    var passwordForm = $('#passwordprotectform');
    var passwordInput = $('#passwordprotectinput');
    var contentContainer = $('#contentcontainer');
    var errorMessage = $('#passworderrormessage');

    passwordForm.on('submit', function(e) {
        e.preventDefault();
        var password = passwordInput.val();

        $.ajax({
            type: 'POST',
            url: ajax_object.ajax_url,
            data: {
                action: 'custom_password_protect',
                post_password: password
            },
            success: function(response) {
                if (response === '密码错误') {
                    errorMessage.html('密码错误,请重试。');
                } else {
                    contentContainer.html(response);
                }
            }
        });
    });
});
  1. 在主题的functions.php文件中加载JavaScript文件。

将以下代码添加到functions.php文件中,以确保JavaScript文件在WordPress网站加载时被包含:

function load_custom_scripts() {
    wp_enqueue_script('customajax', get_template_directory_uri() . '/customajax.js', array('jquery'), '1.0', true);

    // 将Ajax请求的URL传递给JavaScript文件
    wp_localize_script('customajax', 'ajax_object', array('ajax_url' => admin_url('adminajax.php')));
}

add_action('wp_enqueue_scripts', 'load_custom_scripts');
  1. 在需要保护的文章模板中添加密码表单。

在你的文章模板中,添加一个密码表单,用于输入文章密码,并设置一个容器来显示文章内容。这里,我使用了两个示例的HTML元素,你可以根据自己的需要进行修改:

<div id="passwordprotectform">
    <input type="password" id="passwordprotectinput" placeholder="输入密码">
    <button type="submit">提交</button>
</div>
<div id="passworderrormessage"></div>
<div id="contentcontainer"></div>

现在,当访问包含密码保护的文章页面时,你将看到一个密码输入框和一个提交按钮。当访问者输入正确的密码并提交后,将通过Ajax加载受保护的内容。

请确保你的主题文件夹中包含名为customajax.js的JavaScript文件,并根据需要自定义HTML元素和样式。

有用0
  • 2024.01.19初次和大家见面了!

等待您对该主题的建议

发表评论

还能输入240个字

Hi, 欢迎加入Wordpress技术交流群,带你装逼带你飞!

我要入群
也想出现在这里?联系我们
wordpress加速

我来推荐一个更牛逼的给你看看?

  • 猛戳我吧