教你如何用Flat UI定制自己漂亮的wordpress登录页面表单

<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

}

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() 函数正常。如果账号正常登陆后，将被重定向到管理面板。

dlf_process()函数如下：

functiondlf_process() {

if(isset($_POST['dlf_submit'])) {

    dlf_auth($_POST['login_name'], $_POST['login_password']);

}

dlf_form();

}

要实现我们想要的完美体验，我们还需要将Bootstrap和 Flat UI 样式表嵌入到wp头部，可以通过WP enqueue函数来实现：

functionflat_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');

为了方便嵌入新的登录表单，最好的方式是在page里可使用快捷代码。下面函数定义了 [dm_login_form] 快捷代码，可在编辑器里添加到post或page页面里。

function dlf_shortcode() {

ob_start();

dlf_process();

return ob_get_clean();

}

add_shortcode('dm_login_form', 'dlf_shortcode');

现在，我们终于完成定义登录表单的插件编写了。

现在来看看如何使用我们的插件

先通过常规的插件激活，激活我们的插件。

通过post或page，在编辑器嵌入[dm_login_form]快捷代码，如果你要直接写在主题文件里，可用下面的模板标签：

<?php echo do_shortcode('[dm_login_form]'); ?>

总结

我知道我们都喜欢一个定制的特色wordpress登录页面，希望这个教程对你有所帮助。

你可以下载整个插件文件包，来研究 https://dl.dropboxusercontent.com/u/21385868/designmodo/designmodo-login-form.zip，如果你有其他想法或问题，通过评论来告诉我。

原文链接http://designmodo.com/wordpress-custom-login/

翻译：柳华芳 译文链接https://it.liuhuafang.com/wordpress/3823