WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › 美化 WordPress – 用 Flat UI 定制漂亮的自定义登录页面

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

PCDotFan8年前

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

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

 

开始工作

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

<?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 来设计的,下载前面提到的框架并解压,将dist 文件夹内的js 、img 、fonts 、css 四个目录上传到插件目录里。

继续为flatui.php 添加内容:

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

 除此之外,我们仍需验证 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'));
}
}

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

美化 WordPress - 用 Flat UI 定制漂亮的自定义登录页面-WP酷

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

添加内容:

function dlf_process() {
if (isset($_POST['dlf_submit'])) {
    dlf_auth($_POST['login_name'], $_POST['login_password']);
}
 
dlf_form();
}

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

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

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

function dlf_shortcode() {
ob_start();
dlf_process();
return ob_get_clean();
}
 
add_shortcode('dm_login_form', 'dlf_shortcode');

 

大功告成!

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

#Flat UI#wordpress美化#登录页面
37
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (13)
再想想
    PCDotFan
    站长
    若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
    435文章
    859评论
    3K获赞
    猜你喜欢
    利用缓存插件W3TC与又拍云构建WordPress全站CDN
    10年前
    实现当搜索结果只有一篇文章时自动跳转到文章
    10年前
    多说提速:使用七牛云存储实现多说静态文件CDN
    8年前
    • 杂记
    • WordPress 付费主题推荐
    Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1