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

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

在/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，就可以制作出一个完全自己作主的登陆界面。

赞 (0)

相关推荐

  • 解析WordPress中控制用户登陆和判断用户登陆的PHP函数

    登陆函数:wp_signon() 函数介绍: wp_signon()函数用于授权给用户登陆wordpress并可记住该用户名称.该函数取代了wp_login.WordPress 2.5版本起启用. 函数使用: <?php wp_signon( $credentials, $secure_cookie ) ?> 参数说明: $credentials (array) (可选) 登陆用户信息. Default: None $secure_cookie (boolean) (可选) 决定是否使用安全c

  • WordPress中访客登陆实现邮件提醒的PHP脚本实例分享

    WordPress中访客登陆实现邮件提醒的PHP脚本实例分享

    登陆邮件提醒实现方法 前提是空间有邮件功能,测试有无邮件功能的方法:登录界面点击"忘记密码",有邮件发到你邮箱就有邮件功能. 一.登录成功提醒 就像银行的登录提醒一样,如果有人登录了系统,就会发一封邮件到邮箱,提醒你有人登录了,如果当时不是你登录,就要引起警惕了.将以下代码放入主题的functions.php中: /***************************************************** 函数名称:wp_login_notify v1.0 by DH.

  • WordPress中登陆后关闭登陆页面及设置用户不可见栏目

    WordPress中登陆后关闭登陆页面及设置用户不可见栏目

    用户登录后关闭登录页面 WordPress默认的登录页面是:http://WP目录/wp-login.php,登录后会自动跳转到:http://WP目录/wp-admin.现在问题来了,如果用户已经登录,但是它又打开wp-login.php页面,会出现什么样的情况呢?答案是,WordPress不会做任何处理,还是直接给你显示登录窗口: 面对如此冰冷的登录框,用户会感到困惑,我刚刚不是已经登录了吗?怎么还要我输入用户名和密码?所以,用户登录后,我们不该让用户再看到登录框.解决此问题的办法有两个:

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

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

    个性化登陆界面的方法有两种,第一种是替换登陆背景,这个算是小型个性化吧: 在/wp-admin/images找到login-bkg-tile.gif和login-bkg-bottom_new.gif两张图片,用自己定制的图片(大小最好相同)替换就行了. 当然这个不能改变登陆框的布局,显然对于追求完美的处女座来说是不够的,于是第二种方法出现了: 首先在functions.php中添加一个函数: // custom login for theme // folder themes/theme_nam

  • 使用jQuery制作Web页面遮罩层插件的实例教程

    使用jQuery制作Web页面遮罩层插件的实例教程

    在网页上经常遇到需要等待很久的操作,比如导出报表等.为了预防用户点击其他操作或者多次点击同个功能,需要用遮罩层把页面或者操作区盖住,防止用户进行下一步操作,同时可以提高界面友好度,让用户知道操作正在执行. $.fn.extend({ /** * 给元素添加遮罩层 * @param message {String} [可选]遮罩层显示内容 */ mask: function (message) { var $target = this, fixed = false, targetStatic =

  • Android开发之完成登陆界面的数据保存回显操作实例

    本文实例讲述了Android开发之完成登陆界面的数据保存回显操作.分享给大家供大家参考,具体如下: LoginActivity.java: package com.example.login; import java.util.Map; import android.app.Activity; import android.os.Bundle; import android.text.TextUtils; import android.view.Menu; import android.view

  • Python制作个性化的词云图实例讲解

    Python制作个性化的词云图实例讲解

    目录 1. 引言 2. 举个栗子 2.1 安装stylecloud库 2.2 生成词云图 2.3 美化显示效果 2.4 处理停用词 2.5 使用自定义背景图像 3. 总结 1. 引言 词云图可以让我们方便地识别出文本中的关键词,其中单词的大小代表它们的频率.有了这个,我们甚至在阅读之前就可以很好地了解文本的内容.虽然有很多免费的工具可以在线制作文字云,但我们可以使用万能的Python来定制个性化的词云图. 在本文中,我们将使用第三方Python库stylecloud,有了该库,可以通过简短的几行

  • Android miniTwitter登录界面开发实例

    Android miniTwitter登录界面开发实例

    本文要演示的Android开发实例是如何完成一个Android中的miniTwitter登录界面,下面将分步骤讲解怎样实现图中的界面效果,让大家都能轻松的做出美观的登录界面. 先贴上最终要完成的效果图: miniTwitter登录界面的布局分析 首先由界面图分析布局,基本可以分为三个部分,下面分别讲解每个部分. 第一部分是一个带渐变色背景的LinearLayout布局,关于背景渐变色就不再贴代码了,效果如下图所示: 第二部分,红色线区域内,包括1,2,3,4 如图所示: 红色的1表示的是一个带圆

  • jquery实现用户登陆界面(示例讲解)

    jquery实现用户登陆界面(示例讲解)

    实例如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="js/jquery-1.8.0.min.js"></script> <script> var cnresu = false; $(function(){

  • Android仿新浪微博启动界面或登陆界面（1）

    Android仿新浪微博启动界面或登陆界面（1）

    本文为大家分享了Android模仿新浪微博启动界面&登陆界面的具体实现代码,供大家参考,具体内容如下 启动界面 主要有两个功能: 1.加载启动动画 2.判断网络,有者直接进入登陆界面,否则去设置网络 代码较简单,主要采用AlphaAnimation()方法和动画监听器,使一张图片产生渐变动画.在动画启动的时候判断网络,动画结束时完成判断并进入登陆界面. /** * Created by D&LL on 2016/5/25. * 初始页面加载界面 */ public class Splash

  • Android实现带有记住密码功能的登陆界面

    Android实现带有记住密码功能的登陆界面

    本文实例为大家分享了Android带有记住密码功能的登陆界面实现代码,供大家参考,具体内容如下 1.设计思路 主要采用SharedPreferences来保存用户数据,本Demo没有经过加密,所有一旦Android系统被ROOT的话,其他用户就可以查看用户的私有目录,密码文件就很不安全.所以真正应用在软件上面的,一定要经过加密才保存,可以选择MD5加密. SharedPreferences介绍可以参看这篇博文:http://www.jb51.net/article/84859.htm TextW

  • Android用ActionBar高仿微信主界面的实例代码

    Android用ActionBar高仿微信主界面的实例代码

    经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对较为深刻的理解了.唯一欠缺的是,前面我们都只是学习了理论知识而已,虽然知识点已经掌握了,但是真正投入到项目实战当中时会不会掉链子还很难说.那么不用担心,本篇文章我就将带领大家一起进入ActionBar的应用实战,将理论和实践完美结合到一起. 如果你还没有看过我的前两篇文章,建议先去阅读一下 Android ActionBar完全解析使用官方推荐的最佳导航栏(上)和 Android ActionBar完全解析使用官方推荐的最佳导航

  • python爬虫之模拟登陆csdn的实例代码

    python模拟登陆网页主要使用到urllib.urllib2.cookielib及BeautifulSoup等基本模块,当然进阶阶段我们还可以使用像requests等更高级一点的模块.其中BeautifulSoup模块在匹配html方面,可以很好的代替re,使用起来更方便,对于不会使用正则的人来说是福音. 本文使用python2.7 原理 模拟登陆前,我们需要先知道csdn是如何登陆的.我们通过google chrome浏览器先来分析下: 1.chrome浏览器用F12或ctrl+shift+

随机推荐