WordPress

自定义wordpress登录界面

LensNews

登录界面设计

远方的雪山虽然设置了前台登录,但偶尔也会从后台界面登录,有时为客户做了一些网站不需要集成这一功能,所以看的久了,难免产生视觉疲劳。

wordpress后台登录界面也没有自定义的功能设置,虽然有插件可行,但总是不想用插件。

方法其实很简单,向functions.php添加函数,然后调用css即可,就两部分代码,而界面的设计就靠个人的感觉。

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

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

  1. //远方的雪山自定义后台登录界面
  2. function custom_login() {
  3. echo '<div id="header">
  4.   <div><a href="'.get_home_url().'" title="'.get_bloginfo( 'name' ).'" class="logo_c"></a></div>
  5.   <div id="topmenu">
  6.     <a href="'.get_home_url().'" title="'.get_bloginfo( 'name' ).'">'.get_bloginfo( 'name' ).'</a>
  7.   </div>
  8. </div>
  9. <div id="salong">
  10.   <div id="sll">
  11.     <h1>'.get_bloginfo( 'name' ).'</h1>
  12.     <p>'.get_bloginfo('description').'</p>
  13.   </div>
  14. </div>
  15. <div id="footer-bottom">
  16.   <div id="footer-bottom-container">
  17.       <div class="sleft">Copyright &copy; 2013. <a href="'.get_home_url().'" title="'.get_bloginfo( 'name' ).'">'.get_bloginfo( 'name' ).'</a>.版权所有&nbsp;Design by <a target="_blank" href="https://yfdxs.com">萨龙龙</a></div>
  18.   </div>
  19. </div>
  20. <div id="login_n"></div>
  21. <div id="loginBg"></div>
  22.  '; }
  23. add_action('login_body_class', 'custom_login');
  24. //向body中添加一些标签,方便设置页面
  25. function fixed_login() {
  26. echo '<link rel="stylesheet" tyssspe="text/css" href="' . get_bloginfo('template_directory') . '/includes/login/login.css" />'; }
  27. add_action('login_head', 'fixed_login');
  28. //引入自定义的css文件,自定义的css样式优先于wp样式

第二部,在函数中调用的样式文件login.css中添加如下代码(样式做了更改,把之前隐藏的登录界面中的返回站点、注册与忘记密码三个按钮显示出来):

  1. #header { background:#fffheight:48pxwidth: 100%; box-shadow:2px 2px 5px #333position:relativez-index:999; }
  2. body.login { -webkit-text-size-adjust:nonebackground:url(login_bg.jpg) no-repeatfont-familyVerdana,sans-serifbackground-size: cover; }
  3. .logo_c{ background:url(logo_h.png) no-repeatdisplay:block !important; float:leftwidth:40pxheight:40pxmargin:4px 16px; }
  4. #topmenu { float:rightrightmargin:12px 20px 0 0; widthautodisplay:block}
  5. #topmenu a { color#000text-decorationnone; }
  6. #topmenu a:hover { color:#f60; }
  7. #salong { height120pxmargin: 0 autowidth960pxpadding: 0; }
  8. #sllpadding-left420pxpadding-top65px; }
  9. #sll p,#sllh1 { margin-left:-320pxcolor:#fffline-height:32px; }
  10. #sll h1 { letter-spacing:8pxwidth320px; }
  11. #sll p { letter-spacing:2pxfont-size14pxwidth420px; }
  12. #wp-submit { border:nonedisplay:inline-blockheight:26pxline-height:26pxpadding:0 12pxfont-size:12pxcolor:#fffmin-width:48pxtext-align:centerborder-radius:2px}
  13. #wp-submit { background-color:#1E7BB3background-image:-webkit-linear-gradient(top#3999D2#1E7BB3); background-image:-moz-linear-gradient(top#3999D2#1E7BB3); background-image:-ms-linear-gradient(top#3999D2#1E7BB3); border-bottom:1px solid #02598Ecursor:pointer; }
  14. #wp-submit:hover { background:#3275a8color:#fff}
  15. .login form .input:focus, .login input[type="text"]:focus { border-color:#3999D2; box-shadow:0 0 3px #1E7BB3}
  16. #footer-bottombottom { background:#000; opacity:0.8; border-bottom8px solid #FFFFFFclearbothcolor#999999height:40pxpositionfixedwidth: 100%; z-index: 100; bottombottom:0; line-height32px; }
  17. #footer-bottombottom-container { margin: 0 autowidth960pxoverflowhiddenpadding: 0; positionrelativez-index: 100; }
  18. .sleft { color:#ccctext-align:center; }
  19. #footer-bottombottom a { color:#dddtext-decoration:none}
  20. #footer-bottombottom a:hover { color:#f90; }
  21. #login { overflow:hiddenposition:relativez-index:999; rightright:220pxpadding:0; float:rightright; }
  22. .login form { width:240pxfloat:rightrightbackground:noneborder:none; box-shadow:nonepadding8px 24px 12px; }
  23. .login h1 a { backgroundurl(logo.png) no-repeatfloatleftheight:56pxpositionrelativewidth:175pxdisplay:none}
  24. .login #nav, .login #backtoblog { text-shadownonemargin-left42px; }
  25. .login #nav a, .login #backtoblog a{ color#fff !important; text-decorationnone; }
  26. #loginBg{ background:#000000height500px; opacity: 0.6; positionabsoluterightright:220pxtop: 0; width287pxz-index: 99; }
  27. #login_n{ background:url(login_n.png) no-repeatheight:93pxpositionabsoluterightright:280pxtop:46pxwidth:168pxz-index:999; }
  28. #user_login,#user_pass,.login form .input, .login input[type="text"]{ background:nonecolor:#fffborder:1px solid #3999D2font-size:18px; }
  29. #login_error,.message{ width:240pxfloat:rightrightmargin:0 8pxbackground:none !important; border:none !important; color:#f00margin: 0 12px 12px 8px !important; }
  30. #login_error a,body, #wpbody, .form-table .pre, .ui-autocomplete li a,.login label{ color:#fff; }

具体效果可以看远方的雪山后台登录界面,有好的建议可以给我留言。

(0)

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

LensNews

热评文章

发表评论

评论: 18 条评论,访客:9 条,博主:7 条 ,当前引用:2 条

  • 墨尘
    墨尘 发布于:  回复

    折腾一上午都没搞定 可不可把login.css源文件发给我

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

      都是一样的,你可以搜索《自定义wordpress登录界面(第二版)》这篇文章,提供整个文件下载。

  • WallE
    WallE 发布于:  回复

    很好看,又专业又漂亮,有时间了,我也搞一个

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

      根据不同的网站定义后台登录界面,感觉还是不错。

  • 艾因
    艾因 发布于:  回复

    这个很强大,可惜我没弄成。。。

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

      这个不是很难,是什么原因没有实现?

  • 醉卧烟雨
    醉卧烟雨 发布于:  回复

    雪山,你看我的怎么成这样了!我把代码都加到了两个文件的末尾,但是成这样了!http://blog.cctv.com.im/wp-login.php

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

      很高兴你采纳了,也感谢你留了萨龙龙的链接。

  • 苦太狼
    苦太狼 发布于:  回复

    这登录界面不错….

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

      呵呵,你的这个网站ashuwp.com里面的教程很好,正在看!

      • 不会弄
        不会弄 发布于:  回复

        看不懂,可以教我吗

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

          已经写的很明白了,看不懂我也没办法

当前外部引用:2 条

  • HTML5/CSS3响应式Salong主题 | 远方的雪山
  • 自定义wordpress登录界面(第二版) | 远方的雪山