WordPress添加前台悬浮登录窗口

时间: 2013-12-5 分类: WordPress技术 作者: SAI

TAGS:

你可能会在很多网站看到一些很炫的登陆窗口,点击”登陆“按钮后,会在当前页面弹 出一个登陆窗口,填写登陆信息,登陆成功后,就会自动返回原来的页面。而我们使用的WordPress博客系统,在默认情况下只能打开一个新的页面进行登 陆,对一些人来说不是很方便。今天我将教你,如何让WordPress支持在当前页面打开登陆窗口进行登陆。先下载我们必须的文件:

down

下载完毕,解压将得到一个文件夹lightbox ,将其复制到当前你所以使用的主题目录下。接着用文本编辑器打开 lightbox 目录下的 login.php,将 http://localhost/wp 改成你的WordPress 安装地址。WordPress博客安装地址可以在这里找到: WordPress后台 - 设置 - 常规,注意不要在地址后面添加 /

1、对你的主题做一些更改

用文本编辑器打开你的主题目录中footer.php,将 </body> 替换成:

1
2
3
4
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/lightbox/lightbox.css" type="text/css" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lightbox/prototype.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lightbox/lightbox.js"></script>
</body>

用文本编辑器打开主题目录下的functions.php(没有就新建一个),将最后的 ?> 改成:

改成:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 说明:获取当前网页的完整URL
function curPageURL()
{
$pageURL = 'http';
if ($_SERVER["HTTPS"] == "on")
{
$pageURL .= "s";
}
$pageURL .= "://";if ($_SERVER["SERVER_PORT"] != "80")
{
$pageURL .= $_SERVER["SERVER_NAME"] . ":" . $_SERVER["SERVER_PORT"] . $_SERVER["REQUEST_URI"];
}
else
{
$pageURL .= $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"];
}
return $pageURL;
}
?>

2、设置登录链接

(1) 在文章中添加登录地址
如果你在后台编写文章的时候,想在文章里面添加登录链接,可以切换到HTML模式,在合适的地方添加登录链接即可:

1
<a title="Log in" class="lbOn" href="http://这里填你当前使用的主题路径/lightbox/login.php?redirect=http://这里填登录成功后返回的页面地址">登录</a>

上面的当前使用的主题路径,类似 http://www.ludou.org/wp-content/themes/default ,也就是你当前使用的主题的路径;登录成功后返回的页面地址,为你想让用户登录成功后台返回的页面地址,如果你想返回当前页面就填当前页面的地址。如:

1
<a title="Log in" class="lbOn" href="http://www.ludou.org/wp-content/themes/default/lightbox/login.php?redirect=http://www.ludou.org">登录</a>

上面的东西看起来比较繁琐,那是因为你是在文章中插入链接,所以不能使用PHP代码帮你填写链接,只能用静态的HTML。下面的是直接更改你的主题,可能比较方便一些。

(2) 在你的主题文件中添加登录链接
如果你想在主题文件sidebar.php、index.php、single.php等中添加登录链接,可以在合适位置添加以下代码:

1
2
3
4
5
6
<?php if ( !$user_ID )  { ?>
<a href="<?php echo get_option('siteurl'); ?>/wp-content/themes/<?php echo get_option('template'); ?>/lightbox/login.php?redirect=<?php echo curPageURL(); ?>" title="Log in">登录</a>
<?php } else { ?>
<a href="http://这里填写退出登录链接" title="登出">登出</a><br />
<a href="http://这里填写后台链接" title="管理">管理</a>
<?php } ?>

效果演示:

20131204183847

Javin

本文作者: SAI

推崇以用户为中心的设计理念,专注于用户体验设计,游走在视觉设计与前端开发之间。我要投稿

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:塞纳» 建站技巧 » WordPress技术 » WordPress添加前台悬浮登录窗口
本文地址:http://www.saiody.com/?p=850

返回顶部