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

日期: 标签:WordPress教程 90 条留言
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我

你可能会在很多网站看到一些很炫的登陆窗口,点击"登陆"按钮后,会在当前页面弹出一个登陆窗口,填写登陆信息,登陆成功后,就会自动返回原来的页面。而我们使用的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  QQ 825533758

业余编程爱好者,主业是淘宝店主,卖些工艺品,感兴趣可以到我的淘宝店看看(旺旺不提供技术咨询):西西弗sisyphe

90 条留言

点此留言
1 2 89
  1. ciciking

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

  2. Ludou

    @ciciking 不知道你说的是哪段代码?
    获取的网址有问题,具体说说是什么问题。

  3. ciciking

    @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/”。点击能实现弹窗效果,但出现错误页。
    我不懂代码,不知道形容的老大能不能读明白。实在不行可以去网站测试一下,谢谢回复。

  4. Ludou

    @ciciking 这是php代码,需要放到php文件中。不要使用小工具。
    使用ftp登录服务器,修改主题目录下的sidebar.php,或者后台 – 外观 – 编辑,右边选 边栏,把php代码放到合适的位置。

  5. ciciking

    @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" >

  6. Ludou

    @ciciking 重新下载本文提供的文件,解压将得到一个文件夹lightbox ,接着用文本编辑器打开 lightbox 目录下的 login.php,将 http://localhost/wp 改成你的WordPress 安装地址。WordPress博客安装地址可以在这里找到: WordPress后台 – 设置 – 常规,注意不要在地址后面添加 /

    最后,用ftp将其上传到当前你所以使用的主题目录下,替换原先的lightbox。

    如果还是这样的情况,也许你的主题中某些代码强制替换了登录框的内容。这不要再问我了,问问主题作者吧,貌似这个主题有弹出登录的功能。

  7. greyboy

    请问下博主 为什么会出现 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
    的提示呢

  8. Ludou

    @greyboy 用文本编辑器打开 lightbox 目录下的 login.php,将 http://localhost/wp 改成你的WordPress 安装地址。
    就可以了,其他的不要改动…

  9. 吴江

    博主:

    我想用一个独立页面自定义一个登录页面,用下面一段代码,总是报错,不知是什么地方出了问题,请你指导。我的代码为:
    <?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>";
    }
    ?>

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

  10. Ludou

    @吴江 代码:

    <?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 }?>

  11. 吴江

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

  12. Ludou

    @吴江 抱歉,这个比较复杂,没法给你提供代码。

  13. 矢左

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

  14. Alick.Li

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

  15. 王光卫中文博客

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

  16. Ludou

    @王光卫中文博客 google : wordpress email subscribe plugin

  17. 这是爱

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

  18. Ludou

    @这是爱 cookie都不支持,基本上你在互联网上也活不下去了。

  19. 这是爱

    @Ludou 在原来的登陆页面正常 傻逼!

  20. Ludou

    @这是爱 好吧,我确实是煞笔。

  21. 秋叶

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

  22. 哈哈你猜猜

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

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

  23. 黒沼

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

  24. 露兜

    @黒沼 换个主题,停用所有插件

  25. deqpwo

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

  26. 露兜

    @deqpwo 代码已过期

  27. vdeq

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

  28. 互创青年

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

  29. 露兜

    @互创青年 css和js必须加载完。

  30. 露兜

    @互创青年 另外,你可以将添加到footer.php的js、css放到header.php的</head>之前,可以让js提前加载

  31. wyb

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

  32. 露兜

    @wyb 在文件开头引入wp-load.php:
    define('WP_USE_THEMES', false);
    require_once('./wp-load.php'); // 根据文件具体位置更改

1 2

发表留言