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-tag的事實有關，但是考慮到我沒有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添加腳本，您可以在functions.php文件中使用wp_enqueue_script

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

在用於加載menu.js文件的wp_head()之后，刪除腳本標簽，並更改以下代碼

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

到（ wp_nav_menu()生成一個用li標簽填充的ul ）

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

還請記住， nav是html5標記，在舊版瀏覽器中不支持，您可以改用<div id="main-navigation"></div> 。