软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > 建站程序 > Blog教程 > 自定义WordPress登录界面

自定义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;} /* 顶栏翻转链接效果 */

    相关阅读
    网友评论
    栏目导航
    推荐软件