我的WordPress，Bootstrap主題不適用於JavaScript

我正在使用本地主機上的Bootstrap使用Wordpress主題。我已經正確加載CSS文件，並且使用正確的方式加載了js文件，但由於某些原因，js腳本無法正常工作。我的WordPress，Bootstrap主題不適用於JavaScript

這裏是我的index.php

<?php get_header(); ?> 


<?php get_footer(); ?>

這裏是我的header.php

<!DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href = "<?php bloginfo(stylesheet_url); ?>" rel = "stylesheet"> 

</head> 


<body> 

    <!-- Navigation --> 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">Start Bootstrap</a> 
      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li> 
         <a href="#about">About</a> 
        </li> 
        <li> 
         <a href="#services">Services</a> 
        </li> 
        <li> 
         <a href="#contact">Contact</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav>

這裏是我的footer.php

<script src= "<?php get_template_directory(); ?>/js/bootstrap.js"></script> 

</body> 
</html>

此問題驅動器我瘋了！我花了2個小時尋找解決方案，但沒有任何！

那麼問題是什麼傢伙？

來源

2015-07-13 Abbas Aleid

使用正確的入隊（'wp_enqueue_script'）函數，不要手動添加腳本標籤 - 這是一個壞習慣 – naththedeveloper

你能向我解釋如何使用它嗎？ –

'我已經正確加載CSS文件'，你怎麼這麼確定？因爲我知道你沒有 –

你可以用它爲包括腳本

function WM_Scripts(){ 

    wp_register_script('jScript', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'); 
    wp_register_script('bootstrapjs',get_template_directory_uri() .'/js/bootstrap.min.js'); 
    wp_enqueue_script('jScript'); 
    wp_enqueue_script('bootstrapjs'); 

} 
add_action('wp_enqueue_scripts', 'WM_Scripts');

和樣式表，你必須使用此功能。

function WM_CSS(){ 
    wp_register_style('bootstrapGrid', get_template_directory_uri() . '/css/bootstrap.min.css'); 

    wp_enqueue_style('bootstrapGrid'); 

} 
add_action('wp_enqueue_scripts', 'WM_CSS');

請參考wordpress文檔，將腳本包含在頁腳中。這是包含腳本和樣式的正確方法。並請添加wp_head（）;在你的頭文件中加載腳本和樣式。

來源

2015-07-13 14:18:15

請注意，這不會將任何內容加載到頁腳，您必須將「wp_enqueue_script」的最後一個參數設置爲「true」才能實現。儘管促進隊列雖然好！ – Tim

是的，我知道我已經說過要將WordPress文檔引用到頁腳中。其作品 –

！非常感謝我欣賞:) –

將這個代碼在你「的functions.php」文件來排隊「/css/bootstrap.min.css」，「/style.css」和你「/js/bootstrap.js 「：

/** 
* Enqueue scripts and styles 
*/ 
function theme_scripts() { 
    wp_enqueue_style('bootstrapcss', get_template_directory_uri() . '/css/bootstrap.min.css'); 
    wp_enqueue_style('stylesheet', get_stylesheet_uri()); 
    wp_enqueue_script(
      'bootstrapjs', 
      get_stylesheet_directory_uri() . '/js/bootstrap.js', 
      array(), 
      '3.3.5', // Bootstrap version number 
      true // Place before </body> 
    ); 
} 
add_action('wp_enqueue_scripts', 'theme_scripts');

保持音符，你需要的wp_enqueue_script最後一個參數設置爲true您‘/js/bootstrap.js’的</body>結束標籤前的地方。欲瞭解更多信息，請訪問this link。

來源

2015-07-13 14:00:23 5ervant

始終使用wp_enqueue_script/wp_register_script – Tim

這不是入隊，這是爲'wp_footer'動作添加一個函數。 –

@Tim嘿，這是工作..正在使用'add_action（'wp_footer'，'custom_script_footer'）'一個壞主意？ – 5ervant

您錯過了echo。您必須打印什麼功能get_template_directory_uri()返回喜歡這裏：

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.js"></script>

之後，你的JS將工作完美無瑕。

來源

2017-05-16 07:38:26

我的WordPress，Bootstrap主題不適用於JavaScript

回答

相關問題