用 Flat UI 定制漂亮的 WordPress 自定义登录页面

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

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

login-form_wpdaxue_com

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

别忘了我们的样式是使用 Flat UI 来设计的,下载前面提到的框架并解压,将 cssfontbootstrap 三个目录上传到插件目录里。

继续为 flatui.php 添加内容:

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

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

login-form-1_wpdaxue_com

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

添加内容:

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

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

大功告成!

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

本文来源:http://www.mywpku.com/wordpress-custom-login-by-flat-ui.html

挖鱼源码网注:本文内容实际参考出处为 http://designmodo.com/wordpress-custom-login/,希望后续投稿者注意注明参考来源!

版权免责声明

① 本站VIP源码资源永久免费下载 www.wayu.cn
② 本网站资源来源于网络收集,如有侵权,请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流,请不要用于商业用途,否则后果自负。
④ 如果你有源码需要出售,可以联系小编,或者点击 投稿
⑤ 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。
⑧ 网站资源不做任何二次加密和授权后门(原版加密除外)

评论0

请先

没有账号? 忘记密码?