制作个性化的WordPress登陆界面的实例教程
2016-05-21 12:02
731 查看
个性化登陆界面的方法有两种,第一种是替换登陆背景,这个算是小型个性化吧:
在/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 rewrite问题解决
- WordPress升级版本及安装插件出现”Problem with the SSL CA cert”的解决办法
- 详解WordPress中添加和执行动作的函数使用方法
- 优化WordPress的Google字体以加速国内服务器上的运行
- 在WordPress中使用PHP脚本来判断访客来自什么国家
- 使用WordPress发送电子邮件的相关PHP函数用法解析
- 解析WordPress中控制用户登陆和判断用户登陆的PHP函数
- 推荐十款免费 WordPress 插件
- 在Linux系统下一键重新安装WordPress的脚本示例
- WordPress中Gravatar头像缓存到本地及相关优化的技巧
- Wordpress 忘记密码的处理方法
- 关于WordPress的SEO优化相关的一些PHP页面脚本技巧
- 详解WordPress中用于更新和获取用户选项数据的PHP函数
- WordPress中创建用户角色的相关PHP函数使用详解
- 讲解WordPress开发中一些常用的debug技巧
- 使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
- 编写PHP脚本来实现WordPress中评论分页的功能
- 优化WordPress中文章与评论的时间显示