主题美化 增加复选框让用户签订协议功能

教程简介:

我们在创建网站的时候想要用户同意一些协议,比如隐私协议,会员协议等等,为了避免纠纷!那么今天这个教程对你来说就是泰库拉!其他网站都有的功能,子比也不能少,喜欢的朋友记得收藏本站,本站会持续分享子比的美化及插件模版等

相关图片:

用户未登录的情况下:

图片[1]筑梦博客-专注于技术分享zibll子比主题美化 增加复选框让用户签订协议功能筑梦博客-专注于技术分享筑梦博客

用户已经登录的情况下:

图片[2]筑梦博客-专注于技术分享zibll子比主题美化 增加复选框让用户签订协议功能筑梦博客-专注于技术分享筑梦博客

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

图片[3]筑梦博客-专注于技术分享zibll子比主题美化 增加复选框让用户签订协议功能筑梦博客-专注于技术分享筑梦博客

已经成功签署后的效果:

图片[4]筑梦博客-专注于技术分享zibll子比主题美化 增加复选框让用户签订协议功能筑梦博客-专注于技术分享筑梦博客

部署教程:

  • 在主题的根目录新建个func.php文件
  • 然后将在func.php文件里写上<?php ?>
  • 在<?php在这里添加上面的代码?>
  • 在新建的页面里使用古腾堡的简码,添加短代码:[agreement]
  • 下面是添加演示图
图片[5]筑梦博客-专注于技术分享zibll子比主题美化 增加复选框让用户签订协议功能筑梦博客-专注于技术分享筑梦博客

代码展示:

 
// 在后台创建插件页面
function agreement_plugin_page() {
    // 检查当前用户是否已登录
    $is_logged_in = is_user_logged_in();

    $current_user_id = get_current_user_id();

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

    if (isset($_POST['submit'])) {
        if (isset($_POST['agreement_checkbox'])) {
            update_user_meta($current_user_id, 'agreement_checked', true);
            echo '<p style="color:green;text-align: center;background: rgba(136, 136, 136, .1);padding: 5px;">您已经成功签署本内容!</p>';
        }
        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="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();
                alert("请先勾选本协议。");
            }
        });
    </script>';
}

// 注册短代码并调用插件页面
function agreement_shortcode() {
    ob_start();
    agreement_plugin_page(); // 调用插件页面函数
    return ob_get_clean();
}
add_shortcode('agreement', 'agreement_shortcode');
温馨提示:本文最后更新于2024-05-08 08:49:23,某些文章具有时效性,若有错误或已失效,请在下方留言
© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容