制作个性化的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 相关文章推荐
rephactor 优秀的PHP的重构工具
Jun 09 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
Jul 15 PHP
PHP中把stdClass Object转array的几个方法
May 08 PHP
PHP读取RSS(Feed)简单实例
Jun 12 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
Jun 13 PHP
CI框架给视图添加动态数据
Dec 01 PHP
PHP随机生成唯一HASH值自定义函数
Apr 20 PHP
PHP超牛逼无限极分类生成树方法
May 11 PHP
php中使用gd库实现下载网页中所有图片
May 12 PHP
php中preg_match的isU代表什么意思
Oct 01 PHP
PHP文件缓存类实现代码
Oct 26 PHP
Yii2框架数据验证操作实例详解
May 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
PHP提取中文首字母
2008/04/09 PHP
php GD绘制24小时柱状图
2008/06/28 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
python算法题 链表反转详解
2019/07/02 Python
python实现文件的分割与合并
2019/08/29 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
Java程序员面试题
2016/09/27 面试题
应届生自荐信范文
2014/02/21 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
世界气象日活动总结
2015/02/27 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python