很多接触wordpress的童鞋都知道,WP自带的登录注册往往不能满足我们的需求,那么怎样才能有拥有自定义登录注册的功能呢?这篇文章就为大家自己演示一下。

首先我们新建一个页面模板“page-login.php”,将下列代码加入其中

<?php
 /*
 Template Name: 登陆页面模板
 */
 ?>
 <?php
 //用户注册
 global $wpdb, $user_ID;
 if (!$user_ID) {
 }else{
 wp_redirect( home_url() ); exit; //如果已经登录,重定向到站点首页
 }
 $creds = array(
 'user_login'    => '',
 'user_password'    => '',
 'remember'    => ''
 );
 ?>

先实现用户验证,接着我们还有实现帐号密码错误提醒,在?>值钱接着添加

if(isset($_POST['loginSubmit'])){
    if($_POST['uname'] == '' || $_POST['upassword'] == ''){
        $msg = '<a>用户或密码错误</a>';
    }else{
        $creds['user_login'] = $_POST['uname'];
        $creds['user_password'] = $_POST['upassword'];
        $creds['remember'] = $_POST['rememberme'];
        $user = wp_signon( $creds, false );
        if(is_wp_error($user)){
            $msg = '<a>用户或密码错误</a>';
        }elseif(current_user_can('manage_options')){
            header('location:/wp-admin/');
        }elseif(isset($_GET['redirect_to'])){
            header('location:'.$_GET['redirect_to']);
        }else{    
            wp_redirect( home_url() ); exit;
        }
    }
}

下面就是表单的控制了,下面稍微举例说明一下

<form class="am-form" method="post" id="form-with-tooltip">
 <fieldset class="am-form-set">
 <div class="am-form-group am-form-icon">
 <i class="am-icon-user"></i>
 <input type="text" name="uname" id="doc-vld-name-2-0" class="am-form-field" minlength="3" placeholder="用户名/邮箱(至少 3 个字符)" required/>
 </div>
 <div class="am-form-group am-form-icon">
 <i class="am-icon-lock"></i>
 <input type="password" name="upassword" id="doc-vld-pwd-1-0" class="am-form-field" placeholder="密码">
 </div>
 </fieldset>
 <button type="submit" name="loginSubmit" class="am-btn am-btn-primary am-btn-block">登录</button>
 </form>

最后就是验证错误时的提醒

<?php if(isset($msg)){?>
 <?php echo $msg;?>
 <?php }else{?>
 <p>如果没有错误信息显示的问题,也可以删除</p>
 <?php };?>

以后如果你看见某些站点的登录功能很酷炫,不妨扒下来,做成自己的站点的登录样式。

最后给大家介绍几个个人认为不错的登录样式。

login1 login2 login3