無法讓jQuery CDN爲WordPress插件工作

我正在構建我的第一個WordPress插件，並且遇到了一些麻煩。我首先用我創建的聯繫人表單創建了一個自定義頁面模板。它使用Bootstrap JS，Bootstrap CSS，jQuery，然後使用jQuery UI作爲日期選擇器。它也使用了一個外部樣式表。一切工作都很好。我現在將這個頁面模板變成一個插件，這樣我就可以輕鬆地在多個網站上使用它，並更容易地拉動主題的默認設計。我最初加入引導JS，CSS引導，jQuery和jQuery用戶界面的PHP文件是這樣的頭：無法讓jQuery CDN爲WordPress插件工作

<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="/chem-dry-contact/style.css" media="screen"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
</head>

現在我明白這不是鏈接到外部樣式表和腳本的最佳方式WordPress，尤其不適用於插件。但之前它確實奏效。

我能夠將所有的html顯示爲一個帶有簡碼和所有內容的插件，但看起來並不像所有的外部文件都在工作。以下是我設置它與WordPress的排隊功能：

function add_plugin_scripts() { 
    wp_enqueue_script('jquery-3.2.1', '/wp-content/plugins/ChemDry-PriceQuote/jquery-3.2.1.js', array(), null, true); 
    wp_enqueue_script('bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array(), null, true); 
} 
add_action('wp_enqueue_scripts', 'add_plugin_scripts'); 

function add_plugin_styles() { 
    wp_enqueue_style('style', '/wp-content/plugins/ChemDry-PriceQuote/style.css'); 
    wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
} 
add_action('wp_enqueue_scripts', 'add_plugin_styles');

我的外部CSS工作，我想我的引導CSS是工作，但我不認爲的jQuery和Bootstrap JS都在工作。我將它設置爲頁面模板時提供的功能不再有效，當我通過在頁面模板版本中註釋掉jQuery線來測試它時，我得到了與現在一樣的結果。我確實已經嘗試先註銷jquery，然後嘗試重新註冊它......但這也不起作用。

現在我已閱讀WordPress自帶的jQuery ...但如果我不添加它，我沒有得到我需要的功能。我已經看遍了堆棧溢出的答案，但我似乎不能得到這個工作。

同樣，這是我開發的第一個插件，所以我會很感激任何幫助。謝謝。

來源

2017-06-06 Coltvant

試試這個，順序很重要，通常你想先載入樣式。然後你需要加載jQuery，然後加載bootstrap，因爲bootstrap需要jQuery。

// A $(document).ready() block. 
 
$(document).ready(function() { 
 
    console.log("jQuery ready!"); 
 
});

<head> 
 
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" type="text/css" href="/chem-dry-contact/style.css" media="screen"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head>

來源

2017-06-06 15:49:09

好吧，我會嘗試。但是，當我擁有''部分中的所有內容時，它正在工作。我的印象是，我應該使用WP的入隊函數來包含外部樣式表和腳本？特別是對於一個插件。情況並非如此嗎？ – Coltvant

@Coltvant在關閉前加上js''標籤，以便加載所有html –

@Coltvant風格應該轉到''，以便HTML儘快完成樣式化。 –

的WordPress來使用jQuery，你應該在你的報表開始使用JQuery的關鍵字，而不是$。

您可以檢查藏漢以下鏈接：

jquery is not defined in wordpress

not defined using JQuery

也可以採取看看下面的鏈接，將$工作再次：

Using ‘$’ instead of ‘jQuery’ in WordPress

來源

2017-06-06 16:12:27 AMH

這非常有幫助，謝謝。那麼Bootstrap JS呢？這會有運行jQuery的問題嗎？ – Coltvant

@Coltvant bootstrap應該可以正常工作。如果它插在jquery之後，因爲BootstarpJS需要JQuery。請檢查以下鏈接。它確保jquery加載之前Bootstrap https://stackoverflow.com/questions/26583978/how-to-load-bootstrap-script-and-style-in-functions-php-wordpress 我檢查BootstrapJS代碼，因爲它使用像在https://wordpress.stackexchange.com/questions/2895/not-defined-using-jquery-in-wordpress中提到的自我調用功能，我不認爲會有任何問題。 – AMH

無法讓jQuery CDN爲WordPress插件工作

回答

相關問題