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


Posted in PHP onMay 21, 2016

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

在/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;}

送上效果图

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

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

PHP 相关文章推荐
基于mysql的论坛(7)
Oct 09 PHP
php上传文件的增强函数
Jul 21 PHP
PHP的autoload自动加载机制使用说明
Dec 28 PHP
php中json_decode()和json_encode()的使用方法
Jun 04 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
Jul 01 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
May 27 PHP
领悟php接口中interface存在的意义
Jun 27 PHP
php环境套包 dedeampz 伪静态设置示例
Mar 26 PHP
PHP易混淆函数的区别及用法汇总
Nov 22 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
Jul 07 PHP
php实现的SSO单点登录系统接入功能示例分析
Oct 12 PHP
php记录搜索引擎爬行记录的实现代码
Mar 02 PHP
详解WordPress中添加友情链接的方法
May 21 #PHP
PHP框架Laravel插件Pagination实现自定义分页
Apr 22 #PHP
屏蔽PHP默认设置中的Notice警告的方法
May 20 #PHP
PHP获取网站中各文章的第一张图片的代码示例
May 20 #PHP
今天你说520了吗?不仅有php表白书还有java表白神器
May 20 #PHP
程序员的表白神器“520”大声喊出来
May 20 #PHP
PHP性能优化大全(php.ini)
May 20 #PHP
You might like
正则表达式语法
2006/10/09 Javascript
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
Python中super的用法实例
2015/05/28 Python
python动态网页批量爬取
2016/02/14 Python
Python requests库用法实例详解
2018/08/14 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
基于Python测试程序是否有错误
2020/05/16 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
这段代码难道不该打印出56吗
2013/02/27 面试题
物流管理应届生求职信
2013/11/07 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
企业形象策划方案
2014/05/29 职场文书
计生工作先进事迹
2014/08/15 职场文书
企业贷款委托书格式
2014/09/12 职场文书
计算机专业自荐信
2015/03/05 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
python异步的ASGI与Fast Api实现
2021/07/16 Python
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android