將自定義 javascript 檔案新增到網站的首選方法是什麼？

問題描述

我已經新增了我的指令碼，但是我想知道首選方法。我剛剛把<script> 標籤直接放在我的模板的 header.php 中。

有沒有插入外部或自定義 js 檔案的首選方法？如何將 js 檔案繫結到單個頁面？ (我有主頁)

最佳解決方案

在您的主題中使用 `wp_enqueue_script()`

基本的答案是使用 wp_enqueue_script() 在一個 wp_enqueue_scripts 鉤子中為 admin 的前端 admin_enqueue_scripts 。它可能看起來像這樣 (假設你正在從你的主題的 functions.php 檔案中呼叫; 注意我如何引用 stylesheet 目錄)：

<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );

function mysite_enqueue() {
  $ss_url = get_stylesheet_directory_uri();
  wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js" );
}

這是基礎。

Pre-defined 和多個相關指令碼

但是讓我們假設您要從 list of default scripts included with WordPress 中新增 jQuery 和 jQuery UI Sortable，並希望您的指令碼依賴於它們？容易，只包括使用 WordPress 中定義的 pre-defined 控制程式碼的前兩個指令碼，並且您的指令碼為 wp_enqueue_script()提供了第三個引數，它是每個指令碼使用的指令碼控制程式碼的陣列，如下所示：

<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );

function mysite_enqueue() {
  $ss_url = get_stylesheet_directory_uri();
  wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js", array( 'jquery', 'jquery-ui-sortable' ) );
}

外掛中的指令碼

如果你想在外掛中做這個怎麼辦？使用 plugins_url()函式指定您的 Javascript 檔案的 URL：

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue' );

function my_plugin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url('/js/my-script.js',__FILE__), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION );
}

版本化您的指令碼

另外請注意，我們給外掛一個版本號，並將其作為第四個引數傳遞給 wp_enqueue_script()。版本號作為 URL 中的查詢引數以指令碼的形式輸出，如果版本已更改，則強制瀏覽器可能會將快取檔案載入到 re-download 。

僅在需要的頁面上載入指令碼

Web Performance 的第一條規則說，為了儘量減少 HTTP 請求，因此只要可能，您應該將指令碼限制在僅需要的地方載入。例如，如果您只需要使用指令碼在管理員限制它到管理頁面使用 admin_enqueue_scripts 鉤代替：

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );

function my_plugin_admin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION );
}

在頁尾中載入指令碼

如果您的指令碼是需要載入到頁尾中的指令碼之一，則會出現 wp_enqueue_script()的第 5 個引數，該引數告訴 WordPress 將其拖放到頁尾中 (假定您的主題沒有被錯誤地移動，並且確實是 calls the wp_footer hook like all good WordPress themes should)：

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );

function my_plugin_admin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION, true );
}

更精細的控制

如果您需要比 Ozh 更精細的粒度控制有一篇很棒的文章，標題為 How To: Load Javascript With Your WordPress Plugin，詳細說明。

停用指令碼以獲得控制

Justin Tadlock 有一篇很好的文章，標題為 How to disable scripts and styles，以防您想：

將多個檔案合併成單個檔案 (里程可能因 JavaScript 而異) 。
僅在我們使用指令碼或樣式的頁面上載入檔案。
停止不得不使用！在我們的 style.css 檔案中重要的是進行簡單的 CSS 調整。

透過 `wp_localize_script()`將值傳遞到 PHP

在他的部落格上，Vladimir Prelovac 有一篇很棒的文章，題目是 Best practice for adding JavaScript code to WordPress plugins，他討論了使用 wp_localize_script()來設定您的 server-side PHP 中的變數值，以便以後在您的 client-side Javascript 中使用。

使用 `wp_print_scripts()`進行精細粒度控制

最後，如果您需要真正的 fine-grained 控制元件，您可以檢視 wp_print_scripts()，如 Beer Planet 在題為 How To Include CSS and JavaScript Conditionally And Only When Needed By The Posts 的文章中所討論的。

Epiloque

這是關於包含 WordPress 的 Javascript 檔案的最佳實踐。如果我錯過了某些東西 (我可能有)，請務必在評論中通知我，以便我們為未來旅客新增更新。

次佳解決方案

為了補充 Mikes 使用入口的精彩插圖，我只是想指出，作為依賴的指令碼不需要排入…

我將使用 Mike 的答案中的外掛標題下的指令碼中的示例。

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-sortable');
    wp_enqueue_script('my-script',plugins_url('/js/my-script.js',__FILE__),array('jquery','jquery-ui-sortable'),MY_PLUGIN_VERSION);
}

這可以修剪下來看..

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('my-script', plugins_url( '/js/my-script.js', __FILE__ ), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION);
}

當您設定依賴關係時，WordPress 會發現並將其排隊準備好您的指令碼，因此您不需要對這些指令碼進行任何獨立呼叫。

另外，有些人可能會想知道如果設定多個依賴關係可能會導致指令碼以錯誤的順序輸出，這裡讓我舉個例子

wp_enqueue_script( 'first-script', 'example/path/example_script_1.js', array('second-script','third-script') );

如果指令碼二依賴於指令碼三 (即指令碼三應該首先載入)，這並不重要，WordPress 將確定這些指令碼的排隊優先順序，並以正確的順序輸出它們，簡而言之，這一切都被自動化為您提供 WordPress

參考文獻

What is the preferred way to add custom javascript files to the site?

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

將自定義 javascript 檔案新增到網站的首選方法是什麼？