0%

WordPress自定义登录注册界面样式及LOGO

WordPress主题做好了,但是登录界面还是原生的样子,带有WordPress的图标,现在我们想把Logo自定义成我们想要的样子。 原来的登录界面如下: QQ截图20150204161421 现在开始,我们将把WordPress图标换做我们自定义的LOGO,首先要明确的是我们不能修改WordPress的源代码,因为如果有版本更新之类的操作,这个效果就找不到了,所以我们需要在主题下修改。 1.修改主题下的 functions.php 文件 在主题的最后面加入下面的代码,来引入一个CSS文件

1
2
3
4
/* 登陆界面图标 */
function custom_login() {
echo '<link rel="stylesheet" tyssspe="text/css" href="' . get_bloginfo('template_directory') . '/login/icon.css" />'; }
add_action('login_head', 'custom_login');

也就是引入了 login 目录下的 icon.css 样式表。 2.新建 icon.css 文件 在主题目录下新建 login文件夹,然后新建 icon.css 文件,编码为UTF-8,然后拖入我们自定义的LOGO,命名为 logo.png login目录里面是这样子的 QQ截图20150204162536 我的网站自定义的logo如下 logo 大家可以自己设计好的LOGO放入login目录下 在 icon.css 中加入如下代码

1
2
3
4
5
6
.login h1 a {
background-image: url('logo.png');
height: 100px;
width: 230px;
background-size: 230px;
}

在以上代码中设定了背景图和宽高度还有背景图片的大小即可。 如果想添加其他样式,只要在 icon.css 文件中加入样式就好。 三、刷新预览 修改完之后,我们预览一下,大功告成啦! 效果图如下 QQ截图20150204162703 酷酷哒!小伙伴们快来尝试一下吧!