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：

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

邁克爾

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

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