从移动浏览器访问我的网站时,如何让 WordPress 显示不同的菜单条目?
How can I make WordPress show different menu entries when my site is accessed from a mobile browser?
WordPress 已经允许我们创建多个菜单并编辑它们的项目。我想为来自桌面浏览器的用户提供一种菜单(包含更多项目),并为用户代理提供更简洁的菜单,显示他们正在使用移动浏览器。
我的主题已经在使用响应式菜单,当屏幕尺寸太小时它会缩小它,但我想更进一步,因为我的主菜单中有太多选项无法制作以便在移动设备上舒适地浏览。
如果你只是减去元素,而不是添加任何新元素,我会使用纯 CSS。
一个例子:
@media screen and (max-width: 700px) {
.menu_element1 {
display: none;
}
}
如果 'one step further' 你的意思是显示一个完全不同的菜单,不仅仅是减去,而且改变或添加新元素,你可能会创建几个菜单并使用 wp_is_mobile();
加载正确的菜单虽然from Codex 似乎不推荐这样做,因为平板电脑被认为是移动设备 - 并且在其他方面可能也不是防弹的。
因此,第三种选择是使用 Javascript 确定屏幕尺寸并加载适当的样式表。
WordPress 已经允许我们创建多个菜单并编辑它们的项目。我想为来自桌面浏览器的用户提供一种菜单(包含更多项目),并为用户代理提供更简洁的菜单,显示他们正在使用移动浏览器。
我的主题已经在使用响应式菜单,当屏幕尺寸太小时它会缩小它,但我想更进一步,因为我的主菜单中有太多选项无法制作以便在移动设备上舒适地浏览。
如果你只是减去元素,而不是添加任何新元素,我会使用纯 CSS。
一个例子:
@media screen and (max-width: 700px) {
.menu_element1 {
display: none;
}
}
如果 'one step further' 你的意思是显示一个完全不同的菜单,不仅仅是减去,而且改变或添加新元素,你可能会创建几个菜单并使用 wp_is_mobile();
加载正确的菜单虽然from Codex 似乎不推荐这样做,因为平板电脑被认为是移动设备 - 并且在其他方面可能也不是防弹的。
因此,第三种选择是使用 Javascript 确定屏幕尺寸并加载适当的样式表。