首页 > WordPress > 自定义WordPress的登录页面

自定义WordPress的登录页面

2011年11月12日

  自定义你的WordPress博客登录/注册页面以获得更好的用户体验,用简单的代码片段编辑,无需使用任何插件。


        打开你的主题的functions.php文件,并粘贴以下代码:

  1. function custom_login() {
  2. echo ‘<link rel=”stylesheet” type=”text/css” href=”‘ . get_bloginfo(‘template_directory’) . ‘/custom-login.css” />’;
  3. }

复制代码

        现在创建一个CSS文件,在你的主题目录名称下创建login.css,您可以用各种标签的样式属性来定制你的WordPress登录页面的外观。

你可以用下面的示例CSS文件:

  1. /* Custom WordPress Login Page Style */
  2. /* Page Background */
  3. html {
  4.         background: #eae2d5 url(bgi-mage-path);
  5.         margin: auto;
  6.         font-weight:bold;
  7. }
  8. /* WordPress Logo Replacement (Don’t forget to change width and height */
  9. h1 a {
  10.         background:url(logo-path) 0 0 no-repeat;
  11.         width:290px;
  12.         height:150px;
  13.         margin-left: 10px;
  14.         margin-bottom: 0px;
  15.         padding-bottom: 0px;
  16. }
  17. /* Top Bar Background Color */
  18. body.login {
  19.         border-top-color:#dac6ad;
  20. }
  21. .message {
  22.         margin-bottom: 0px;
  23. }
  24. /* Login Button */
  25. #wp-submit {
  26.         background: #bc3d1d;
  27.         border: #f24643;
  28. }
  29. /* Lost Password Link */
  30. .login #nav a, .login #nav a:hover {
  31.         color: #443030!important;;
  32. }
  33. /* Top Bar Link */
  34. .login p#backtoblog a:link, .login p#backtoblog a:visited {
  35.         color:#443030;
  36.         font-weight: bold;
  37. }
  38. .login p#backtoblog a:hover, .login p#backtoblog a:active {
  39.         color:#443030;
  40.         text-decoration:underline;
  41. }

复制代码

       下载css文件:login.css
        怎么不能上传附件:贴在下面,

  1. /* Custom WordPress Login Page Style */
  2. /* By whl [url]www.nihaotibet.com[/url] */
  3. /* Page Background */
  4. html {
  5.         background: #eae2d5 url(bgi-mage-path);
  6.         margin: auto;
  7.         font-weight:bold;
  8. }
  9. /* WordPress Logo Replacement (Don’t forget to change width and height */
  10. h1 a {
  11.         background:url(logo-path) 0 0 no-repeat;
  12.         width:290px;
  13.         height:150px;
  14.         margin-left: 10px;
  15.         margin-bottom: 0px;
  16.         padding-bottom: 0px;
  17. }
  18. /* Top Bar Background Color */
  19. body.login {
  20.         border-top-color:#dac6ad;
  21. }
  22. .message {
  23.         margin-bottom: 0px;
  24. }
  25. /* Login Button */
  26. #wp-submit {
  27.         background: #bc3d1d;
  28.         border: #f24643;
  29. }
  30. /* Lost Password Link */
  31. .login #nav a, .login #nav a:hover {
  32.         color: #443030!important;;
  33. }
  34. /* Top Bar Link */
  35. .login p#backtoblog a:link, .login p#backtoblog a:visited {
  36.         color:#443030;
  37.         font-weight: bold;
  38. }
  39. .login p#backtoblog a:hover, .login p#backtoblog a:active {
  40.         color:#443030;
  41.         text-decoration:underline;
  42. }

复制代码

        做成这样好看吗?

wordpress login pic

wordpress login pic

 

 

        希望大家都能做出个性的登录页面,如果有做成的,晒一晒哦

WordPress 浏览618 次

本文的评论功能被关闭了.