制造共性化的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;}

送上成果图

看到成果后就会发现,尽管咱们不能扭转页面的html元素,但包括登陆框构造在内的整个登陆页面都能够自定义,只需你晓得每个局部的css抉择器称号即可。所以只需用firebug等工具查看一切css的id或class,就能够制造出一个齐全本人作主的登陆界面。

以上就是安达网络工作室关于《制作个性化的WordPress登陆界面的实例教程》的一些看法。更多内容请查看本栏目更多内容!

本文相关话题: WordPress 登陆界面 PHP编程
版权声明:本文为 安达网络工作室 转载文章,如有侵权请联系我们及时删除。
相关文章
WordPress屏蔽评论中链接地址的办法

本文实例讲述了WordPress屏蔽评论中链接地址的办法。分享给大家供大家参考。详细剖析如下: 应用WordPress做...

WordPress中输入以后页面SQL语句的办法

1. 代码形式第一步,关上wp-config.php,增加复制代码代码如下:define('SAVEQUERIES', true);开启SAVEQUERI...

WordPress直达义HTML与过滤链接的相干PHP函数应用解析

esc_html()(本义 Html) esc_html() 函数用来本义 Html 代码,让 Html 代码不本义。 用法 esc_html( $tex...

在wordpress可视化编辑器中输出带缩进的代码

在WordPress中,咱们发如今写文章时,可视化模式下会对html代码进行清算,例如对<>等符号转化为html实体,对...

Wordpress(Wp)3.5版修正默许上传图片门路的处理办法

置信接触过WP零碎的冤家都理解,老版零碎的上传图片门路是默许指向wp-content目录下的。做过WP博客的冤家应...

调用WordPress函数统计文章拜访量及PHP原生计数器的完成

1.首先引见WordPress的两款性能弱小的插件: (1)Count per Day 是一个十分弱小的访客数量统计插件,能够统...

需求提交

客服服务