平板电脑定位上的WordPress菜单交换

时间:2014-11-11 作者:vega

我正在使用PHP浏览器检测插件,我想为不同的设备实现不同的菜单。我已经将它们设置为primary和mobile。

现在,我想在旧设备上切换这些。我做过类似的事情,效果很好:

  if ( is_tablet() ) {
    wp_nav_menu( array(\'menu\' => \'primary\' ) );
  }
  elseif ( is_mobile() ) {
    wp_nav_menu( array(\'menu\' => \'mobile\' ) );
  }
  else {
    wp_nav_menu( array(\'menu\' => \'primary\' ) );
  }
现在,我想更进一步,因为平板电脑的设计在横向视图下看起来不错,但在纵向模式下看起来不好。

所以,我问你,是否有办法检查方向(在平板电脑上),然后去做,这意味着将菜单从主菜单更改为移动菜单。

大概是这样吧:

  if ( is_tablet(portrait) ) {
  ...
非常感谢各位。

2 个回复
最合适的回答,由SO网友:ManuA 整理而成

cybmeta是对的您不能相信服务器端浏览器检测

<div class="portrait">
 wp_nav_menu( array(\'menu\' => \'primary\' ) );
</div>

<div class="mobile">
 wp_nav_menu( array(\'menu\' => \'mobile\' ) );
</div>

<div class="primary">
 wp_nav_menu( array(\'menu\' => \'primary\' ) );
</div>
并使用媒体查询隐藏和显示菜单

SO网友:Howdy_McGee

@cybmeta是正确的,你最好采用响应性的方法。您可以在中隐藏特定项目wp_nav_menu 使用CSS。您只需创建一个菜单,其中包含您希望在整个设备中显示的所有页面。未经修改的wp_nav_menu 将实际为每个列表项提供一个特定的唯一ID,例如nav-menu-item-789. 知道了这一点,您可以检查每个列表项,并使用媒体查询根据ID隐藏或显示整个列表项。

这只是生成三个单独的wp_nav_menus 并在行进中显示/隐藏它们。这两种方法都应该不费吹灰之力就能奏效。

结束

相关推荐

我如何才能信任Switch_to_Blog()?

当我打电话时switch_to_blog() 有了博客id,我不知道这个博客是否真的存在。函数始终返回TRUE.测试用例:switch_to_blog( PHP_INT_MAX ); $post = get_post( 1 ); restore_current_blog(); 这将导致向用户公开的数据库错误。我怎样才能防止这种情况?真实世界用例我是Multilingual Press. 当用户翻译帖子时,会出现如下屏幕:现在可能会发生以下情况:她成功地保存了帖子,并继续翻译帖子&