WordPress

自定义wordpress登录界面(第二版)

LensNews

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

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

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

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

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

第二步,添加CSS样式:

  1. /*************后台新加入的CSS样式*************/
  2. html{
  3.     backgroundnone !important;
  4. }
  5. .logo-main{
  6.     displayblock;
  7.     height46px;
  8.     margin36px auto 0 auto;
  9.     text-aligncenter;
  10.     overflowhidden;
  11. }
  12. .logo-main a{
  13.     color#fff;
  14.     text-shadow2px 2px 3px rgba(0,0,0,.4);
  15.     font-size42px;
  16.     line-height42px;
  17.     font-family"微软雅黑";
  18.     text-decorationnone;
  19.     font-weightbold;
  20. }
  21. /*隐藏默认LOGO*/
  22. #login > h1{
  23.     displaynone;
  24. }
  25. /*默认LOGO样式*/
  26. .login h1 a{
  27.     backgroundnone;
  28.     font-size30px;
  29.     text-indent1px;
  30.     displayinline;
  31. }
  32. #login{
  33.     padding: 0;
  34. }
  35. /*背景样式*/
  36. body.login{
  37.     background-imageurl(login_bg.jpg);/*背景图片与login.css样式在同一目录下*/
  38.     -webkit-background-size: cover;
  39.     background-size: cover;
  40.     background-positioncenter;
  41.     background-repeatno-repeat;
  42.     overflowhidden;
  43. }
  44. /*表单样式*/
  45. .login form{
  46.     background-color: rgba(255, 255, 255, 0.4);
  47.     border1px 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.     bordernone;
  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.     bordernone;
  72.     padding2px 8px;
  73.     color#fff;
  74.     cursorpointer;
  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.     displaynone;
  93. }

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

  1. // 后台登录界面
  2. include("includes/login/login.php");

远方的雪山的后台登录界面是使用本文章中的样式,这一版不会有什么问题,希望你能喜欢。

(0)

本文由 远方的雪山 作者:萨龙龙 发表,转载请注明来源!

LensNews

热评文章

发表评论

评论: 15 条评论,访客:10 条,博主:5 条

  • 凯凯
    凯凯 发布于:  回复

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

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

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

  • 大刀
    大刀 发布于:  回复

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

  • 大刀
    大刀 发布于:  回复

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

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

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

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

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

  • aunsen
    aunsen 发布于:  回复

    这个确实好看多了!

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

      嗯,最重要的是响应式

  • Louis Han
    Louis Han 发布于:  回复

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

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

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

      • 雅岚
        雅岚 发布于:  回复

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

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

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