WordPress后台登录页面美化

  • A+
所属分类:wp教程

我想应该没有多少人喜欢Wordpress的后台注册登录页面login.php,那么定制一个不一样的登录页页面已经成为广大博主迫不及待的一件事情了,下面耕博以自己的总结的各种方法,来告诉大家如何打造一个完美的Wordpress后台登录页面。

方法一:插件美化

先推荐一个不错的插件wplogin pro,想手动修改WordPress登录页面美化,但是无奈术业有专攻,亦或是根本就懒得动手,现在介绍的这款WordPress登录页面美化插件WPLogin Pro就可以帮到你,轻松美化你的WordPress登录页面,这款插件除了提供20款默认的背景图片之外,还可以自己上传背景!是不是有点心动了?

WordPress后台登录页面美化

插件使用说明:

1、下载wordpress插件wploginpro,解压压缩包后,选择相应wordpress版本的wploginpro插件,并把插件文件夹上传到wp-content/plugins/目录下

WPLogin Pro V3.1.x.zip(适用于Wordpress3.1的相关版本)

WPLogin Pro V3.2.x.zip(适用于Wordpress3.2的相关版本)

2、登陆wordpress博客后台,在已安装插件列表中启用wploginpro插件,这时侧栏生成了个“wplogin Pro”选项,点击进入设置插件

WordPress后台登录页面美化

方法二:代码美化:

尽管使用插件是一个非常不错的方法,但是如果能用代码解决的话,我想还是有很多人愿意折腾的吧。

1、首先,我们先自定义Wordpress后台陆界面中默认的WPLogo图标,最简单的方法是把其原本调用的logo图片替换为自己的logo图片即可。

操作方法:在wordpress根目录的wp-admin/images文件夹中找到logo-login.gif文件,替换为自己准备好的logo-login.gif图片即可

2、其次,我们在自定义wordpress后台登陆界面logo链接。在当前主题模板的functions.php文件添加以下代码:

  1. //自定义登陆logo的url
  2. add_filter( 'login_headerurl', 'custom_loginlogo_url' );
  3. function custom_loginlogo_url($url) {
  4.     return 'https://jswp.org';
  5. }

把其中https://jswp.org更改为自己需要转向的url地址即可。

3、最后,我们再用代码定义登陆页面CSS样式,在当前主题目录创建一个文件夹,命名为login;在login文件夹中创建一个css文件,命名为login.css;然后再创建一个文件夹,命名为images。

把自定义登陆界面需要用到的图片保存到images文件夹,对创建的login.css文件进行编辑,添加以下css样式代码:

  1. * {margin:0; padding:0;}
  2. html {background:none;}
  3. body.login {position:relativebackground:#fff url('images/loginbg.png') left top repeat-x; font-family:TahomaArialsans-serifmin-width:960pxwidth:expression_r(document.body.clientWidth < 960? "960px":"auto");}
  4. img {border:0;}
  5. #login {width:960pxmargin:0 auto;}
  6. .login h1 a {margin:126px auto 0pxbackground:url(images/logo.gif) no-repeatwidth:185pxheight:62px;}
  7. .login form {float:nonewidth:70%; border:nonemargin:0; box-shadow:nonebackground:nonemargin:40px auto 0; clear:bothpadding:0; overflow:hidden;}
  8. #login form p {float:leftdisplay:inline;}
  9. .login form .forgetmenot  {clear:bothpadding-top:5px;}
  10. .login label {float:leftpadding:5pxdisplay:inlinemargin-left:40pxfont-size:13pxcolor:#000margin-right:10px;}
  11. .login form .input {border:1px solid #D3D3D3color:#555padding:5pxfont-size:12pxwidth:260pxmargin:4px 0 0 0; background:none; box-shadow:noneheight:28pxline-height:28px;}
  12. .login form .forgetmenot label {color:#666;}
  13. #login form p.submit {float:rightrightpadding:3px 10px; }
  14. #login form p.submit .button-primary{color:#ffffont-size:12pxborder:1px solid #555display:inlinemargin-right:36pxbackground:url(images/rep1.png) repeat-x scroll 50% 50% transparent; box-shadow:none;}
  15. .login #nav,#backtoblog {display:inlinewidth:45%; text-align:centerfloat:left;}
  16. .login #nav a,.login #backtoblog a {text-decoration:none;}
  17. .login .message {width:70%; text-align:centermargin:0 auto;}
  18. #footer {clear:bothwidth:960pxmargin:0 autopadding-top:60pxcolor:#999font-size:11pxfont-family:Arial;}
  19. #footer a {color:#999;}
  20. #footer .copyright {width:70%; text-align:centermargin:0 auto;}

在当前主题的functions.php文件添加以下代码调用自定义的css样式文件:

  1. function custom_login() {
  2.     echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory'). '/login/login.css" />';
  3. }
  4. add_action('login_head', 'custom_login');

最后保存文件,刷新一下登陆界面即可。

方法三:一个代码解决

对于懒得动手的博主,可以直接下载附件解压上传至主题目录下(此代码出至博客吧boke8.net,效果同最上面的截图),

替换login/images/logo.gif图片,上传到当前主题的目录;然后在functions.php添加调用代码:

  1. include('login/login.php');
weinxin
我的微信
这是我的微信扫一扫
SJ

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: