同乐儿

  1. 首页
  2. wordpress教程
wordpress非插件个性化登录页面
发布 | 2年前 (2017-09-05) | 阅读数:709 | 评论数:0 | 来源:同乐儿

引言:此文由子域名转移而来,因为细微强迫症和放弃子域名而不舍得完全丢弃,所以将会逐步第二次转移文章到主域名上来,二者主题(阿里白秀和D8)均来自大前端,追求完美的同时有一丝小懒,主题就不换了,D8主题用起来挺好。

虽然本站有前台登录,但有时也会后台登录,所以有必要进行wordpress非插件个性化登录页面设置。

插件版:wordpress个性化登录页面插件:Branded Login Screen汉化版,可对于有“洁癖”的站长,肯定不喜欢用插件,下面再来分享非插件的自定义登录页面的方法,如果需要,你还可以自定义css样式,打造自己的wordpress后台个性化登录页面。

方法很简单,总共分两步,用到function.php和css文件即可,至于文件放哪,随便你吧。

注:css中用到的背景图片样式需要自己自定义哦~

1、添加以下代码到function.php中

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

2、将以下代码添加到新建的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-serifbackgroundsize: cover; }
  3. .logo_c{ background:url(logo_h.png) no-repeatdisplay:block !important; float:leftwidth:40pxheight:40pxmargin:4px 16px; }
  4. #topmenu { float:rightright; margin: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. #sall { padding-left420pxpadding-top65px; }
  9. #sall p,#sall h1 { margin-left:-320pxcolor:#fffline-height:32px; }
  10. #sall h1 { letter-spacing:8pxwidth320px; }
  11. #sall p { letter-spacing:2pxfont-size14pxwidth420px; }
  12. #wp-submit { border:nonedisplay:inlineblockheight: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:rightright; background: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; positionabsolute; rightright:220pxtop: 0; width287pxz-index: 99; }
  27. #login_n{ background:url(login_n.png) no-repeatheight:93pxpositionabsolute; rightright: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:rightright; margin: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; }

 


如果觉得该作者的文章对你有帮助,请随意打赏给他。您的支持将鼓励作者继续创作!
打赏
X
打赏本文作者方式

微信扫一扫可留言


继续浏览有关 wordpress,wordpress优化,wordpress教程 的文章

分享至:


发表我的评论
取消评论

表情
  • 119 评论
  • 174 粉丝
  • 136 文章
  • 最新评论
    二呆说:在公众号回复这个关键字就有了~
    222说:1803验证
    二呆说:看见岛有了点信号,我用的时候就是看对应网...
    123123123说:我试过了,没改成功,不着急用,看了qur...
    二呆说:6.0应该也行,时间太长忘记了,好像6....

    • 同乐儿
    • 北京 朝阳区
    • 2018年8月1日
    • 如有仿站或其他事宜联系微信:Diamond0419
    • 查看更多 >
    随机热门
    标签
    wordpress (81) wordpress优化 (26) 原创 (26) wordpress主题 (24) wordpress插件 (21) wordpress教程 (18) Typecho (18) wordpress seo (17) Typecho插件 (14) 博客主题 (8) emlog (7) emlog插件 (6) wordpress维护 (6) CMS主题 (5) 企业主题 (4) DNSPod for emlog (3) 淘宝客主题 (3) 修订版本 (3) 自动保存 (3) 移动适配 (3)