制作个性化的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(3) php 函数
Feb 15 PHP
探讨PHP JSON中文乱码的解决方法详解
Jun 06 PHP
5种PHP创建数组的实例代码分享
Jan 17 PHP
php打造智能化的柱状图程序,用于报表等
Jun 19 PHP
php实现将Session写入数据库
Jul 26 PHP
thinkphp中的url跳转用法分析
Jul 12 PHP
PHP获取用户客户端真实IP的解决方案
Oct 10 PHP
php基于session锁防止阻塞请求的方法分析
Aug 07 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
Aug 10 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
Jun 05 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
Oct 17 PHP
yii框架结合charjs实现统计30天数据的方法
Apr 04 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 header示例代码(推荐)
2010/09/08 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
php框架知识点的整理和补充
2021/03/01 PHP
Javascript----文件操作
2007/01/18 Javascript
js select常用操作控制代码
2010/03/16 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
Python 的内置字符串方法小结
2016/03/15 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
优纳科技软件测试面试题
2012/05/15 面试题
2014年党支部承诺书
2014/05/30 职场文书
通知的格式范文
2015/04/27 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript