自定义WordPress登录界面

是否有想过修改WordPress的登录页面?其实WordPress登录页面的自定义是非常容易的。通过这篇文章的代码,你就可以添加个性化的登录页面,而且这篇文章的自定义方法都是在主题文件里完成的,这样当更新WordPress版本时就不用担心这次更改会消失。

1 – 编辑Functions.php文件

先检查下当前主题是否有functions.php这个文件,如果有的话就直接将下面的代码粘贴到该文件的最下方。如果没有这个文件,只要用记事本新建一个空白的文件粘贴下面的代码并将它命名为functions.php

<?php  function custom_login() {   echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login/custom-login.css" />';}  add_action('login_head', 'custom_login');  ?>

2 –编辑主题文件

我们需要一个可以保存新CSS式样以及可能使用到图片的地方,考虑到这些东西并不是主站的组成部分,所以建议你新建个文件夹。

在主题文件夹里创建一个新的文件夹,并将它命名 为“custom-login“。

接着,在这个文件夹里创建一个新的样式文件并命名为 “custom-login.css”

3 – 添加新的CSS规则

每次加载登录页面时,custom-login.css文件都会被加载,这意味着在此添加的任何css规则都将运用到登录页面。

如果需要添加新的图片,你可以将它们保存在custom-login文件夹里。

而如果你想要再次使用主题中的图片,你只要用下面的CSS规则就可以调用主题图片文件夹中的图片。(这样一来,浏览器就不要再次加载该图片,因为它已经对图片进行了缓存)。

html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}

一个简单的模板示例

下面就是我用来创建新的登录表单样式,非常简单也非常实用。我都有注释,欢迎大家在自己的网站上使用。

/* 自定义登录样式*/    
html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}/* 页面背景,这个不能使用body标签 */ 
h1 a { /* 标题图片 ( "WordPress Logo")。记得根据实际图片尺寸更改高度和宽度 */
background:url(../images/pbd-title.png) 0 0 no-repeat;
width:415px;
height:70px;
}  

body.login {border-top-color:#dff4fc;} /* 顶栏背景颜色*/
.login p#backtoblog a:link,
.login p#backtoblog a:visited {color:#17272d;} /* 顶栏链接效果*/
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;} /* 顶栏翻转链接效果 */

波比源码 – 精品源码模版分享 | www.bobi11.com
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!

波比源码 » 自定义WordPress登录界面

发表评论

Hi, 如果你对这款模板有疑问,可以跟我联系哦!

联系站长
赞助VIP 享更多特权,建议使用 QQ 登录
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡