php - Jquery 静态菜单到 Wordpress 菜单

Question

就在几天前，我得到了一个很棒的脚本，它基本上允许我的静态站点上的菜单项根据菜单中的列表项数量来收缩和扩展。现在，我已经开始着手将网站转换为 Wordpress 安装，但由于我不熟悉 Javascript，所以无法正常工作。

它不会运行脚本，只会运行基本的 Wordpress PHP。

这是脚本:

$(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-tags 这一事实有关，但考虑到我没有使用 jQuery 的经验，我可能是错的。有人能帮我吗？ :)

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

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

迈克尔

Answer 1

在 WordPress 中添加脚本你可以使用 wp_enqueue_script在你的functions.php文件

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

以上代码将添加 script在页面的头部，您不需要使用 <script>添加您的 menu.js手动标记，这是推荐的方式。

你也应该使用

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

去掉wp_head()后面的脚本标签你曾经加载过你的 menu.js文件并更改以下代码

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

到(wp_nav_menu() 生成一个 ul 填充了 li 标签)

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

还记得nav是一个 html5标签，旧浏览器不支持，你可以使用<div id="main-navigation"></div>相反。