同乐儿

  1. 首页
  2. wordpress教程
wordpress非插件个性化登录页面
发布 | 2年前 (2017-09-05) | 阅读数:940 | 评论数: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教程 的文章

分享至:


发表我的评论
取消评论

表情
  • 121 评论
  • 212 粉丝
  • 139 文章
  • 最新文章
    diamond于2019-04-26 22:17:16发表:WeMediaForEmlog付费阅读自媒体插件(支持payjs微信支付)插件截图:插件介绍:本插件可以隐藏文章...
    diamond于2019-04-23 00:22:41发表:TleBarragerForTypecho评论弹幕插件插件介绍:为Typecho增加评论弹幕功能使用方法:第一...
    diamond于2019-04-02 00:26:53发表:原创:WeMediaForWordPress付费阅读插件(支持免登录SPay+payjs微信支付)插件介绍:本插件可以隐藏文章中的任意部分内容,当访客付费后,可...
    diamond于2019-03-10 14:16:16发表:仿站:miaopaiForEmlog秒拍主题模板# 模板截图- 用户登陆截图- 首页截图- 文章页截图...
    diamond于2019-02-26 15:53:01发表:仿站:inkerForTypecho映客主题模板# 模板截图- 电脑版 综合截图- 电脑版 文章截图(此截图只...

    • 同乐儿
    • 北京 朝阳区
    • 2018年8月1日
    • 欢迎前往这里http://mb.yjz.top/web/sites/template挑选精美网站后联系微信Diamond0419购买~
    • 查看更多 >
    随机热门
    标签
    wordpress (82) 原创 (29) wordpress优化 (26) wordpress主题 (24) wordpress插件 (22) Typecho (19) wordpress教程 (18) wordpress seo (17) Typecho插件 (15) 博客主题 (8) emlog (8) emlog插件 (7) wordpress维护 (6) CMS主题 (5) 企业主题 (4) DNSPod for emlog (3) 淘宝客主题 (3) 修订版本 (3) 自动保存 (3) 移动适配 (3)
    阿里图床

    阿里图床