纯代码美化WordPress默认登录页二

  • 纯代码美化WordPress默认登录页二已关闭评论
  • 1,639 次浏览
  • A+
所属分类：网站相关

注意：本站启用了缓存系统，如果你的账户登陆不了，那是因为缓存导致，刷新再登陆一次即可。如还不行，只需打开任意一篇文章，然后登陆即可。本站独家汉化、原创汉化，所有发布软件均为中文，非汉化或中文软件一律不收录不发布。如果你有需要的软件下载不到，或者下载了没有汉化。可以申请本站汉化，私信本站即可，仅对本站VIP会员开放。

纯代码美化WordPress默认登录页二 由 心语家园（https://www.xinyucn.cc/）独家或原创发布，你可通过右上角“私信本站”联系我们。

WordPress登录的初始页面感觉非常的丑，而又不想使用主题自带的登录页面，所以把Blog的登录页面进行了美化，觉得挺好看的，于是分享给大家美化方法。

登录页面的美化效果

首先打开你主题的functions.php文件，在最后添加上以下代码：

  1. /**
  2. * WordPress 登录界面美化
  3. **/
  4. function custom_login_style() {
  5. echo ‘<link rel=”stylesheet” id=”wp-admin-css” href=”‘.get_bloginfo(‘template_directory’).‘/admin-style.css” type=”text/css” />’;
  6. }
  7. add_action(‘login_head’, ‘custom_login_style’);

在新建admin-style.css并添加以下代码，然后上传至functions.php同目录下，刷新你的登录页面看看，是不是变美了！

  1. body{
  2. font–family: “Microsoft YaHei”, Helvetica, Arial, Lucida Grande, Tahoma, sans–serif;
  3. width:100%;
  4. height:100%;
  5. background: url(https://blog.ccswust.org/images/登录背景图.jpg) no-repeat;
  6. –moz–background–size: cover; /*背景图片拉伸以铺满全屏*/
  7. –ms–background–size: cover;
  8. –webkit–background–size: cover;
  9. background–size: cover;
  10. }
  11. /*顶部的logo*/
  12. .login h1 a {
  13. background:url(https://blog.ccswust.org/logo.png) no-repeat;
  14. background–size: 220px 50px;
  15. width: 220px;
  16. height: 50px;
  17. padding: 0;
  18. margin: 0 auto 1em;
  19. border: none;
  20. –webkit–animation: dropIn 1s linear;
  21. animation: dropIn 1s linear;
  22. }
  23. /*登录框表单*/
  24. .login form, .login .message {
  25. background: #fff;
  26. background: rgba(255, 255, 255, 0.3);
  27. border–radius: 3px;
  28. border: 1px solid #fff;
  29. border: 1px solid rgba(255, 255, 255, 0.4);
  30. –webkit–animation: fadeIn 1s linear;
  31. animation: fadeIn 1s linear;
  32. }
  33. /*登录框输入框*/
  34. .login label {
  35. color: #000;
  36. }
  37. .login .message {
  38. color: #000;
  39. }
  40. #user_login{
  41. font–size: 18px;
  42. line–height: 32px;
  43. }
  44. /* 返回博客与忘记密码链接 */
  45. #backtoblog a, #nav a {
  46. color: #fff !important;
  47. display: inline–block;
  48. –webkit–animation: rtol 1s linear;
  49. animation: rtol 1s linear;
  50. }
  51. /*掉落的动画效果*/
  52. @-webkit–keyframes dropIn {
  53. 0% {
  54. –webkit–transform: translate3d(0, –100px, 0)
  55. }
  56. 100% {
  57. –webkit–transform: translate3d(0, 0, 0)
  58. }
  59. }
  60. @keyframes dropIn {
  61. 0% {
  62. transform: translate3d(0, –100px, 0)
  63. }
  64. 100% {
  65. transform: translate3d(0, 0, 0)
  66. }
  67. }
  68. /*逐渐出现的动画效果*/
  69. @-webkit–keyframes fadeIn {
  70. from {
  71. opacity: 0;
  72. –webkit–transform: scale(.8) translateY(20px)
  73. }
  74. to {
  75. opacity: 1;
  76. –webkit–transform: scale(1) translateY(0)
  77. }
  78. }
  79. @keyframes fadeIn {
  80. from {
  81. opacity: 0;
  82. transform: scale(.8) translateY(20px)
  83. }
  84. to {
  85. opacity: 1;
  86. transform: scale(1) translateY(0)
  87. }
  88. }
  89. /*从右往左的动画效果*/
  90. @-webkit–keyframes rtol {
  91. from {
  92. –webkit–transform: translate(80px, 0)
  93. }
  94. to {
  95. –webkit–transform: translate(0, 0)
  96. }
  97. }
  98. @keyframes rtol {
  99. from {
  100. transform: translate(80px, 0)
  101. }
  102. to {
  103. transform: translate(0, 0)
  104. }
  105. }

这就结束了，如果你不喜欢这个风格，也可以使用风格一

转到风格一：

https://www.xinyucn.cc/2022/10/chundaimameihuawordpressmorendengluye.html
本站1元=100家园币，你可以通过签到获得家园币，用来免费捐赠。
最新默认解压密码：Hoejc!xinyucn.cc 其他密码请去公众号。
如果链接丢失或未加，私信本站获取，仅对本站VIP会员开放。

资源下载此资源仅限注册用户下载，请先

免责声明：

根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供本站会员用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，禁止分享或传播。需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担 。警告：本站仅服务站内会员用户，禁止在中国大陆用户下载使用、分享或传播，违者后果自负。同意本条款你方可捐赠购买下载本站资源，不同意请离开。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。

服务条款：

本站为个人博客非盈利性站点，所有软件信息均来自网络，所有资源仅供学习参考研究目的，并不贩卖软件，不存在任何商业目的及用途，网站会员捐赠是您喜欢本站而产生的赞助支持行为，购买充值 即代表你对本站的无偿捐助，非购买本站资源。仅为维持服务器的开支与维护，全凭自愿无任何强求。

为防止盗链，本站所有资源均需登陆后下载，即使是免费的。如果链接失效或者需要安装密码，可通过右上方菜单“私信本站”联系管理员补链或者提供安装密码；注意安装密码仅免费提供给本站VIP会员和捐赠用户。本站下载头条极速版并关注，还可以领取现金红包哦！

如需解压密码，关注官方微信号“ 心语家园“或扫描下面的微信公众号二维码，发送解压密码获取。默认解压密码即最新密码，如密码无效，可尝试其他密码。

分享到QQ空间
分享到微信

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
分享到豆瓣
分享到人人
保存至印象笔记
分享到Google+
发送给朋友
  • 官方微信公众号
  • 扫一扫关注微信公众号，如果你觉得本站帮到了你，请通过下面的赏字按钮捐赠本站，谢谢！
  • weinxin
  • 本站官方头条号
  • 扫一扫关注官方头条号，新老用户扫描下载抖音极速版，可领取最高269元现金，每天使用都可领钱。
  • weinxin