Php Jquery静态菜单到Wordpress菜单

就在几天前，我得到了一个很棒的脚本，它基本上允许静态站点上的菜单项根据菜单中的列表项数量进行收缩和扩展。现在我已经开始将该站点转换为Wordpress安装，但由于我不熟悉Javascript，我在使其正常工作方面遇到了问题

它不会运行脚本，只运行基本的WordPressPHP

这是脚本：

$(document).ready(function() {      
  li_count = $('#main-navigation li').length;
  div_size = $('#main-navigation').width();
  new_li_font_size = (div_size/10)/li_count+'px';
new_li_width = 100/li_count+'%';
  $('#main-navigation li').css('font-size', new_li_font_size);
  $('#main-navigation li').css('width', new_li_width);
  console.debug(new_li_size);
});

<nav id="main-navigation">
<ul>
    <li><a href="index.html">Hjem</a></li>
    <li><a href="butikker-single.html">Butikker</a></li>
    <li><a href="kampanjer.html">Kampanjer</a></li>
    <li><a href="#">Åpningstider</a></li>
    <li><a href="#">Om torvgårdens ting og tang</a></li>
</ul>
</nav><!-- END #main-navigation -->

<nav id="main-navigation" role="navigation">
            <ul>
                <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
            </ul>
        </nav><!-- END #main-navigation -->

这是我以前的导航：

$(document).ready(function() {      
  li_count = $('#main-navigation li').length;
  div_size = $('#main-navigation').width();
  new_li_font_size = (div_size/10)/li_count+'px';
new_li_width = 100/li_count+'%';
  $('#main-navigation li').css('font-size', new_li_font_size);
  $('#main-navigation li').css('width', new_li_width);
  console.debug(new_li_size);
});

<nav id="main-navigation">
<ul>
    <li><a href="index.html">Hjem</a></li>
    <li><a href="butikker-single.html">Butikker</a></li>
    <li><a href="kampanjer.html">Kampanjer</a></li>
    <li><a href="#">Åpningstider</a></li>
    <li><a href="#">Om torvgårdens ting og tang</a></li>
</ul>
</nav><!-- END #main-navigation -->

<nav id="main-navigation" role="navigation">
            <ul>
                <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
            </ul>
        </nav><!-- END #main-navigation -->

这是我的当前导航：

$(document).ready(function() {      
  li_count = $('#main-navigation li').length;
  div_size = $('#main-navigation').width();
  new_li_font_size = (div_size/10)/li_count+'px';
new_li_width = 100/li_count+'%';
  $('#main-navigation li').css('font-size', new_li_font_size);
  $('#main-navigation li').css('width', new_li_width);
  console.debug(new_li_size);
});

<nav id="main-navigation">
<ul>
    <li><a href="index.html">Hjem</a></li>
    <li><a href="butikker-single.html">Butikker</a></li>
    <li><a href="kampanjer.html">Kampanjer</a></li>
    <li><a href="#">Åpningstider</a></li>
    <li><a href="#">Om torvgårdens ting og tang</a></li>
</ul>
</nav><!-- END #main-navigation -->

<nav id="main-navigation" role="navigation">
            <ul>
                <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
            </ul>
        </nav><!-- END #main-navigation -->

我一直在看这个脚本，我认为这可能与php中没有更多的li标记有关，但考虑到我没有使用jQuery的经验，我可能错了。有人能帮我吗？：）

以防万一，下面是我脑海中的jQuery实现：

<?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>
    <script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/menu.js"></script>

要在
WordPress
中添加脚本，可以在
functions.php
文件中使用
wp\u enqueue\u脚本

function load_menu_js() {
    wp_enqueue_script(
        'menu_js',
        get_template_directory_uri() . '/js/menu.js',
        array('jquery')
    );
}
add_action('wp_enqueue_scripts', 'load_menu_js');

上面的代码将在页面的标题部分添加
脚本
，您不需要使用
手动添加
菜单.js
标记，这是推荐的方法

你也应该使用

(function ($) {
    $(document).ready(function() {      
        // code goes here
    });
})(jQuery);

删除用于加载
menu.js
文件的
wp_head（）
后的脚本标记，并更改以下代码

<nav id="main-navigation" role="navigation">
        <ul>
            <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
        </ul>
</nav>

还要记住，
nav
是一个
html5
标记，在旧浏览器中不受支持，你可以使用
来代替。
为什么不保留父包装的宽度
auto
，而没有任何固定的宽度？@SheikHeera，我认为如果我这样做的话，字体大小也不会改变。在某个时候，如果菜单项太多，菜单栏会与设置的宽度重叠，对吗？你想做什么？我希望能够将此脚本用于菜单栏，仅此而已。但是它似乎不再注册了。你想通过WordPress钩子添加/注册脚本以用于
ready
事件吗？我应该在哪里使用“（函数（$）{”？哦，我应该在原始脚本中更改它？我会尝试一下，这看起来很棒：）