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

wordpress是全世界最流行的cms,也是最好的cms之一,全球60%的网站使用wordpress. 通常,只有登录管理面板时候才会出现登录表单,但是,你可能希望定制复合你网站视觉的登录表单。 此教程教给你如何通过嵌入代码或模板标签,来定制一个漂亮的自定义登陆页面,这些嵌入代码可以在post和page中调用。

作者:Agbonghama Collins 翻译:it.liuhuafang.com

wordpress是全世界最流行的cms,也是最好的cms之一,全球60%的网站使用wordpress.

通常,只有登录管理面板时候才会出现登录表单,但是,你可能希望定制复合你网站视觉的登录表单。

此教程教给你如何通过嵌入代码或模板标签,来定制一个漂亮的自定义登陆页面,这些嵌入代码可以在post和page中调用。

文章用的UI框架地址 http://designmodo.com/flat-free/

login-form-wordpress

定制登录表单的开发工作

不多废话,开始干活。

首先,在你的插件目录,创建一个文件夹,文件夹名称自己定,但插件文件需包含下面的头部信息。

<?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来设计,所以要先下载UI框架并解压,将bootstrapcss、font三个目录上传到插件目录里。
下面的php函数dlf_form()包含新的登录表单HTML代码:
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
}
我们需要验证登录名和密码,dlf_auth() 函数来实现它:

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'));
}
}
当输入错误的用户名或密码时候,页面会提示错误消息,并给出一个连接到找回密码页面:
login-form-wordpress-error
函数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
柳华芳
柳华芳

奔向光明之地

文章: 1201
订阅评论
提醒
guest

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

1 评论
内联反馈
查看所有评论
房联社
房联社
9 年 前

不错的教程

1
0
希望看到您的想法,请您发表评论x