在经营购物网站、会员论坛网站、在线课程网站等 ..,还有很多类型的网站,几乎都会开启会员注册的功能,并留下访客的资料。
但有时候,我们可能想让会员在不同的登入状态,呈现不同的菜单样式,像是:
- 会员处于“ 未登录状态时,菜单可以显示登录、注册的选项(相反的,能把注销、会员专区选项给隐藏)。
- 会员处于“ 已登录状态时,菜单可以显示注销、会员专区的选项(相反的,能把登录、注册选项给隐藏)。
但要达到像这样有逻辑式的菜单显示,通常需要写PHP程序码来处理这问题(文章有简单的程序码,复制贴上就能达成目标)。
如果你觉得使用程序码有难度,也可以使用 Ultimate Member 插件,打造不同身份显示菜单。 更多 使用插件,打造不同菜单 完整教程。
不过站长可能会不想安装额外插件,那这篇教程就很适合你。 好啰,那就直接开始吧!
- 1. 创建不同的菜单
- 2. 复制粘贴程序码
- 3. 查看一下菜单成果
- 常见问题
- WordPress 学习资源
1. 创建不同的菜单
虽然 WordPress 的主菜单位置(Primary Menu)只有一个,但我们还是能新增多个菜单,然后搭配下一章节的程序码,就能达成逻辑式的切换。
首先,前往 WordPress 外观 > 菜单,新增一个菜单(或用已有的菜单的改名也可)。
把菜单取名为 logged-out,这是给未登录状态显示用的,里面有包含 登录、注册的选项。
显示位置,先设定为 Primary Menu 主菜单,方便我们查看。
再来,重复上面的流程,新增另一个菜单(或用现有的菜单改名也可),菜单名称取名为 logged-in。
这是给未登录状态显示用的,里面有包含我的账户、注销的选项。
有关显示位置,先不做任何勾选,因为等下我们会用程序码操控它,完成后记得储存。
好啰,这样前置作业就搞定了,我们继续学习。
2. 复制粘贴程序码
接下来,我们需要借助程序码的威力,让它帮我们在不同会员登入状态,显示不同的菜单。
将下面程序码复制,并前往 WordPress 外观 > 主题主题编辑器,找到 function.php 文档,滑到最下面并贴上此代码(下面有图例)。
/** 不同登录状态,切换显示菜单 **/
function custom_menu_args( $args = '' ) {
if( is_user_logged_in() ) {
$args['menu'] = 'logged-in';
} else {
$args['menu'] = 'logged-out';
}
return $args;
}
add_filter( 'wp_nav_menu_args', 'custom_menu_args' );
大致上流程,可以参考下图操作,完成后记得储存。
小提醒:建议可把自定义程序码贴到子主题里面,这样哪天更新主题时,自己新增的程序码才不会被洗掉。
如果没有使用子主题也没关系,假设之后有更新主题,发现程序码被洗掉,再来设定一次就行了。
这样逻辑方面就设定完成了。
3. 查看一下菜单成果
这章节,我们就可以来看一下显示成果啰! 首先,可以开一个无痕窗口,用访客视角进行测试会比较准确。
会发现主菜单在未登入状态,果然只显示登入、注册的字段。
这样就完成依照不同的会员登录状态,而显示不同项目的菜单效果啰:)
常见问题
会员登入、注册表单一定需要分开吗? 可以合并在同一页显示就好吗?
WordPress 默认的会员登入&注册表单,就是放在同一个页面的(注册表单需到 WooCommerce 里开启)。
这篇文章,是分享给想把会员登入&注册表单拆开显示的人,因为这样设定会遇到显示的逻辑问题,所以才有这篇文章的诞生。
文章中的菜单名称命名,一定要跟上面的一样吗?
不一定。
但需用英文设定,因为这和程序码的内容是绑定的,所以如果打算修改菜单名称,那程序码内相对应的命名,也需要一并更改才会有效。
有推荐好用的会员登入、会员注册表单设计插件吗?
因为自己是用 Astra 主题 & Elementor 页面编辑器 比较多。
所以有关会员登入&注册表单,我比较会从 Ultimate Addons for Elementer、Essential Addons Elementor 这几款中,选择相关功能使用,这样生态圈会比较一致。
如果你不是使用 Elementor 的站长,WordPress 还有很多是专门设计会员表单的,完全不用担心。
原文链接:https://www.itaoda.cn/blog/11375.html,转载请注明出处。
评论0