wordpress 用 FLAT UI 定制漂亮的自定义登录页面

云柯 231 0

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

文章使用 Flat UI 框架:http://www.bootcss.com/p/flat-ui/,请先下载。

 

开始工作

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

  1. <?php
  2. /*
  3.   Plugin Name: Designmodo Login Form
  4.   Plugin URI: http://designmodo.com
  5.   Description: Simple Login form plugin that just work
  6.   Version: 1.0
  7.   Author: Agbonghama Collins
  8.   Author URI: http://tech4sky.com
  9.  */

别忘了我们的样式是使用 Flat UI 来设计的,下载前面提到的框架并解压,将 dist 文件夹内的 js 、 img 、 fonts 、 css 四个目录上传到插件目录里。

继续为 flatui.php 添加内容:

  1. function dlf_form() {
  2. ?>
  3. <form method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
  4.     <div class="login-form">
  5.         <div class="form-group">
  6.             <input name="login_name" type="text" class="form-control login-field" value="" placeholder="Username" id="login-name" />
  7.             <label class="login-field-icon fui-user" for="login-name"></label>
  8.         </div>
  9.         <div class="form-group">
  10.             <input  name="login_password" type="password" class="form-control login-field" value="" placeholder="Password" id="login-pass" />
  11.             <label class="login-field-icon fui-lock" for="login-pass"></label>
  12.         </div>
  13.         <input class="btn btn-primary btn-lg btn-block" type="submit"  name="dlf_submit" value="Log in" />
  14. </form>
  15. </div>
  16. <?php
  17. }

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

  1. function dlf_auth( $username, $password ) {
  2. global $user;
  3. $creds = array();
  4. $creds['user_login'] = $username;
  5. $creds['user_password'] =  $password;
  6. $creds['remember'] = true;
  7. $user = wp_signon( $creds, false );
  8. if ( is_wp_error($user) ) {
  9. echo $user->get_error_message();
  10. }
  11. if ( !is_wp_error($user) ) {
  12. wp_redirect(home_url('wp-admin'));
  13. }
  14. }

当输入错误的用户名或密码时,页面会提示错误信息,并给出找回密码链接:

wordpress 用 FLAT UI 定制漂亮的自定义登录页面

函数 dlf_process 的执行过程:在前端显示登录表单→判断登录表单是否被加载→检验用户名密码是否正确→是否 dlf_auth 函数正常。如果账号正常登陆后,将被重定向到管理面板。

添加内容:

  1. function dlf_process() {
  2. if (isset($_POST['dlf_submit'])) {
  3.     dlf_auth($_POST['login_name'], $_POST['login_password']);
  4. }
  5. dlf_form();
  6. }

为了让我们的后台登录界面更加精致,还需要将刚刚解压的 Flat UI 和 Bootstrap 框架在头部载入,添加内容:

  1. function flat_ui_kit() {
  2. wp_enqueue_style('bootstrap-css', plugins_url('css/vendor/bootstrap.min.css', __FILE__));
  3. wp_enqueue_style('flat-ui-kit', plugins_url('css/flat-ui.min.css', __FILE__));
  4. }
  5. add_action('wp_enqueue_scripts', 'flat_ui_kit');

就差一点了!接下来如果需要嵌入新的登录表单,下面函数定义了 [dm_login_form] 快捷代码,可在编辑器里添加到文章和页面里:

  1. function dlf_shortcode() {
  2. ob_start();
  3. dlf_process();
  4. return ob_get_clean();
  5. }
  6. add_shortcode('dm_login_form', 'dlf_shortcode');

大功告成!

接下来,启用我们刚刚写好的插件→ Designmodo Login Form ,文章/页面的编辑界面内输入 [dm_login_form] 即可直接引用优雅的 Flat UI 登录表单哦。

 

打赏
发表评论
表情 图片 链接 代码

分享
微信
微博
QQ