無法讓我的下拉菜單在基於Bootstrap的Wordpress主題中工作

Question

我試過很多來自這個網站的例子。一對夫婦已經工作了。但只有當我在html文件中使用它們，而不是WordPress的索引時。

有趣的感覺這是JavaScript沒有加載。

此外，我無法讓崩潰正常工作。只是讓整個菜單消失。

使用最新版本的Bootstrap。

這裏是我的代碼：

<link href = "<?php bloginfo ('stylesheet_url'); ?>" rel = "stylesheet"> 
<script type="text/javascript" src="js/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/jquery.video-ui.js"></script> 
<script type="text/javascript"> $('#demo1').videoUI(); </script> 

<div class="container"> 
    <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse"> 
     <span class = "icon-bar"></span> 
     <span class = "icon-bar"></span> 
     <span class = "icon-bar"></span> 
    </button> 

    <div class = "collapse navbar-collapse navHeaderCollapse"> 
    <div class="header">       
    <ul class="nav nav-pills pull-right"> 
     <li><a href = "#">Home</a></li> 
     <li><a href = "#">Blog</a></li> 
     <li class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Social Media<span class="caret"></span></a> 
      <ul class = "dropdown-menu"> 
       <li><a href = "#">Twitter</a></li> 
       <li><a href = "#">Facebook</a></li> 
       <li><a href = "#">Google+</a></li> 
       <li><a href = "#">Instagram</a></li> 
      </ul> 
     </li> 
     <li><a href = "#">About</a></li> 
     <li><a href = "#">Contact</a></li> 
    </ul> 
    <h3 class="text-muted"><small>Jumbotron Narrow</small></h3> 
    </div> 
    </div> 

謝謝您的時間。

安迪

Answer 1

既然你在哪裏使用WordPress的肯定是你有錯path..store你的JS在你的主題文件夾，然後就在你的src..your頭添加<?php bloginfo('template_directory'); ?>/看起來就像這樣：

<link href = "<?php bloginfo ('stylesheet_url'); ?>" rel = "stylesheet"> 
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.video-ui.js"></script> 
<script type="text/javascript"> $('#demo1').videoUI(); </script> 

在WordPress另一種方式是這樣的：

function sudo_plugin_scripts() { 
    wp_enqueue_script('jquery_script', plugin_dir_url(__FILE__).'js/jquery-1.10.2.js'); 
    wp_enqueue_script('bootstrap_script', plugin_dir_url(__FILE__).'js/bootstrap.min.js'); 
    wp_enqueue_style('video_script', plugin_dir_url(__FILE__).'js/jquery.video-ui.js'); 
} 

add_action('wp_enqueue_scripts','sudo_plugin_scripts'); 

到functions.php添加這些腳本

http://codex.wordpress.org/Function_Reference/wp_enqueue_script