子比页面增加一个复选框来让用户签订协议-岸边IBIAN

我们在创建网站的时候想要用户同意一些协议，避免纠纷！那么今天这个教程对你来说就是泰库拉！你们平时签到的那么多积分也没啥用，帮你们消耗一点，同时也让你们养成拒绝白嫖的习惯！

Tips:

去除了原先丑陋的提示框，使用了SweetAlert2插件的提示框，在弹出的提示框点击确定后会自动滑动到顶部的效果
将已经签订的页面ID和用户的ID还有签订的状态一并保存在数据库中方便调用

演示图：

用户未登录的情况下

用户已经登录的情况下：

用户已经登录但是未勾选复选框是无法提交的

已经成功签署后的效果：

代码：

// 引入SweetAlert2 插件的样式
function load_sweetalert_scripts() {
    wp_enqueue_style( 'sweetalert2', 'https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css' );
    wp_enqueue_script( 'sweetalert2', 'https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'load_sweetalert_scripts' );

// 在后台创建插件页面
function agreement_plugin_page() {
    global $post; // 添加全局变量$post，用于获取当前页面的ID

    // 设置一个签署成功的变量名
    $success = '<p style="color:green;text-align: center;background: rgba(136, 136, 136, .1);padding: 5px;">您已经成功签署本内容！</p>';

    // 检查当前用户是否已登录
    $is_logged_in = is_user_logged_in();

    $current_user_id = get_current_user_id();

    // 获取当前页面的ID
    $page_id = isset($post->ID) ? $post->ID : '';

    // 检查当前用户是否已签订协议
    $agreement_checked = get_user_meta($current_user_id, 'agreement_checked_' . $page_id, true);

    // 如果用户点击提交按钮且勾选了同意协议复选框，则更新用户元数据，并显示成功签署提示信息
    if (isset($_POST['submit']) && isset($_POST['agreement_checkbox'])) {
        update_user_meta($current_user_id, 'agreement_checked_' . $page_id, true);
        $agreement_checked = true; // 更新变量的值为true
    }
    
    if ($agreement_checked || (isset($_POST['submit']) && isset($_POST['agreement_checkbox']))) {
        echo $success;
        return; // 在签署成功后直接返回，无需执行下面的代码
    }
    

    echo '<form method="post" id="agreement-form" style="text-align: center;background: rgba(136, 136, 136, .1);padding: 5px;">';
    echo '<div style="display: inline-flex;">';

    // 如果当前用户未登录则调用登录框到按钮上
    if (!$is_logged_in) {
        echo '<button class="newadd-btns hover-show but nowave jb-blue radius" style="border-radius: 5px"><a href="javascript:;" class="signin-loader">登录</a></button>';
    } else {
        echo '<input type="checkbox" style="height: 20px;width: 20px;margin-right: 5px;" name="agreement_checkbox" id="agreement_checkbox"> 我已阅读并同意上述内容<br>';
        echo '<input type="hidden" name="page_id" value="' . $page_id . '">'; // 添加一个隐藏字段保存当前页面的ID
        echo '<input type="submit" class="newadd-btns hover-show but nowave jb-blue radius" style="border-radius: 5px;line-height: 0.5;margin-left: 5px;" name="submit" value="确认">';
    }

    echo '</div>';
    echo '</form>';

    // 添加 JavaScript 来进行表单验证
    echo '<script>
        document.getElementById("agreement-form").addEventListener("submit", function(event) {
            if (!document.getElementById("agreement_checkbox").checked) {
                event.preventDefault();
                Swal.fire({
                    icon: "error",
                    title: "提交失败",
                    text: "请您先勾选本内容后再提交！",
                    confirmButtonText: "确定"
                });
            }
        });
    </script>';
}

// 注册短代码并调用插件页面
function agreement_shortcode() {
    ob_start();
    agreement_plugin_page(); // 调用插件页面函数
    return ob_get_clean();
}
add_shortcode('agreement', 'agreement_shortcode');