php 美化登录页面,[WordPress登陆注册界面美化] – 用 Flat UI 定制漂亮的自定义登录页面...

前面逍遥乐已经给大家介绍了多个wordpress登陆注册界面优化教程，各种口味，总有一个适合你！

更多wordpress教程直接在本博客搜索可以找到！

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

开始工作

我们可以将其做成一款插件，这样 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() {

?>

}

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

}

}

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

函数 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('bootstrap/css/bootstrap.css', __FILE__));

wp_enqueue_style('flat-ui-kit', plugins_url('css/flat-ui.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 登录表单哦。

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