首页 » WordPress

WordPress技巧: 当前页面弹出登陆窗口进行登陆

日期：2010-05-26 标签：WordPress教程

如需帮忙改代码，或者WordPress二次开发、PHP网站建设等需求，可联系我购买付费服务：点此联系我

文章目录

1、对你的主题做一些更改
2、设置登录链接
效果演示：

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

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

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

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

<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（没有就新建一个），将最后的 ?> 改成：

// 说明：获取当前网页的完整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模式，在合适的地方添加登录链接即可：

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

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

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

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

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

<?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(); ?>" class="lbOn" title="Log in">登录</a>
<?php } else { ?>
<a href="http://这里填写退出登录链接" title="登出">登出</a><br />
<a href="http://这里填写后台链接" title="管理">管理</a>
<?php } ?>

效果演示：

-- 完 --

本文采用「CC BY-NC-SA 4.0」创作共享协议，转载请标注以下信息：
原文出处：露兜即刻 https://www.ludou.org/wordpress-create-a-login-form-overlay.html

作者：露兜 » kaapass@outlook.com

业余编程爱好者。

90 条留言

点此留言

« 1 2 89

ciciking
2012年12月17日 13:59

老大，我主题在边栏、首页里添加代码都不行，只有将代码放在文本用小工具里才可以正常显示在边栏。管理和退出功能已经ok了，但登陆功能一直没能实现，获取的网址有问题。还是我的代码放的不对？

回复
- Ludou
  2012年12月17日 16:54
  
  @ciciking 不知道你说的是哪段代码？
  获取的网址有问题，具体说说是什么问题。
  
  回复
  - ciciking
    2012年12月17日 21:30
    
    @Ludou 应该是这段代码吧，
    <?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(); ?>" class="lbOn" title="Log in">登录</a>
    <?php } else { ?>
    <a href="http://这里填写退出登录链接" title="登出">登出</a><br />
    <a href="http://这里填写后台链接" title="管理">管理</a>
    <?php } ?>
    
    我的主题只有文章页有边栏，在分类A下的文章a页面，鼠标放在“登陆”两个字上，查到的网址是“http://ciciking.com/sharewall（我的分类别名）/165/%3C?php%20echo%20get_option('siteurl');%20?%3E/wp-content/themes/%3C?php%20echo%20get_option('template');%20?%3E/lightbox/login.php?redirect=http://ciciking.com/wp-admin/”。点击能实现弹窗效果，但出现错误页。
    我不懂代码，不知道形容的老大能不能读明白。实在不行可以去网站测试一下，谢谢回复。
    
    回复
    - Ludou
      2012年12月17日 22:25
      
      @ciciking 这是php代码，需要放到php文件中。不要使用小工具。
      使用ftp登录服务器，修改主题目录下的sidebar.php，或者后台 – 外观 – 编辑，右边选边栏，把php代码放到合适的位置。
      
      回复
      - ciciking
        2012年12月17日 22:48
        
        @Ludou 这是我在边栏添加的代码，
        <?php if ( !$user_ID ) { ?>
        <a href="<?php echo get_option('siteurl'); ?>/wp-content/themes/<?php echo get_option('template'); ?>/lightbox/login.php?redirect=http://ciciking.com/wp-admin" class="lbOn" title="Log in">登录</a>
        <?php } else { ?>
        <a href="http://ciciking.com/wp-login.php?action=logout&_wpnonce=cfd883809e" title="登出">登出</a><br />
        <a href="http://ciciking.com/wp-admin" title="管理">管理</a>
        <?php } ?>
        
        点击登陆后，不是登陆界面，而是什么“文章内容”、“发布”页？
        <img src="http://ciciking.com/images/QQ%E6%88%AA%E5%9B%BE20121217224819.png" >
      - Ludou
        2012年12月17日 23:04
        
        @ciciking 重新下载本文提供的文件，解压将得到一个文件夹lightbox ，接着用文本编辑器打开 lightbox 目录下的 login.php，将 http://localhost/wp 改成你的WordPress 安装地址。WordPress博客安装地址可以在这里找到： WordPress后台 – 设置 – 常规，注意不要在地址后面添加 /
        
        最后，用ftp将其上传到当前你所以使用的主题目录下，替换原先的lightbox。
        
        如果还是这样的情况，也许你的主题中某些代码强制替换了登录框的内容。这不要再问我了，问问主题作者吧，貌似这个主题有弹出登录的功能。
greyboy
2013年2月21日 00:08

请问下博主为什么会出现 Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting T_STRING or T_VARIABLE or T_NUM_STRING in /home/ftp/1520/greyboy-20130207-dFo/xccp.me/wp-content/themes/Loome_molly/lightbox/login.php on line 3
的提示呢

回复
- Ludou
  2013年2月21日 19:21
  
  @greyboy 用文本编辑器打开 lightbox 目录下的 login.php，将 http://localhost/wp 改成你的WordPress 安装地址。
  就可以了，其他的不要改动…
  
  回复
吴江
2013年4月3日 11:32

博主：

我想用一个独立页面自定义一个登录页面，用下面一段代码，总是报错，不知是什么地方出了问题，请你指导。我的代码为：
<?php
/*
Template Name: 自定义登陆页面
*/

?>

<?php
global $wpdb,$user_ID;

if (!$user_ID) { //判断用户是否登录
//接下来的代码都添加在这里

if($_POST){ //数据提交
//We shall SQL escape all inputs
$username = $wpdb->escape($_REQUEST['username']);
$password = $wpdb->escape($_REQUEST['password']);
$remember = $wpdb->escape($_REQUEST['rememberme']);

if($remember){
$remember = "true";
} else {
$remember = "false";
}
$login_data = array();
$login_data['user_login'] = $username;
$login_data['user_password'] = $password;
$login_data['remember'] = $remember;
$user_verify = wp_signon( $login_data, false );
//wp_signon 是wordpress自带的函数，通过用户信息来授权用户(登陆)，可记住用户名

if ( is_wp_error($user_verify) ) {
echo "<span class='error'>用户名或密码错误，请重试!</span>";//不管啥错误都输出这个信息
exit();
} else { //登陆成功则跳转到首页(ajax提交所以需要用js来跳转)
echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";
exit();
}
} else {

//第四步中的代码应该都包含在这里

get_header();//载入头部文件
?>

<!–<script src="http://code.jquery.com/jquery-1.4.4.js"></script>–><!–如果你发现没有ajax提交，请检查是否有引入jquery.js文件–>
<div id="container">
<div id="content">
<h3>阿树工作室-登陆页面</h3>
<div id="result"></div> <!– 输出结果 –>
<form id="wp_login_form" action="" method="post">
<label>用户名</label><br />
<input type="text" name="username" class="text" value="" /><br />
<label>密码</label><br />
<input type="password" name="password" class="text" value="" /> <br />
<label>
<input name="rememberme" type="checkbox" value="forever" />记住我</label>
<br /><br />
<input type="submit" id="submitbtn" name="submit" value="<?php esc_attr_e('Log In'); ?>" />
</form>

<script type="text/javascript"><!–ajax 提交数据–>
$("#submitbtn").click(function() {
<!–请准备一个gif图–>
$('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn();
var input_data = $('#wp_login_form').serialize();
$.ajax({
type: "POST",
url: "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>",
data: input_data,
success: function(msg){
$('.loader').remove();
$('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow');
}
});
return false;

});
</script>

</div>
</div>
<?php
get_footer(); //载入底部文件

}

}else { //跳转到首页
echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>";
}
?>

上面的代码无法登陆，总是报错，请博主批导，如何修改，才能用一个独立页面做一个登陆界面，谢谢。

回复
- Ludou
  2013年4月3日 21:23
  
  @吴江代码:
  
  <?php if (!is_user_logged_in()) { ?>
  <h2>登录</h2>
  <form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
  <input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" />
  <input type="password" name="pwd" id="pwd" size="20" />
  <input type="submit" name="submit" value="登录" class="button" />
  <p>
  <label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> 记住密码</label>
  <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
  </p>
  </form>
  <a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">忘记密码</a>
  <?php } else { ?>
  <h2>退出</h2>
  <a href="<?php echo wp_logout_url( get_bloginfo('url') ); ?>" title="">退出登录</a><br />
  admin
  <?php }?>
  
  回复
吴江
2013年4月4日 13:30

博主：
非常感谢你的代码。我还有一个问题想请教：我想做一个下拉框联动菜单，这个下拉框联动菜单由两个框组成，第一个框显示一级菜单，第二个框显示子菜单，点击第一个框中的某一级菜单，就把其下的子菜单显示在第二个框中，就像省市联动菜单那样，我折腾了好几天了，就没成功，希望你在百忙之中给予帮助，如何写代码才能实现这种功能，再一次表示感谢。

回复
- Ludou
  2013年4月4日 17:54
  
  @吴江抱歉，这个比较复杂，没法给你提供代码。
  
  回复
矢左
2013年9月19日 11:25

和NextGEN Gallery插件的缩略图效果冲突了，点击缩略图无法用特效打开，而是直接打开了图片链接！！！

回复
Alick.Li
2013年12月6日 14:02

最喜欢来你博客学技术了！

回复
王光卫中文博客
2014年4月13日 17:43

有没有那种打开网站就弹出个邮件订阅下载的窗口呢

回复
- Ludou
  2014年4月16日 21:42
  
  @王光卫中文博客 google : wordpress email subscribe plugin
  
  回复
这是爱
2014年5月30日 10:15

登陆之后提示错误：Cookies被阻止或者您的浏览器不支持。要使用WordPress，您必须启用cookies。

回复
- Ludou
  2014年6月18日 12:58
  
  @这是爱 cookie都不支持，基本上你在互联网上也活不下去了。
  
  回复
  - 这是爱
    2014年6月18日 14:12
    
    @Ludou 在原来的登陆页面正常傻逼！
    
    回复
    - Ludou
      2014年6月18日 22:26
      
      @这是爱好吧，我确实是煞笔。
      
      回复
秋叶
2014年12月11日 15:13

可以使用，但是js太多冗余代码了，没必要

回复
哈哈你猜猜
2014年12月29日 20:53

我发现一个还可以的插件露都可以看看应该是一样的功能测试可用画面比较漂亮
simplemodal login 汉化简单的事情了

另外大神请教一下有没有插件或者代码在顶端显示登陆/注册框登陆以后顶端显示个人资料中心+with 头像这里不能插图所以我引用个例子类似cmhello.com 右上角的登陆框还有luoxiao123.cn 右上角

回复
黒沼
2015年5月11日 14:33

露兜您好，想请问下，我用wordpress做的网站上传后进去主页地址会跳出登录界面，请问怎么样能直接进入首页不需要登录呢？

回复
- 露兜
  2015年5月11日 20:45
  
  @黒沼换个主题，停用所有插件
  
  回复
deqpwo
2015年6月5日 11:21

完全用不了啊= =||||，求解

回复
- 露兜
  2015年6月10日 19:44
  
  @deqpwo 代码已过期
  
  回复
vdeq
2015年6月5日 13:31

代码调整，可以用。但是使用弹出窗口登入之后，无法登入，还是和登入前一个样。这是什么原因？

回复
互创青年
2015年9月21日 10:23

非常感谢你的代码,效果能实现，就是有个小小的问题，页面必须全部加载完了才能点击进去，不然点击就是没有样式的页面！！希望博主指教！ –互创设计

回复
- 露兜
  2015年9月21日 12:29
  
  @互创青年 css和js必须加载完。
  
  回复
- 露兜
  2015年9月21日 12:32
  
  @互创青年另外，你可以将添加到footer.php的js、css放到header.php的</head>之前，可以让js提前加载
  
  回复
wyb
2017年6月27日 19:07

感谢博主的这些文章，学到很多东西。现在有个问题，lightbox/login.php这个文件中不能用wp中的函数吗？我用了get_option()结果报错了。。。怎么能在这个文件中用框架函数呢？大神指点我下吧，感谢！
直接写死链接的话感觉不友好，
$blogurl = "http://127.0.0.1/wordpress";
//$blogurl = get_option('siteurl');//我想用这个替换上面的

回复
- 露兜
  2017年6月29日 22:04
  
  @wyb 在文件开头引入wp-load.php：
  define('WP_USE_THEMES', false);
  require_once('./wp-load.php'); // 根据文件具体位置更改
  
  回复