制作个性化的WordPress登陆界面的实例教程
<p>个性化登陆界面的方法有两种，第一种是替换登陆背景，这个算是小型个性化吧：</p>
<p>
在/wp-admin/images找到login-bkg-tile.gif和login-bkg-bottom_new.gif两张图片，用自己定制的图片（大小最好相同）替换就行了。</p>
<p>
当然这个不能改变登陆框的布局，显然对于追求完美的处女座来说是不够的，于是第二种方法出现了：</p>
<p>
首先在functions.php中添加一个函数：</p>
<div>
<div>
<div id="highlighter_761075">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
</td>
<td>
<div>
<div>
<code>// custom login for theme</code>
</div>
<div>
<code>// folder themes/theme_name/custom-login/</code>
</div>
<div>
<code>function</code> <code>custom_login() {</code>
</div>
<div>
<code>echo </code><code>'<link rel="stylesheet" type="text/css" href="'</code> <code>. get_bloginfo(</code><code>'template_directory'</code><code>) . </code><code>'/custom-login.css" />'</code><code>;</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_action(</code><code>'login_head'</code><code>, </code><code>'custom_login'</code><code>);</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
通过一个简单的“勾子”，现在你的主题已经可以开启个性化登陆界面了，接下来要做的，是为你的登陆界面写css样式，命名为custom-login.css，然后再把css文件放到主题文件夹里就行了。</p>
<p>
以下是本站的css，供大家参考（由于我的custom-login.css是放在主题文件夹的子文件里，所以background里的url要写成如../images/login-bg-body.jpg的形式，熟悉MCS的人就会知道 ".." 代表上一级目录）</p>
<div>
<div>
<div id="highlighter_713755">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
<div>
16</div>
<div>
17</div>
<div>
18</div>
<div>
19</div>
<div>
20</div>
<div>
21</div>
<div>
22</div>
<div>
23</div>
</td>
<td>
<div>
<div>
<code>/* 页面css */</code>
</div>
<div>
<code>html,body,</code><code>#wpbody,.form-table .pre{background: #ffffff url("../images/login-bg-body.jpg");? font-size: 13px; font-family: 微软雅黑,宋体;}</code>
</div>
<div>
<code>a{text-decoration: none;}</code>
</div>
<div>
<code>body.login,body{border: none;}</code>
</div>
<div>
<code>h1 a{display: none;}</code>
</div>
<div>
</div>
<div>
<code>/* 登陆框主体部分css */</code>
</div>
<div>
<code>#login{background: url("../images/login-bg.jpg") no-repeat;? width: 650px;? height: 500px;? position: relative; margin: 50px auto;}</code>
</div>
<div>
<code>#loginform {padding-left: 110px;? float: right;? border-left: 2px solid #e3e3d3}</code>
</div>
<div>
<code>#loginform #user_login , #loginform #user_pass {border: 2px dotted #666666}</code>
</div>
<div>
<code>form{width: 280px;? height: 166px;? padding: 45px 0px 0px 0px;? background: url() no-repeat; margin: 60px 0 0 0; border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}</code>
</div>
<div>
<code>#user_pass,#user_login,#user_email{width: 190px; height: 20px; margin-bottom: 10px;}</code>
</div>
<div>
</div>
<div>
<code>/* 登陆框各组成css */</code>
</div>
<div>
<code>label {font-size: 13px; color:</code> <code>#fff;}</code>
</div>
<div>
<code>form .forgetmenot label {font-size: 13px;? color:</code> <code>#666666;}</code>
</div>
<div>
<code>.login</code> <code>#nav a{color: #666666 !important;}</code>
</div>
<div>
<code>input.button-primary, button.button-primary, a.button-primary{background: none; border: none; text-shadow: none; margin: 0; padding: 0; font-size: 13px; font-family: 微软雅黑,宋体;}</code>
</div>
<div>
<code>form .submit input {color:</code> <code>#666666;}</code>
</div>
<div>
<code>input.button-primary: active, button.button-primary: active, a.button-primary: active {background: none;}</code>
</div>
<div>
</div>
<div>
<code>/* 其他 */</code>
</div>
<div>
<code>#nav{margin: 0; padding: 0; position: absolute; text-shadow: none;}</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
送上效果图</p>
<p>
<img title="制作个性化的WordPress登陆界面的实例教程" alt="制作个性化的WordPress登陆界面的实例教程" src="https://zhuji.jb51.net/uploads/img/202305/9dd1d833eb5309382483a00ac20ea90a.jpg" style="max-width:100%!important;height:auto!important;width: 800px; height: 384px;"></p>
<p>
看到效果后就会发现，虽然我们不能改变页面的html元素，但包括登陆框结构在内的整个登陆页面都可以自定义，只要你知道每个部分的css选择器名称即可。所以只要用firebug等工具查看所有css的id或class，就可以制作出一个完全自己作主的登陆界面。</p>
頁:
[1]