不同屏幕尺寸的不同 Wordpress 菜单
Different Wordpress menus at different screen sizes
我正在尝试根据设备/屏幕宽度显示不同的wordpress菜单。
<script>
$(function() {
if ($(window).width() > 959) {
<?php wp_nav_menu( array( 'menu' => 'primary', 'container' => '', 'menu_id' => 'menu' ) ); ?>
} else {
<?php wp_nav_menu( array( 'theme_location' => 'mobile' ) ); ?>
}
});
</script>
我尝试使用此代码以及其他几种变体,但似乎没有任何效果。有什么想法吗?
提前
致谢威廉
据我所知,wp_nav_menu只是输出菜单html,所以在客户端,你会得到这个:
<script>
$(function() {
if ($(window).width() > 959) {
<div>....menu html....</div>
} else {
<div>....menu html....</div>
}
});
</script>
我认为那里应该有javascript错误。
试试这个:
<div id="menu_a" style="display:none">
<?php wp_nav_menu( array( 'menu' => 'primary', 'container' => '', 'menu_id' => 'menu' ) ); ?>
</div>
<div id="menu_b" style="display:none">
<?php wp_nav_menu( array( 'theme_location' => 'mobile' ) ); ?>
</div>
<script>
$(function() {
if ($(window).width() > 959) {
$("#menu_a").show();
} else {
$("#menu_b").show();
}
});
</script>
或者在响应设计风格中,不涉及Javascript:
@media all and (max-width: 958px) { #menu_a{display:none};}
@media all and (min-width: 959px) { #menu_b{display:none};}
我最终使用了这个:
<?php
/* USER-AGENTS
================================================== */
function check_user_agent ( $type = NULL ) {
$user_agent = strtolower ( $_SERVER['HTTP_USER_AGENT'] );
if ( $type == 'bot' ) {
// matches popular bots
if ( preg_match ( "/googlebot|adsbot|yahooseeker|yahoobot|msnbot|watchmouse|pingdom'.com|feedfetcher-google/", $user_agent ) ) {
return true;
// watchmouse|pingdom'.com are "uptime services"
}
} else if ( $type == 'browser' ) {
// matches core browser types
if ( preg_match ( "/mozilla'/|opera'//", $user_agent ) ) {
return true;
}
} else if ( $type == 'mobile' ) {
// matches popular mobile devices that have small screens and/or touch inputs
// mobile devices have regional trends; some of these will have varying popularity in Europe, Asia, and America
// detailed demographics are unknown, and South America, the Pacific Islands, and Africa trends might not be represented, here
if ( preg_match ( "/phone|iphone|itouch|ipod|symbian|android|htc_|htc-|palmos|blackberry|opera mini|iemobile|windows ce|nokia|fennec|hiptop|kindle|mot |mot-|webos'/|samsung|sonyericsson|^sie-|nintendo/", $user_agent ) ) {
// these are the most common
return true;
} else if ( preg_match ( "/mobile|pda;|avantgo|eudoraweb|minimo|netfront|brew|teleca|lg;|lge |wap;| wap /", $user_agent ) ) {
// these are less common, and might not be worth checking
return true;
}
}
return false;
}
?>
然后:
<?php
$ismobile = check_user_agent('mobile');
if($ismobile) {
wp_nav_menu( array( 'theme_location' => 'mobile' ) );
} else {
wp_nav_menu( array( 'menu' => 'primary', 'container' => '', 'menu_id' => 'menu' ) );
}
?>
这不适用于设备大小,而是是否从移动设备访问网站。
来源:检测移动浏览器
谢谢
威廉
相关文章:
- 将js添加到wordpress中以突出显示css活动菜单
- Wordpress标题和子菜单样式对IE的不满
- WordPress下拉菜单在我的主题中不起作用
- WordPress和Bootstrap:下拉菜单不起作用
- WordPress切换菜单 - 使菜单在当前页面上保持打开状态
- 垂直菜单/导航 - WordPress/JSFiddle.
- 如何分配数据切换=“;下拉菜单”;用于wordpress中的父链接
- 在Wordpress菜单中使用锚点可以围绕内容创建选择框
- 如何使wordpress管理菜单默认折叠
- 在wordpress中显示/隐藏子菜单
- 如何在wordpress中区分顶部导航菜单和车身导航菜单
- Wordpress 移动导航菜单:菜单出现在 iPhone 和其他移动设备上,但不是 iPad
- 不同屏幕尺寸的不同 Wordpress 菜单
- 如何将html菜单转换为WordPress菜单(WordPress)
- 在wordpress菜单中单击鼠标悬停
- 使用jquery动态更改Wordpress菜单页面
- 为wordpress菜单项添加不同的属性
- 如何添加一个点击功能,以wordpress菜单项(谷歌跨域跟踪)
- Jquery静态菜单到Wordpress菜单
- 在wordpress菜单中调用Javascript函数