用 Flat UI 定制自定义登录页面

已经有许多朋友向我反映到 WordPress 的后台登录界面不敢恭维,“不够现代化”、“死气沉沉”……这次 WP酷 就与各位一起分享上图登录表单的实现方法,如果你也有同样的感受,不如一起来试试吧。

文章使用 Flat UI 框架:http://designmodo.com/flat-free/,效果如下:

我们可以将其做成一款插件,这样 WordPress 更新后样式依然可以保留。在wp-content/plugins 目录内创建名为flatui 的文件夹,并在内创建同名文件:flatui.php ,在此文件输入以下内容并保存:

/* Plugin Name: Designmodo Login Form Plugin URI: http://designmodo.com Description: Simple Login form plugin that just work Version: 1.0 Author: Agbonghama Collins Author URI: http://tech4sky.com */

别忘了我们的样式是使用 Flat UI 来设计的,下载前面提到的框架并解压,将 css 、font 、bootstrap 三个目录上传到插件目录里。 继续为flatui.php 添加内容:

  function dlf_form() { ?&gt; <form action=”&lt;?php echo $_SERVER[‘REQUEST_URI’]; ?&gt;&lt;p&gt;” method=”post”> <div class=”login-form”> <div class=”form-group”><input id=”login-name” class=”form-control login-field” name=”login_name” type=”text” value=”” placeholder=”Username” /> <label class=”login-field-icon fui-user” for=”login-name”></label></div> <div class=”form-group”><input id=”login-pass” class=”form-control login-field” name=”login_password” type=”password” value=”” placeholder=”Password” /> <label class=”login-field-icon fui-lock” for=”login-pass”></label></div> <input class=”btn btn-primary btn-lg btn-block” name=”dlf_submit” type=”submit” value=”Log in” /> </div> </form><!–?php <br ?–> }

除此之外,我们仍需验证 WordPress 的用户名和密码,继续添加内容:

function dlf_auth( $username, $password ) { global $user; $creds = array(); $creds[‘user_login’] = $username; $creds[‘user_password’] = $password; $creds[‘remember’] = true; $user = wp_signon( $creds, false ); if ( is_wp_error($user) ) { echo $user->get_error_message(); } if ( !is_wp_error($user) ) { wp_redirect(home_url(‘wp-admin’)); } }

标签:

分享文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

高度专注于企业与品牌形象高端设计领域,兼具国际视野与本土文化的设计理念.充分与高端时尚融合.我们的服务贯穿品牌建设始终,让品牌形象建设更加合理化,系统化.打造更加一致性的品牌口碑,让品牌市场领域更加专业.

壹壹创意设计网
顶部
按Enter键进行搜索或按ESC键关闭