javascript - さまざまな画面サイズでのさまざまな Wordpress メニュー

Question

デバイス/画面幅に応じて異なるワードプレスメニューを表示しようとしています。

<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>

このコードと他のいくつかのバリエーションを使用してみましたが、何も機能していないようです。何か案は？

前もって感謝します
ウィレム

Answer 1

私の知る限り、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};}