子比主题自定义页面增加一个复选框来让用户来手动签订协议或确认悉知-知新网

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

演示图：

用户未登录的情况下

QQ截图20230702223633

用户已经登录的情况下：

QQ截图20230702223724

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

已经成功签署后的效果：

图片-1

代码：

此处内容已隐藏，请评论后刷新页面查看.

// 引入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>';
}

// 注册短代码并调用<a href="https://www.godoublog.com/tag/%e6%8f%92%e4%bb%b6" title="更多关于 插件 的文章-大白博客" target="_blank">插件</a>页面
function agreement_shortcode() {
    ob_start();
    agreement_plugin_page(); // 调用插件页面函数
    return ob_get_clean();
}
add_shortcode('agreement', 'agreement_shortcode');