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

所属分类: 网络编程 / PHP编程 阅读数: 1672
收藏 0 赞 0 分享

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

在/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 addslashes和mysql_real_escape_string

本文介绍的是用 mysql_real_escape_string对用户提交数据进行整理处理和通过addslashes以及mysql_escape_string这3个类似的功能函数的区别。经过转义的数据可以直接插入到数据库中。
收藏 0 赞 0 分享

php cout&lt;&lt;的一点看法

cout<<运算符后面如果是常整数,那么最大可以输出4294967295,即2^32-1,不允许出现负数,也就是说,cout<<运算符对于常整数只重载了unsigned int型;对于有小数的情况,则保留6位有效数字.
收藏 0 赞 0 分享

PHP 变量的定义方法

在网页中使用变量的几点注意事项小结。
收藏 0 赞 0 分享

php学习之 认清变量的作用范围

变量的存在有着它的生命周期,我们可以让它存在于一个小的函数内部,也可让它存在于整个程序当中。对于一般情况下声明的变量,我们称之为局部变量,只能在当前程序段中存在,而使用$globals声明出来的变量则是在当前页面整个程序当中都会有效。
收藏 0 赞 0 分享

php 静态变量与自定义常量的使用方法

php 静态变量与自定义常量的使用方法
收藏 0 赞 0 分享

认识并使用PHP超级全局变量

超级全局变量也叫做预定义变量,是PHP系统中自带的变量,它可让你的程序设计更加的方便快捷。
收藏 0 赞 0 分享

通过具体程序来理解PHP里面的抽象类

面向对象程序通过类的分层结构构建起来. 在单重继承语言如PHP中, 类的继承是树状的. 一个根类有一个或更多的子类,再从每个子类继承出一个或更多下一级子类.
收藏 0 赞 0 分享

php读取xml实例代码

php读取xml实例代码,需要的朋友可以参考下。
收藏 0 赞 0 分享

php 正确解码javascript中通过escape编码后的字符

js的escape如何在PHP中来解呢?下面的这个函数可以正确的解析,网上有不少unescape的函数,但好用的不多.
收藏 0 赞 0 分享

在PHP中养成7个面向对象的好习惯

在 PHP 编程早期,PHP 代码在本质上是限于面向过程的。过程代码 的特征在于使用过程构建应用程序块。过程通过允许过程之间的调用提供某种程度的重用。
收藏 0 赞 0 分享
查看更多