不知道大家的对WP的登陆是怎么看的，反正我是很不喜欢点个链接到另一个页面去登陆的这种做法。嘿嘿今天给大家带来点小东西，放弃WP默认的登陆方式，打了更加人性化更加酷的登陆方式。同时，由这篇文章开始，引入大家来更加了解WP自带的一个JS库，就是JQuery.我们利用这个JQ能实现很多漂亮的效果。
OK，我们先来看看WP默认的登陆框:
接下来看一下我们通过JQ实现的登陆框：
最后来看下登陆后的效果：
前台登陆的代码来自wp中文官方BLOG[wordpress实用技巧40例]
<div id="loginform">
<form action="<?php bloginfo('url') ?>/wp-login.php" method="post" class="lform">
<label for="log">用 户：</label>
<input class="logintext" type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="22" /><br /><br />
<label for="pwd">密 码：</label>
<input class="loginpass" type="password" name="pwd" id="pwd" size="22" /><br />
<p>
<input class="loginsubmit" type="submit" name="submit" value=" " class="button" />
<input name="rememberme" id="rememberme" type="checkbox" value="forever" /><label for="rememberme">记住我</label><br />
</p>
<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
</form>
<p class="lcolor"><a href="<?php bloginfo('url') ?>/wp-register.php">注册</a> | <a href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">找回密码？</a></p>
</div>
<?php global $user_ID, $user_identity, $user_level ?>
<?php if ( $user_ID ) : ?>
<ul class="logininfo">
<li>已登录：<strong><?php echo $user_identity ?></strong></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/">后台</a></li>
<?php if ( $user_level >= 1 ) : ?>
<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">撰写文章</a></li>
<?php endif // $user_level >= 1 ?>
<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">个人资料</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=logout&redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">注销</a></li>
</ul>
<?php endif // get_option('users_can_register') ?>
<form action="<?php bloginfo('url') ?>/wp-login.php" method="post" class="lform">
<label for="log">用 户：</label>
<input class="logintext" type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="22" /><br /><br />
<label for="pwd">密 码：</label>
<input class="loginpass" type="password" name="pwd" id="pwd" size="22" /><br />
<p>
<input class="loginsubmit" type="submit" name="submit" value=" " class="button" />
<input name="rememberme" id="rememberme" type="checkbox" value="forever" /><label for="rememberme">记住我</label><br />
</p>
<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
</form>
<p class="lcolor"><a href="<?php bloginfo('url') ?>/wp-register.php">注册</a> | <a href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">找回密码？</a></p>
</div>
<?php global $user_ID, $user_identity, $user_level ?>
<?php if ( $user_ID ) : ?>
<ul class="logininfo">
<li>已登录：<strong><?php echo $user_identity ?></strong></li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/">后台</a></li>
<?php if ( $user_level >= 1 ) : ?>
<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">撰写文章</a></li>
<?php endif // $user_level >= 1 ?>
<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">个人资料</a></li>
<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=logout&redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">注销</a></li>
</ul>
<?php endif // get_option('users_can_register') ?>
请把上面的代码放在适当位置。
然后引入我们的JS文件”
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/message/message.js"></script>
最后在
区添加调用:<script type="text/javascript">
/*JQuery*/
$(document).ready(function(){
/*ShowLoginMessages*/
$("#login").click(function () {
message("Login","id:loginform","288px","180px","test");
});
});
</script>
/*JQuery*/
$(document).ready(function(){
/*ShowLoginMessages*/
$("#login").click(function () {
message("Login","id:loginform","288px","180px","test");
});
});
</script>
JS文件就不发出来了，大家直接在下面的地址中下载，[文件改自十字花匠]我做了一些修改和美化。
PS:WP2.6默认的jquery.js好像实像不了以上效果。我查看了其版本，比jq官方的还要新。所以在这里我们要替换掉默认的jq,当然不会影响使用，只是在进后台后会提示脚本错误。
Message[已经包含所有文件，以及需要替换的JQ]
2010/01/23
三个字：看不懂。
2008/10/11
那个JS文件多大？会不会影响速度？
2008/10/10
高手啊,学习中…
2008/09/16
放到你主题的header.php中
2008/09/16
还是没弄明白那些代码放到哪里
是放到login页面还是哪里呀？
2008/08/28
又碰到一个JQ高手，多了个学习的地方。
2008/08/28
你放在你的header文件中就行了！~
2008/08/28
请问这些代码应该如何与我自己的theme集成阿？楼主提及的放在适当的位置具体应该怎么样安放呢？请明教…