当前位置: 首页 > Wordpress > 正文

选项卡式WordPress登陆注册模板

上次说到不用插件也可以修改WordPress登陆注册界面,不过只是简单的修改了CSS,缺少很多元素,例如header、导航、footer等,为了增加这些元素,我们可以采取另一种方式,将WordPress登陆注册界面做成page模板,用page来展示登陆/注册/找回密码。进一步,我们可以将登注册、找回密码放在一个页面,用选项卡切换,效果如下(Based on twentyeleven)

选项卡式登陆注册界面示例

 

显示wp登陆表单的函数

如果只需要显示wp的登陆表单,有一个现成的函数可以用

wp login form

这里我们要把登陆、注册和找回密码放到一个模板里,所以需要手动写这三个表单的代码。

实现方法

下述文件均放置在主题根目录下

1. 建立一个新的page模板,命名为page-login.php,内容如下:


 

2. 在文件开头引入了custom-login.css,建立该文件,并将下面的样式表拷贝进去


 

3. 选项卡切换效果通过jQuery实现,建立一个js文件叫custom-login.js,拷贝下面的代码


 

4. 到后台建立一个新的页面,模板选择Login Template,保存发布后就可以看到效果。不同的主题效果不同,需要根据具体情况修改css样式。

集成到主题

如果不想为css和js建立单独的文件,可以将custom-login.css中的内容拷贝到主题的style.css中,将custom-login.js的内容拷贝到footer.php </body> 标签之前,但一定要保证引入了jquery,我的模板文件是用wp_enqueue_script()引入的js,已经添加了jquery的依赖关系,所以不需要手动引入。

该文件也可以用到widget中,在sidebar.php通过下列代码引用,但需要将一些div删除,只保留表单部分,具体见源代码中的login-widget.inc.php


 

源代码下载

将压缩包中的文件释放到主题根目录下

下载源代码:自定义选项卡切换式登陆注册模板 已下载 13 次

有一个跟这个基本相同的插件,如果你更喜欢使用插件,可以到后台搜索安装WP User Control

本文来自:http://www.solagirl.net/wordpress-registry-all-in-one.html

本文固定链接: http://web.wqz.me/65.html | 网络手抄本

该日志由 网络手抄本 于2014年06月15日发表在 Wordpress 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 选项卡式WordPress登陆注册模板 | 网络手抄本
关键字: , , ,

选项卡式WordPress登陆注册模板:等您坐沙发呢!

发表评论

快捷键:Ctrl+Enter