Различные меню Wordpress на разных размерах экрана

Question

Я пытаюсь отображать различные меню 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> 

Я пробовал использовать этот код, а также несколько других вариантов, но ничего не работает. Есть идеи?

Заранее спасибо
Willem

Answer 1

Я закончил с использованием этого:

<?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')); 
} 
?> 

Это не работает с размером устройства, а зависит от того, доступен ли сайт с мобильного устройства.

Источник: Detect mobile browser

Благодаря
Willem

Answer 2

Насколько я знаю, 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};}