制作个性化的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 相关文章推荐
转换中文日期的PHP程序
Oct 09 PHP
php一些公用函数的集合
Mar 27 PHP
Ajax+PHP 边学边练之四 表单
Nov 27 PHP
PHP下对数组进行排序的函数
Aug 08 PHP
解析php DOMElement 操作xml 文档的实现代码
May 10 PHP
php读取excel文件的简单实例
Aug 26 PHP
使用CodeIgniter的类库做图片上传
Jun 12 PHP
PHP 实现代码复用的一个方法 traits新特性
Feb 22 PHP
PHP实现多文件上传的方法
Jul 08 PHP
php解析url并得到url中的参数及获取url参数的四种方式
Oct 26 PHP
基于Swoole实现PHP与websocket聊天室
Aug 03 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
Sep 03 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代码实现爬虫记录――超管用
2015/07/31 PHP
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
python中的__slots__使用示例
2015/02/26 Python
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
python与php实现分割文件代码
2017/03/06 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
详解Python 函数如何重载?
2019/04/23 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
《桃花心木》教学反思
2014/02/17 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
失职检讨书大全
2015/01/26 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
AJAX学习笔记
2021/05/18 Javascript
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL