搬码资源网广告位 搬码资源网广告位

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

声明:
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途,否则后果请用户自负。
本站资源来自网络收集,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
如果您喜欢该程序,请支持正版软件,得到更好的正版服务。
本文链接:https://www.abnma.com/10709.html,转载请注明出处。
如有侵权,请邮件联系我们删除处理。

0
搬码资源网广告位

评论0

请先

没有账号? 注册  忘记密码?