制作个性化的WordPress登陆界面的实例教程

 更新时间:2016年05月21日 12:02:14   作者:Kayo Lee  
随着WordPress多用户功能的日益完善,也有越来越多的开发者开始着手于WordPress登陆界面部分的自定义制作,接下来我们就来看制作个性化的WordPress登陆界面的实例教程

个性化登陆界面的方法有两种,第一种是替换登陆背景,这个算是小型个性化吧:

在/wp-admin/images找到login-bkg-tile.gif和login-bkg-bottom_new.gif两张图片,用自己定制的图片(大小最好相同)替换就行了。

当然这个不能改变登陆框的布局,显然对于追求完美的处女座来说是不够的,于是第二种方法出现了:

首先在functions.php中添加一个函数:

// custom login for theme
// folder themes/theme_name/custom-login/
function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login.css" />';
}
add_action('login_head', 'custom_login');

通过一个简单的“勾子”,现在你的主题已经可以开启个性化登陆界面了,接下来要做的,是为你的登陆界面写css样式,命名为custom-login.css,然后再把css文件放到主题文件夹里就行了。

以下是本站的css,供大家参考(由于我的custom-login.css是放在主题文件夹的子文件里,所以background里的url要写成如../images/login-bg-body.jpg的形式,熟悉MCS的人就会知道 ".." 代表上一级目录)

/* 页面css */
html,body,#wpbody,.form-table .pre{background: #ffffff url("../images/login-bg-body.jpg");? font-size: 13px; font-family: 微软雅黑,宋体;}
a{text-decoration: none;}
body.login,body{border: none;}
h1 a{display: none;}

/* 登陆框主体部分css */
#login{background: url("../images/login-bg.jpg") no-repeat;? width: 650px;? height: 500px;? position: relative; margin: 50px auto;}
#loginform {padding-left: 110px;? float: right;? border-left: 2px solid #e3e3d3}
#loginform #user_login , #loginform #user_pass {border: 2px dotted #666666}
form{width: 280px;? height: 166px;? padding: 45px 0px 0px 0px;? background: url() no-repeat; margin: 60px 0 0 0; border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
#user_pass,#user_login,#user_email{width: 190px; height: 20px; margin-bottom: 10px;}

/* 登陆框各组成css */
label {font-size: 13px; color: #fff;}
form .forgetmenot label {font-size: 13px;? color: #666666;}
.login #nav a{color: #666666 !important;}
input.button-primary, button.button-primary, a.button-primary{background: none; border: none; text-shadow: none; margin: 0; padding: 0; font-size: 13px; font-family: 微软雅黑,宋体;}
form .submit input {color: #666666;}
input.button-primary: active, button.button-primary: active, a.button-primary: active {background: none;}

/* 其他 */
#nav{margin: 0; padding: 0; position: absolute; text-shadow: none;}

送上效果图

2016521120005834.png (1024×491)

看到效果后就会发现,虽然我们不能改变页面的html元素,但包括登陆框结构在内的整个登陆页面都可以自定义,只要你知道每个部分的css选择器名称即可。所以只要用firebug等工具查看所有css的id或class,就可以制作出一个完全自己作主的登陆界面。

相关文章

  • PHP Curl出现403错误的解决办法

    PHP Curl出现403错误的解决办法

    这篇文章主要介绍了PHP Curl出现403错误的解决办法,是一个比较奇葩的错误,删除一些CURL的参数即可解决这个问题,需要的朋友可以参考下
    2014-05-05
  • PHP将页面中点击数量高的链接进行高亮显示的方法

    PHP将页面中点击数量高的链接进行高亮显示的方法

    这里来介绍PHP将页面中点击数量高的链接进行高亮显示的方法,主要受到WordPress中某插件的启发,需要的朋友可以参考下
    2016-05-05
  • SSO单点登录的PHP实现方法(Laravel框架)

    SSO单点登录的PHP实现方法(Laravel框架)

    这篇文章主要介绍了SSO单点登录的PHP实现方法(Laravel框架) 的相关资料,需要的朋友可以参考下
    2016-03-03
  • 使用swoole扩展php websocket示例

    使用swoole扩展php websocket示例

    WebSocket规范的目标是在浏览器中实现和服务器端双向通信。双向通信可以拓展浏览器上的应用类型,如果你想要用PHP来写websocket应用,那swoole_framework一定是最好的选择,需要的朋友可以参考下
    2014-02-02
  • YII Framework框架教程之国际化实现方法

    YII Framework框架教程之国际化实现方法

    这篇文章主要介绍了YII Framework框架教程之国际化实现方法,较为详细的分析了YII Framework框架国际化的原理与相关实现技巧,需要的朋友可以参考下
    2016-03-03
  • thinkphp解决数据传入数据库中特殊字符的问题小结

    thinkphp解决数据传入数据库中特殊字符的问题小结

    这篇文章主要介绍了thinkphp解决数据传入数据库中特殊字符的问题,为了解决这个问题,你需要确保在插入数据库之前,不对文本内容进行HTML实体编码,需要的朋友可以参考下
    2024-03-03
  • 利用laravel搭建一个迷你博客实战教程

    利用laravel搭建一个迷你博客实战教程

    这篇文章主要给大家介绍了关于利用laravel搭建一个迷你博客的相关资料,文中将一步步的实现步骤通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。
    2017-08-08
  • Codeigniter实现发送带附件的邮件

    Codeigniter实现发送带附件的邮件

    这篇文章主要介绍了Codeigniter实现发送带附件的邮件的方法,涉及Codeigniter中attach方法的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • PHP手机短信验证码实现流程详解

    PHP手机短信验证码实现流程详解

    这篇文章主要为大家详细介绍了PHP手机短信验证码的实现流程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • PHP中的正则表达式实例详解

    PHP中的正则表达式实例详解

    在编程里基本都会用到正则表达式来处理数据,那么下面就具体在PHP中怎么运用吧,本文通过具体的实例,给大家讲解了PHP中正则表达式的使用方法。
    2017-04-04

最新评论