用鼠标与指尖
让互联网更加有趣

自定义wordpress登陆界面随机背景扁平化样式

自定义wordpress登陆界面随机背景扁平化样式-小伟博客

大家都知道wordpress登陆页面logo是它家的logo和链接,而且界面枯燥难看。强迫症的我自己又动手捣鼓了一下,感觉还可以吧。觉得好看可以试试下面我的教程,支持wordpress4.X→所有版本!


  • 自定义logo相关

打开主题文件夹下的 functions.php ,在 ?> 前添加以下代码(按照需要):把/logo.png改成自己的logo路径,不要改成链接。

//自定义登录页面的LOGO图片
function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/logo.png) !important; }
</style>';
}
add_action('login_head', 'my_custom_login_logo');

//自定义登录页面的LOGO提示为网站名称
add_filter('login_headertitle', create_function(false,"return get_bloginfo('name');"));
//自定义登录页面的LOGO链接为首页链接
add_filter('login_headerurl', create_function(false,"<!-return get_bloginfo('url');-->"));

  • 自定义背景(5张背景随机)

打开根目录下的wp-login.php文件(注意备份),找到 <div class=”clear”></div> ,在下面的</body>前面添加以下JS代码:把5个jpg背景图路径换成自己的,以下代码已经包含了界面的CSS样式,懂的可以自己改CSS。

<script type="text/javascript">
//<!CDATA[
var bodyBgs = [];
bodyBgs[0] = "/01.jpg";
bodyBgs[1] = "/02.jpg";
bodyBgs[2] = "/03.jpg";
bodyBgs[3] = "/04.jpg";
bodyBgs[4] = "/05.jpg";
var randomBgIndex = Math.round( Math.random() * 4 );
document.write('<style> body.login{background: rgba(255, 255, 255, 0.0) url('+ bodyBgs[randomBgIndex] +'); background-size:100% 100%; background-repeat:no-repeat;}#login {width: 320px; padding: 10% 0 0; margin: auto;} .login label{ color: #03A9F4; line-height: 35px; } .login form{ background: rgba(255,255,255,.6); } .login form .input, .login input[type="text"]{ background: transparent; border-color: rgba(255, 255, 255, 0.3); color: #07F; } .login form .input:focus{ border-color: rgba(50,50,50,.8); }.wp-core-ui .button-group.button-large .button, .wp-core-ui .button.button-large { height: 30px; line-height: 28px; padding: 0 125px 2px; }.wp-core-ui .button-primary { background: #03A9F4; border-color: #03A9F4 #03A9F4 #03A9F4; -webkit-box-shadow: 0 1px 0 #03A9F4; box-shadow: 0 1px 0 #03A9F4; color: #fff; text-decoration: none; text-shadow: 0 -1px 1px #03A9F4,1px 0 1px #03A9F4,0 1px 1px #03A9F4,-1px 0 1px #03A9F4; }</style>');
//]]>
</script>

  • 自定义底部版权信息

打开根目录下的wp-login.php文件(注意备份),找到 <?php if ( !empty($input_id) ) : ?> 在前面添加以下版权代码(可自定义):

<!-- mlwei.com底部版权代码 --></br></br></br><center><p style="text-align: center;"><p><span style="color: rgb(0, 176, 240); font-family: 微软雅黑, &#39;Microsoft YaHei&#39;; text-decoration: none;">Copyright &nbsp;©&nbsp;</span><a href="http://www.55ml.cn/" target="_blank" title="名流互联" style="color: rgb(0, 176, 240); font-family: 微软雅黑, &#39;Microsoft YaHei&#39;; text-decoration: none;"><span style="color: rgb(0, 176, 240); font-family: 微软雅黑, &#39;Microsoft YaHei&#39;;">名流互联 ®</span></a><span style="color: rgb(0, 176, 240); font-family: 微软雅黑, &#39;Microsoft YaHei&#39;; text-decoration: none;">&nbsp;版权所有 &nbsp;Powered By
</span><a href="http://www.mlwei.com/go/?url=http://sighttp.qq.com/authd?IDKEY=e26aded93877d162bd16370d4373016715bb0fedd2fa13b4" target="_blank" title="小伟专注网站建设" style="color: rgb(0, 176, 240); font-family: 微软雅黑, &#39;Microsoft YaHei&#39;; text-decoration: none;"><span style="color: rgb(0, 176, 240); font-family: 微软雅黑, &#39;Microsoft YaHei&#39;;">Xiaowei</span></a>
</p></p></center>

  • 最后:样式美化

打开根目录下的wp-login.php文件(注意备份),找到 <input type=”submit” name=”wp-submit” id=”wp-submit” class=”button button-primary button-large” value=”<?php esc_attr_e(‘Log In’); ?>” />

在这段代码的前面添加 </br></br>

然后保存wp-login.php文件,替换服务器的文件即可。注意不要用记事本修改,会破坏出现乱码,建议用Notepad++代码编辑器修改。

图片不显示?界面错乱?各种奇葩问题欢迎进QQ群讨论:34544417  QQ523077333


小伟博客网原创文章,转载请注明来源,谢谢!

支付宝扫码打赏 微信扫码打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

未经允许不得转载:小伟博客 » 自定义wordpress登陆界面随机背景扁平化样式

分享到:更多 ()

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    编码不对!添加底部信息!!

    陌路4个月前 (08-03)Reply

小伟博客 · 给你感兴趣的内容

联系我们官方交流群