f
wordpress非插件个性化登录页面
wordpress非插件个性化登录页面
二呆 3年前 (2017-09-05) wordpress教程  #wordpress# 
浏览:2044

引言:此文由子域名转移而来,因为细微强迫症和放弃子域名而不舍得完全丢弃,所以将会逐步第二次转移文章到主域名上来,二者主题(阿里白秀和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; }

 


关于本站产品
模板插件 普通粉丝 真爱粉丝
下载/获取
更新 ×
修复 ×
问答 ×
加入方法 加粉丝群(得单一产品) 加入星球(得所有产品)

推荐阅读
  • 插件截图:插件简介:TleUCenterForWordpress是一个用户中心插件,放置于前台网页的左下角,供用户登陆/管理只用,使用邮箱验证码登陆,登陆之后在使用TleWeiboForWordPressV2.0微博主题的情况下,可以显示微博列表、文章列表、评论列表,也可...
  • 插件截图:插件介绍:TleLiveCtrlForWordpress是一个基于Kplayer的直播遥控器插件,也可以叫做KplayerForWordPress插件,支持多平台直播推流,进行积分点播、查询、跳过等功能,支持Payjs微信、支付宝支付,是一个可以24小时直播推流的...
  • 主题截图:主题简介:一款Wordpress版本的TleWeiboForWordPress电脑/手机版微博主题使用方法:将本主题里的所有文件放在您网站目录的wp-content/themes内,注意文件夹名字必须为TleWeibo或TleWeiboWap。...
  • 插件介绍:本插件可以隐藏文章中的任意部分内容,当访客付费后,可查看隐藏内容,当前版本支持payjs微信支付。安装方法:第一步:下载本插件,放在 wp-content/plugins/ 目录中(插件文件夹名必须为WeMedia);第二步:激活插件;第三步:填写配置;第四...
  • 现已更新至用环信实现的全新的即时聊天插件,并WordPress、Typecho、Emlog版本即时聊天插件均已支持前台环信聊天。最新版本详情:前台环信即时聊天(以Typecho为例)WordPress版本(以V5.0为例)Typecho版本(以V1.2为例)Eml...

o p
Ú