如何在 WordPress 中新增一個簡單的 jQuery 指令碼？

問題描述

我閱讀了 Codex 和一些關於在 WordPress 中使用 jQuery 的部落格文章，這非常令人沮喪。我已經在 functions.php 檔案中載入了 jQuery，但是所有的指南都很糟糕，因為他們假設你已經有了大量的 WordPress 體驗。例如，他們說現在我正在載入 jQuery 透過 functions.php 檔案，現在我只需要載入我的 jQuery 。

我該怎麼做？什麼檔案，具體來說，我新增程式碼？我如何為單個 WordPress 頁面新增它？

最佳解決方案

我知道你對教程的意思。這是我如何做到的：

首先你需要寫你的指令碼。在你的主題資料夾中建立一個叫做’js’ 的資料夾。在該資料夾中為您的 javascript 建立一個檔案。例如。 your-script.js 。將您的 jQuery 指令碼新增到該檔案 (您不需要.js 檔案中的<script> 標籤) 。

以下是您的 jQuery 指令碼 (在 wp-content /themes /your-theme /js /your-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 上詢問。

次佳解決方案

經過多次搜尋，我終於找到了與最新的 WordPress 一起使用的東西。以下是以下步驟：

找到您的主題目錄，在您的自定義 js(此示例中為 custom_js) 的目錄中建立一個資料夾。
將您的自定義 jQuery 放在此目錄中的.js 檔案 (本例中為 jquery_test.js) 中。

確保您的自定義 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');

檢查你的網站，以確保它的工作原理！

第三種解決方案

如果您使用 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：/your-site /wp-content /themes /parent-theme

get_stylesheet_directory_uri：/your-site /wp-content /themes /child-theme

第四種方案

除了透過功能將指令碼放在一起，您可以在「任何模板」中的標題，頁尾中包含一個連結 (一個連結 rel 標籤) 。你只需要確保路徑正確。我建議使用這樣的東西 (假設你在你的主題的目錄中) 。

<script type="javascript" href="http://<?php%20echo%20get_template_directory_uri();?>/your-file.js"></script>

一個很好的做法是將這個權利包括在關閉身體標籤之前，或者至少在你的頁尾之前。您還可以使用 php include 或其他幾種方法來拉入此檔案。

<script type="javascript"><?php include('your-file.js');?></script>

第五種方案

您可以使用此外掛新增自定義 javascript 或 jquery 。 https://wordpress.org/plugins/custom-javascript-editor/

當你使用 jQuery 不要忘記使用 jquery noconflict 模式

參考文獻

How do I add a simple jQuery script to WordPress?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

如何在 WordPress 中新增一個簡單的 jQuery 指令碼？