我閱讀了Codex和一些關於在WordPress中使用jQuery的博客文章，並且非常令人沮喪。我已經儘可能在functions.php文件中加載jQuery，但所有的指南都很糟糕，因爲他們認爲你已經有了大量的WordPress體驗。例如，他們說，現在我通過functions.php文件加載jQuery，現在我所要做的就是加載我的jQuery。如何添加一個簡單的jQuery腳本到WordPress？
我到底該怎麼做？什麼文件，特別是我添加代碼？我如何將它添加到單個WordPress頁面？
我知道你對教程的意思。以下是我的工作方式：
首先，您需要編寫腳本。在你的主題文件夾中創建一個名爲「js」的文件夾。在該文件夾中爲您的JavaScript創建一個文件。例如。您-的script.js。將您的jQuery腳本添加到該文件中（您不需要.js文件中的<script>標籤）。
下面是你的jQuery腳本的例子（可溼性粉劑內容/主題/你的主題/ JS /你-scrript.js）看起來可能：
jQuery(document).ready(function($) {
$('#nav a').last().addClass('last');
})
請注意，我用jQuery和不$在函數的開始處。
好吧，現在打開你的主題的functions.php文件。您需要使用wp_enqueue_script()函數，以便您可以添加腳本，同時告訴WordPress它依賴於jQuery。以下是如何做到這一點：
add_action('wp_enqueue_scripts', 'add_my_script');
function add_my_script() {
wp_enqueue_script(
'your-script', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
假設你的主題已經wp_head和wp_footer在正確的地方，這應該工作。讓我知道你是否需要任何幫助。
WordPress的問題可以通過WordPress Answers查詢。
我不得不添加add_action（'wp_enqueue_scripts'，'add_my_script'）;讓它加載，但它仍然是最清晰的答案。 –
你添加了哪個文件？ @EleMunjeli –
in functions.php –
你只需要加載jQuery？
1）像其他的導遊說，註冊您的腳本在你的functions.php文件像這樣：
// register scripts
if (!is_admin()) {
// here is an example of loading a custom script in a /scripts/ folder in your theme:
wp_register_script('sandbox.common', get_bloginfo('template_url').'/scripts/common.js', array('jquery'), '1.0', true);
// enqueue these scripts everywhere
wp_enqueue_script('jquery');
wp_enqueue_script('sandbox.common');
}
2）請注意，我們並不需要註冊jQuery的，因爲它已經在覈心。確保在footer.php中調用了wp_footer（），並且在header.php中調用了wp_head（）（這是輸出腳本標記的位置），並且jQuery將加載到每個頁面上。當你使用WordPress排隊jQuery時，它將處於「無衝突」模式，所以你必須使用jQuery而不是$。如果你願意，可以註銷jQuery，並通過執行wp_deregister_script（'jquery'）來重新註冊自己的jQuery。
不，我得到了這個部分。加載jquery很簡單。我需要知道什麼文件來添加我的jQuery代碼，以及如何。 – Citizen
把wp_enqueue_script（'script of name'）;在你希望腳本進入隊列的模板的get_header（）之前。 –
經過多次搜索，我終於發現了一些與最新的WordPress的作品。下面是要遵循的步驟：
確保您的自定義jQuery。JS是這樣的：
(function($) {
$(document).ready(function() {
$('.your-class').addClass('do-my-bidding');
})
})(jQuery);
轉到主題目錄，開拓的functions.php
添加一些代碼的旁邊，看起來像這樣的頂級：
//this goes in functions.php near the top
function my_scripts_method() {
// register your script location, dependencies and version
wp_register_script('custom_script',
get_template_directory_uri() . '/custom_js/jquery_test.js',
array('jquery'),
'1.0');
// enqueue the script
wp_enqueue_script('custom_script');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
謝謝，這幫了我很多！對於使用兒童主題的任何人，請使用get_stylesheet_directory_uri（）代替get_template_directory_uri（） –
感謝此分步解釋，Stan！ （以及與兒童主題一起使用的注意事項，@DavidTaiaroa） – marky
除了通過函數放置腳本之外，還可以在頁眉，頁腳，任何模板中包含鏈接（鏈接rel標籤）。你只需要確保路徑是正確的。我建議使用這樣的東西（假設你在主題的目錄中）。
<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>
一個很好的做法是在結束標籤之前或至少在您的頁腳之前包含此項權利。您也可以使用php includes，或其他幾種方法將此文件拉入。
您可以使用WordPress預定義函數將腳本文件添加到WordPress插件。
wp_enqueue_script('script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));
看那post它可以幫助您理解如何容易，你可以在WordPress插件實現jQuery和CSS。
**＃方法1：**嘗試把你的jQuery代碼放在一個單獨的js文件中。
現在將該腳本註冊到functions.php文件中。
function add_my_script() {
wp_enqueue_script(
'custom-script', get_template_directory_uri() . '/js/your-script-name.js',
array('jquery')
);
}
add_action('wp_enqueue_scripts', 'add_my_script');
現在你已經完成了。
在函數中註冊腳本有好處，因爲它在<head>部分，因爲它是頁面加載的一部分，因此它始終是header.php的一部分。因此，每次編寫新的html內容時，您都不必重複您的代碼。
＃方法2：將腳本代碼放在頁面體內<script>標記下。那麼你不必在函數中註冊它。
方法2正在玩火。 –
如果你使用WordPress child theme爲腳本添加到您的主題，你應該改變get_template_directory_uri功能get_stylesheet_directory_uri，例如：
母題：
add_action('wp_enqueue_scripts', 'add_my_script');
function add_my_script() {
wp_register_script(
'parent-theme-script',
get_template_directory_uri() . '/js/your-script.js',
array('jquery')
);
wp_enqueue_script('parent-theme-script');
}
子主題：
add_action('wp_enqueue_scripts', 'add_my_script');
function add_my_script() {
wp_register_script(
'child-theme-script',
get_stylesheet_directory_uri() . '/js/your-script.js',
array('jquery')
);
wp_enqueue_script('child-theme-script');
}
個get_template_directory_uri：/你的網站/可溼性粉劑內容/主題/ 父主題
get_stylesheet_directory_uri：/你的網站/可溼性粉劑內容/主題/ 兒童主題
您可以添加自定義的javascript或使用這個插件的jQuery。
https://wordpress.org/plugins/custom-javascript-editor/
當你使用jQuery不要忘了使用jQuery noconflict模式
可以在主題的function.php文件中添加的jQuery或JavaScript。 的代碼如下：
add_action('wp_enqueue_scripts', 'add_my_script');
function add_my_script() {
wp_enqueue_script(
'your_script_name', // your script unique name
get_template_directory_uri().'/js/your-script.js', //script file location
array('jquery') //lists the scripts upon which your script depends
);
}
更多詳情，請登錄本教程：http://www.codecanal.com/add-simple-jquery-script-wordpress/
「我們有谷歌」 前。 爲了正確使用WordPress內部的腳本，只需添加託管庫。像Google
，你需要你的自定義腳本之前將其鏈接選定庫後：exmpl
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
和自己的腳本後
<script type="text/javascript">
$(document).ready(function(){
$('.text_container').addClass("hidden");</script>
Beside putting the script in through functions you can "just" include a link (a link rel tag that is) in the header, the footer, in any template, where ever.
號你不應該只加鏈接到WordPress這樣的外部腳本。通過functions.php文件排入隊列可確保腳本按正確的順序加載。
未能將它們排入隊列可能會導致腳本無法正常工作，儘管它的寫入是正確的。
您可以在另一個文件中編寫您的腳本。並且像這樣排隊您的文件 假設您的腳本名稱爲image-ticker.js。
wp_enqueue_script('image-ticker-1', plugins_url('/js/image-ticker.js', __FILE__), array('jquery', 'image-ticker'), '1.0.0', true);
代替/js/image-ticker.js你應該把你的js文件路徑。
從這裏
儘管WordPress的已經有一段時間了，並添加腳本主題和插件多年來一直是同樣的方法回答，仍然有一些混亂周圍你應該如何添加腳本。所以讓我們澄清它。
由於jQuery仍然是最常用的Javascript框架，讓我們來看看如何添加一個簡單的腳本到您的主題或插件。
jQuery的兼容模式
我們開始安裝腳本的WordPress之前，讓我們來看看jQuery的兼容模式。 WordPress預先打包了一份jQuery的副本，您應該在代碼中使用它。當WordPress的jQuery加載時，它使用兼容模式，這是一種避免與其他語言庫衝突的機制。
這可以歸結爲，你不能像在其他項目中那樣直接使用美元符號。在爲WordPress編寫jQuery時，您需要使用jQuery。看看下面的代碼，看看我的意思：
這裏有很多教程和答案，這裏如何添加您的腳本以包含在頁面中。但是我無法找到的是如何構建該代碼以使其正常工作。這是由於這種形式的JQuery沒有使用$。
所以這裏是我的代碼，你可以使用它作爲模板。
jQuery(document).ready(function($){
$("#btnCalculate").click(function() {
var val1 = $(".visits").val();
var val2 = $(".collection").val();
var val3 = $(".percent").val();
var val4 = $(".expired").val();
var val5 = $(".payer").val();
var val6 = $(".deductible").val();
var result = val1 * (val3/100) * 10 * 0.25;
var result2 = val1 * val2 * (val4/100) * 0.2;
var result3 = val1 * val2 * (val5/100) * 0.2;
var result4 = val1 * val2 * (val6/100) * 0.1;
var val7 = $(".pverify").val();
var result5 = result + result2 + result3 + result4 - val7;
var result6 = result5 * 12;
$("#result").val("$" + result);
$("#result2").val("$" + result2);
$("#result3").val("$" + result3);
$("#result4").val("$" + result4);
$("#result5").val("$" + result5);
$("#result6").val("$" + result6);
});
});
你有什麼試過讓你覺得所有的指南都糟糕透頂？ – undefined
在*哪個*步驟哪個*步驟引導了哪個*哪個問題？ – pixelistik
你能具體嗎？你嘗試了什麼，沒有工作？ –