如何在 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 腳本？