当前位置：荐爱小站 > WordPress > 正文

分享 WordPress 后台登录界面自定义美化的代码

  • 发布 2019-11-29
  • 分类 WordPress
  • 浏览 (1647)
  • 更新 2020-11-19

本文分享一段 wordpress 后台登录界面的美化代码，你还可以自定义其中的背景图片和 logo 成为你想要的样子。

为什么想到要美化一下 wordpress 登录后台时的界面呢，口说无据直接上图对比一目了然！

 

WordPress 登录后台 美化后：

 

wordpress后台登录美化

又或者是这样

wordpress登录后台美化

 

而 WordPress后台登录 美化前：

wordpress后台登录

 

怎么样是不是对比很强烈反差很大，其中上方的 wordpress logo 图片和整个背景图片都可以替换成你想要的样子，好了不多直接上代码。

首先在你当前 WP主题的 functions.php 文件中添加以下代码调用美化样式：

  1. //美化WordPress登录界面
  2. function custom_login_logo() {
  3. echo '<link rel="stylesheet" id="wp-admin-css" href="'.get_bloginfo('template_directory').'/wplogin.css" type="text/css" />';
  4. }
  5. add_action('login_head', 'custom_login_logo');

然后新建一个名为 wplogin.css 样式文件上传到当前 WP主题目录中或者直接添加合并到你主题的样式表 style.css 中也可以。代码如下：

  1. body,textarea{font-size:14px;font-family:"Microsoft Yahei",宋体,PMingLiU,Verdana,Arial,Helvetica,sans-serif !important;}
  2. input{font-size:14px;font-family:Tahoma,Arial,sans-serif !important;}
  3. body{background: url('//www.yourname.com/tupiandizhi.jpg');width:100%;height:100%;background-image:url('//www.yourname.com/tupiandizhi.jpg');-moz-background-size: 100% 100%;-o-background-size: 100% 100%;-webkit-background-size: 100% 100%;background-size: 100% 100%;-moz-border-image: url('//www.yourname.com/tupiandizhi.jpg') 0;background-repeat:no-repeat\9;background-image:none\9;}
  4. .login h1 a {background-image:url('images/wordpress-logo.png') !important;background-size:170px 35px;background-position:top center;
  5. background-repeat:no-repeat;width:170px;margin:auto;margin-top:35px;height:35px;text-indent:-9999px;overflow:hidden;padding-bottom:15px;display:block;}
  6. #login {
  7. width:320px;
  8. background:rgba(0, 0, 0, 0.2);
  9. padding:0 20px 100% 12px;
  10. margin:auto;
  11. top:0px;
  12. rightright:15%;
  13. position:fixed;
  14. box-shadow:0px 0px 5px 0px #333;
  15. }
  16. .login form {
  17. margin-left:8px;
  18. padding:26px 24px 46px;
  19. font-weight:normal;
  20. background:rgba(255, 255, 255, 0.2);
  21. border:none;
  22. -moz-box-shadow:none;
  23. -webkit-box-shadow:none;
  24. box-shadow:#000 0 0px 10px -1px;}
  25. #loginform {-webkit-border-radius:0px;border-radius:0px;}
  26. .login form .input, .login input[type="text"] {
  27. color:#555;
  28. font-weight:200;
  29. font-size:24px;
  30. line-height:1;
  31. width:100%;
  32. padding:5px;
  33. margin-top:2px;
  34. margin-right:6px;
  35. margin-bottom:16px;
  36. border:1px solid #FFF;
  37. background:#FFF !important;
  38. outline:0;
  39. -moz-box-shadow:none;
  40. -webkit-box-shadow:none;
  41. box-shadow:none;
  42. }
  43. .login form .input, .login input[type="text"] {
  44. font-size:17px;
  45. padding-bottom:11px;
  46. padding-top:11px;
  47. text-indent:3px; }
  48. .login form .input, .login input[type="text"] {border:2px solid #DCE4EC;}
  49. input.button-primary{
  50. margin-top:8px;
  51. border:#000;
  52. font-weight:bold;
  53. text-shadow:#FFF 0 0px 10px;}
  54. .login .button-primary {
  55. font-size:14px!important;
  56. line-height:22px;
  57. padding:8px 117px;
  58. border-radius:0px;
  59. }
  60. input.button-primary {
  61. background:rgba(255, 255, 255, 0.5);color:#000; }
  62. input.button-primary:hover,input.button-primary:focus {
  63. background:rgba(255, 255, 255, 0.8);color:#000; }
  64. input.button-primary:active{
  65. background:rgba(255, 255, 255, 0.2);color:#000; }
  66. .login form .forgetmenot {
  67. font-weight:normal;
  68. float:none;
  69. margin-top:-10px;
  70. }
  71. .login #nav, .login #backtoblog {text-shadow:none;float:rightright;margin:0 30px 0 0px;padding:16px 0px 0 20px;}
  72. .login #nav a, .login #backtoblog a{color:#FFF!important;text-decoration:none;}
  73. .login #nav a:hover, .login #backtoblog a:hover{color:#444!important;text-decoration:none;}
  74. div.error, .login #login_error {display:none;}
  75. div.updated, .login .message {background-color: #E0FFE1;border-color: #ACE655;}
  76. .wumii-footer{display:none !important;}

其中，第三行的三个图片地址改为你想要的背景图片地址名称（背景图片尺寸最好是1920*1080），第四行改成你的 logo图片地址名称即可。当然你如果想继续使用 wordpress 的 logo 也很好，在这里：

wordpress-logo透明图片

至此操作完成后，再到你的 wordpress 网站后台登录界面看看，是不是感觉完全不一样了。

 

标签：

转载请注明链接地址：荐爱小站 » 分享 WordPress 后台登录界面自定义美化的代码

赞 (4) 赏 ！

相关推荐

精选推荐

 最新文章

 热门标签

 随机文章

觉得文章有用就打赏一下吧，赠人玫瑰手有余香！

支付宝扫一扫打赏

微信扫一扫打赏