如何美化WordPress登录页面：详细教程

发布时间：2024-01-05  栏目：建站知识   浏览：   分类：wordpress教程

WordPress登录页美化教程：首先，下载并安装一个名为“Login Designer”的插件。然后，进入WordPress后台，找到“外观”>“主题编辑器”，在“login.php”文件中粘贴插件提供的代码。接下来，根据个人喜好调整登录表单的背景颜色、边框样式、按钮颜色等属性。最后，保存更改并预览登录页面。此外，还可以使用CSS和HTML代码自定义登录表单的样式，例如添加背景图片、修改输入框形状等。总之，通过这些简单的步骤，可以轻松实现WordPress登录页的美化。

WordPress后台的登录页面默认就是一个登录的表单，背景什么的都是白茫茫的一片。看久了还真有点腻。今天就分享一下美化后台登录界面的简易教程。

首先，打开你的主题的"functions.php",拉倒最后面，在最后一行的 “?>” 前面添加如下代码：

/***WordPress登录界面美化**/functioncustom_login_style(){echo'<linkrel="stylesheet"id="wp-admin-css"href="'.get_bloginfo('template_directory').'/admin-style.css"type="text/css"/>';}add_action('login_head','custom_login_style');

再新建一个css文件，命名为“admin-style.css”，css内容如下：

body{font-family:"MicrosoftYaHei",Helvetica,Arial,LucidaGrande,Tahoma,sans-serif;width:100%;height:100%;background:url(http://img.infinitynewtab.com/InfinityWallpaper/2_14.jpg)no-repeat;-moz-background-size:cover;/*背景图片拉伸以铺满全屏*/-ms-background-size:cover;-webkit-background-size:cover;background-size:cover;}/*顶部的logo*/.loginh1a{background:url(images/logo.png)no-repeat;background-size:220px50px;width:220px;height:50px;padding:0;margin:0auto1em;border:none;-webkit-animation:dropIn1slinear;animation:dropIn1slinear;}/*登录框表单*/.loginform,.login.message{background:#fff;background:rgba(255,255,255,0.3);border-radius:3px;border:1pxsolid#fff;border:1pxsolidrgba(255,255,255,0.4);-webkit-animation:fadeIn1slinear;animation:fadeIn1slinear;}/*登录框输入框*/.loginlabel{color:#000;}.login.message{color:#000;}#user_login{font-size:18px;line-height:32px;}/*返回博客与忘记密码链接*/#backtobloga,#nava{color:#fff!important;display:inline-block;-webkit-animation:rtol1slinear;animation:rtol1slinear;}/*掉落的动画效果*/@-webkit-keyframesdropIn{0%{-webkit-transform:translate3d(0,-100px,0)}100%{-webkit-transform:translate3d(0,0,0)}}@keyframesdropIn{0%{transform:translate3d(0,-100px,0)}100%{transform:translate3d(0,0,0)}}/*逐渐出现的动画效果*/@-webkit-keyframesfadeIn{from{opacity:0;-webkit-transform:scale(.8)translateY(20px)}to{opacity:1;-webkit-transform:scale(1)translateY(0)}}@keyframesfadeIn{from{opacity:0;transform:scale(.8)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}/*从右往左的动画效果*/@-webkit-keyframesrtol{from{-webkit-transform:translate(80px,0)}to{-webkit-transform:translate(0,0)}}@keyframesrtol{from{transform:translate(80px,0)}to{transform:translate(0,0)}}

你可以自由修改第5行的背景图片和第14行的logo图片。修改好后保存，并上传到当前主题的目录即可。

完了，就这么简单……