WordPress

自定义wordpress登录界面（第二版）

萨龙龙萨龙龙 WordPress 10 年前
2.15W 15
LensNews

自定义wordpress登录界面远方的雪山在13年5月就写了《自定义wordpress登录界面》的文章，但当时只是为了界面的个性化，而没有考虑到实质性的东西，使用时得修改一些内容，也产生了一些不必要的代码。

时下流行的响应式设计在第一版中也没有设计出来，第二版萨龙龙很早就修改好，方法与第一版一样，只是在WP默认的界面上重新设计，去除默认的LOGO，添加了响应式的全屏背景，以及设计了下表单。

修改之前，我们还是在主题目录下的includes文件夹（或者主题其它目录下，只要函数中调用CSS样式的路径正确就可以）下新建一个存放自定义后台界面的样式和图片的文件夹login，方便以后再次利用，怕麻烦就到文章下面下载login文件夹。

第一步，向主题functions.php函数文件的最后一个“?>”添加代码：

  1. // 远方的雪山自定义后台登录界面
  3. //向body中添加一些标签，方便设置页面
  4. function custom_login() {
  5. echo '<!-- 网站Logo -->
  6.     <div class="logo-main">
  7.       <a class="logo" href="'. get_home_url() .'" title="'. get_bloginfo('name') .' | '. get_bloginfo('description') .'">'. get_bloginfo('name') .'</a>
  8.     </div>
  9.     <!-- 网站Logo end --> '; }
  10. add_action('login_body_class', 'custom_login');
  11. //引入自定义的css文件，自定义的css样式优先于wp样式
  12. function fixed_login() {
  13. // 下面载入的样式路径不能出错了
  14. echo '<link rel="stylesheet" tyssspe="text/css" href="' . get_bloginfo('template_directory') . '/includes/login/login.css" />'; }
  15. add_action('login_head', 'fixed_login');

第二步，添加CSS样式：

  1. /*************后台新加入的CSS样式*************/
  2. html{
  3.     background: none !important;
  4. }
  5. .logo-main{
  6.     display: block;
  7.     height: 46px;
  8.     margin: 36px auto 0 auto;
  9.     text-align: center;
  10.     overflow: hidden;
  11. }
  12. .logo-main a{
  13.     color: #fff;
  14.     text-shadow: 2px 2px 3px rgba(0,0,0,.4);
  15.     font-size: 42px;
  16.     line-height: 42px;
  17.     font-family: "微软雅黑";
  18.     text-decoration: none;
  19.     font-weight: bold;
  20. }
  21. /*隐藏默认LOGO*/
  22. #login > h1{
  23.     display: none;
  24. }
  25. /*默认LOGO样式*/
  26. .login h1 a{
  27.     background: none;
  28.     font-size: 30px;
  29.     text-indent: 1px;
  30.     display: inline;
  31. }
  32. #login{
  33.     padding: 0;
  34. }
  35. /*背景样式*/
  36. body.login{
  37.     background-image: url(login_bg.jpg);/*背景图片与login.css样式在同一目录下*/
  38.     -webkit-background-size: cover;
  39.     background-size: cover;
  40.     background-position: center;
  41.     background-repeat: no-repeat;
  42.     overflow: hidden;
  43. }
  44. /*表单样式*/
  45. .login form{
  46.     background-color: rgba(255, 255, 255, 0.4);
  47.     border: 1px rgba(255,255,255,.3) solid;
  48.     -webkit-box-shadow: none;
  49.     -moz-box-shadow: none;
  50.     box-shadow: none;
  51. }
  52. #loginform .input{
  53.     background-color: rgba(0, 0, 0, 0.2);
  54.     -webkit-transition: ease-in-out .5s;
  55.     -moz-transition: ease-in-out .5s;
  56.     -ms-transition: ease-in-out .5s;
  57.     -o-transition: ease-in-out .5s;
  58.     transition: ease-in-out .5s;
  59.     border: none;
  60.     color: #333;
  61. }
  62. #loginform .input:focus{
  63.     background-color: #0af;
  64.     color: #fff;
  65. }
  66. .login label{
  67.     color: #333;
  68. }
  69. .login .button-primary{
  70.     background-color: #666;
  71.     border: none;
  72.     padding: 2px 8px;
  73.     color: #fff;
  74.     cursor: pointer;
  75.     -webkit-transition: ease-in-out .5s;
  76.     -moz-transition: ease-in-out .5s;
  77.     -ms-transition: ease-in-out .5s;
  78.     -o-transition: ease-in-out .5s;
  79.     transition: ease-in-out .5s;
  80. }
  81. .login .button-primary:hover{
  82.     background-color: #0af;
  83. }
  84. .login #nav a, .login #backtoblog a{
  85.     color: #333;
  86. }
  87. .login #nav a:hover, .login #backtoblog a:hover{
  88.     color: #0af;
  89. }
  90. /*隐藏错误*/
  91. #login_error{
  92.     display: none;
  93. }

最后还是附上萨龙龙修改后的文件夹login，下载解压放在主题includes目录下，如果放在其它目录也没有问题，只需要修改login.php文件中调用login.css的路径，然后在主题functions.php函数文件的最后一个“?>”添加代码：

  1. // 后台登录界面
  2. include("includes/login/login.php");
远方的雪山的后台登录界面是使用本文章中的样式，这一版不会有什么问题，希望你能喜欢。
赞(3)
赏

本文由 远方的雪山 作者：萨龙龙 发表，转载请注明来源！

关键词：,
萨龙龙

萨龙龙

 文章：290 画廊：33 视频：37

一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！

相关文章

LensNews

热评文章

评论：

15 条评论，访客：0 条，博主：0 条
  1. 凯凯
    凯凯发布于： 
    回复

    背景图片可以调用必应的，每天同步更新

    • 萨龙龙
      萨龙龙发布于： 
      回复

      现在都不开放后台注册，感觉登录页面不需要再优化，现在干脆使用默认的。

  2. 大刀
    大刀发布于： 
    回复

    我的主题按您的方法怎么不行呢 是不是一定要响应式主题才能呢，我的主题不是响应式的

  3. 大刀
    大刀发布于： 
    回复

    我们现在用的桌面主题不是响应式的，按您的方法弄之后，出现错误 一定要响应式的主题才能弄吗

  5. 张衡Henry
    张衡Henry发布于： 
    回复

    很漂亮，尤其是看到了你的新LOGO，太帅了。

    • 萨龙龙
      萨龙龙发布于： 
      回复

      哈哈，这个也是花了很长的时间才想到这个方案。

      • 张衡Henry
        张衡Henry发布于： 
        回复

        很不错，不白花时间

  6. 欧式婚纱照
    欧式婚纱照发布于： 
    回复

    这个还真没试过，马上实践看看

  7. aunsen
    aunsen发布于： 
    回复

    这个确实好看多了！

    • 萨龙龙
      萨龙龙发布于： 
      回复

      嗯，最重要的是响应式

  8. Louis Han
    Louis Han发布于： 
    回复

    看起来确实很醒目啊 会不会吸引spam呢

    • 萨龙龙
      萨龙龙发布于： 
      回复

      这方面没有想到，应该不至于，WP的后台地址谁都知道

      • 雅岚
        雅岚发布于： 
        回复

        界面么,懒得动了..吾倒是一直想改下登陆地址,怎奈几次都以失败告终,结果还是有TMD许多黑客….

        • 萨龙龙
          萨龙龙发布于： 
          回复

          后台地址我也想改，但没有找到好的方法。

发表回复