wordpress CMS主题 微信
  • 全部教程
  • Home > wordpress CMS主题制作 > wordpress主题自定义注册登录页面(2):创建自定义登录页面

    wordpress主题自定义注册登录页面(2):创建自定义登录页面

    高时银博客 wordpress CMS主题制作 点击: 3,006 次 1 0

    上一章我们介绍了wordpress主题自定义注册页面的制作过程,要章我们接着给主题创建一个自定义登录页面,让用户不需通过wordpress程序默认的登录页面登录后台。wordpress主题自定义登录页面在一定程序上,也能提升一个wordpress主题折层次,比如一些要求相对较高的商业主题。嗯,下面就一起来看一下怎么制作wordpress自定义登录页面吧。

    首先在主题文件夹下创建一个登录文件page-login.php,用dreamweaver打开这个文件,添加页面定义代码:

    <?php
    /*
    Template Name: 登陆页面
    */

    然后,添加判断用户是否登录代码:

    global $wpdb,$user_ID;

    if (!$user_ID) { //判断用户是否登录
    //接下来的代码都添加在这里

    }else { //跳转到首页
    echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";
    }

    接着添加验证数据代码,如下:

    if($_POST){ //数据提交
    //We shall SQL escape all inputs
    $username = $wpdb->escape($_REQUEST['username']);
    $password = $wpdb->escape($_REQUEST['password']);
    $remember = $wpdb->escape($_REQUEST['rememberme']);

    if($remember){
    $remember = "true";
    } else {
    $remember = "false";
    }
    $login_data = array();
    $login_data['user_login'] = $username;
    $login_data['user_password'] = $password;
    $login_data['remember'] = $remember;
    $user_verify = wp_signon( $login_data, false );
    //wp_signon 是wordpress自带的函数,通过用户信息来授权用户(登陆),可记住用户名

    if ( is_wp_error($user_verify) ) {
    echo "<span class='error'>用户名或密码错误,请重试!</span>";//不管啥错误都输出这个信息
    exit();
    } else { //登陆成功则跳转到首页(ajax提交所以需要用js来跳转)
    echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";
    exit();
    }
    } else {

    //这里添加登录表单代码

     

    }

     

    然后,在上面的代码中的“ //这里添加登录表单代码”添加如下代码:

    get_header();//载入头部文件
    ?>
    <!--<script src="http://code.jquery.com/jquery-1.4.4.js"></script>--><!--如果你发现没有ajax提交,请检查是否有引入jquery.js文件-->
    <div id="container">
    <div id="content">
    <h3>阿树工作室-登陆页面</h3>
    <div id="result"></div> <!-- 输出结果 -->
    <form id="wp_login_form" action="" method="post">
    <label>用户名</label><br />
    <input type="text" name="username" class="text" value="" /><br />
    <label>密码</label><br />
    <input type="password" name="password" class="text" value="" /> <br />
    <label>
    <input name="rememberme" type="checkbox" value="forever" />记住我</label>
    <br /><br />
    <input type="submit" id="submitbtn" name="submit" value="Login" />
    </form>

    <script type="text/javascript"><!--ajax 提交数据-->
    $("#submitbtn").click(function() {
    <!--请准备一个gif图-->
    $('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn();
    var input_data = $('#wp_login_form').serialize();
    $.ajax({
    type: "POST",
    url: "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
    data: input_data,
    success: function(msg){
    $('.loader').remove();
    $('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
    }
    });
    return false;

    });
    </script>

    </div>
    </div>
    <?php
    get_footer(); //载入底部文件

    表单代码一定要放在最后一个大括号前面哦。好了,这样我们就制作好了wordpress自定义登录页面。


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201506084299.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论