A-A+

修改wordpress登陆界面

2015年07月18日 技术分享, 电脑网络, 网站建设 评论 4 条 阅读 9,915 次

本方法来源于网络”远方的雪山“，本人做了修改并应用于本站，现记录下来供大家参考。

wp-denglu第一步，向主题functions.php函数文件的最后一个“?>”添加代码：

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

第二步，在主题目录下的includes文件夹（或者主题其它目录下，只要函数中调用CSS样式的路径正确就行）新建一个存放自定义后台界面的样式和图片的文件夹login文件夹，主要是方便以后再次利用，如果嫌麻烦就到文章下面下载login文件夹。

然后在该文件夹中放置你喜欢的或者你做好的背景图，新建样式文件login.css代码如下：

  1. /*************后台新加入的CSS样式*************/ 本站效果注销掉了 表单样式跟背景样式前面的代码
  2. html{
  3.     background: none !important;
  4. }
  5. .logo-main{
  6.     display: block;
  7.     height: 46px;
  8.     margin: 36px auto 0 auto;
  9.     text-align: center;
  10.     overflow: hidden;
  11. }
  12. .logo-main a{
  13.     color: #fff;
  14.     text-shadow: 2px 2px 3px rgba(0,0,0,.4);
  15.     font-size: 42px;
  16.     line-height: 42px;
  17.     font-family: "微软雅黑";
  18.     text-decoration: none;
  19.     font-weight: bold;
  20. }
  21. /*隐藏默认LOGO*/
  22. #login > h1{
  23.     display: none;
  24. }
  25. /*默认LOGO样式*/
  26. .login h1 a{
  27.     background: none;
  28.     font-size: 30px;
  29.     text-indent: 1px;
  30.     display: inline;
  31. }
  32. #login{
  33.     padding: 0;
  34. }
  35. /*背景样式*/
  36. body.login{
  37.     background-image: url(login_bg.jpg);/*背景图片与login.css样式在同一目录下*/
  38.     -webkit-background-size: cover;
  39.     background-size: cover;
  40.     background-position: center;
  41.     background-repeat: no-repeat;
  42.     overflow: hidden;
  43. }
  44. /*表单样式*/
  45. .login form{
  46.     background-color: rgba(255, 255, 255, 0.4);
  47.     border: 1px 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.     border: none;
  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.     border: none;
  72.     padding: 2px 8px;
  73.     color: #fff;
  74.     cursor: pointer;
  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.     display: none;
  93. }

新建login.php，因为本文的第一步在functions.php函数文件中要调用此文件。代码如下：

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

本站效果注销掉了从function开始至add_action('login_body_class', 'custom_login');后结束，各位伙伴可按以上方法照搬，但效果是表单样式上获取的站点文字logo信息，如不喜欢login.php文件中的代码4-10获取站点文字logo效果想与本站效果相同的需注销掉这几行代码，并结合 修改WordPress登录Logo 一文以及注释掉login.css样式文件中的2-34行代码。

最后如果大家测试发现有任何问题可留言或在本站右侧订阅处更多联系方式与我联系。
login文件下载

标签：

4 条留言  访客：0 条  博主：0 条

  1. 小幻 2015年08月04日 下午5:44  沙发  回复

给我留言

icon_question icon_razz icon_sad icon_evil icon_exclaim icon_smile icon_redface icon_biggrin icon_surprised icon_eek icon_confused icon_cool icon_lol icon_mad icon_liuhan icon_rolleyes icon_wink icon_idea icon_arrow icon_neutral icon_cry icon_mrgreen icon_qinqin icon_bizui

×
订阅图标按钮