在 Divi 中使用外部 JavaScript 代碼段的最佳實踐

已發表: 2019-08-23

WordPress 和 Divi 做了很多開箱即用的奇妙事情，使我們可以輕鬆構建網站。但有時我們需要更高級的功能，而這些功能只能用 JavaScript 來完成。

使用 Divi，即使您沒有設置子主題，您也可以輕鬆地將 JavaScript 或 jQuery 片段（代碼塊）添加到您的主題或網頁，而無需插件。在本教程中，我們將介紹在 Divi 中使用外部 JavaScript 代碼段的一些最佳實踐。

JavaScript 和 jQuery 簡述

JavaScript 是您在網站上看到的動態功能背後的魔法。它是一種為 Web 構建的客戶端編碼語言，可以訪問您的所有主題文件並通過瀏覽器執行所有類型的功能，這些功能單獨使用 HTML 或 CSS 無法實現。

JQuery（最流行的 JavaScript 庫之一）讓將 JavaScript 片段添加到您的網站變得非常容易，這些片段將適用於不同的瀏覽器類型。這就是為什麼今天在網站上看到很多 jQuery 被使用的原因。 JQuery 也內置到 WordPress 中，因此如果格式正確，您添加到 Divi 的任何 jQuery 代碼都可以使用。

Divi/WordPress 中正確的 JQuery 代碼段格式

使用文件準備功能

在大多數情況下，我建議在您的 jQuery 片段中使用$(document).ready() 。在$(document).ready()添加的任何 JavaScript 將確保在執行 JavaScript 之前加載並準備好文檔（或 DOM）。這避免了在頁面尚未準備好安全操作時可能執行 JavaScript 的某些情況。

在 Divi 中，函數應該是這樣的……

jQuery( document ).ready(function() {

    // Add jQuery code here to be loaded once the DOM is ready

});

在 WordPress 中使用 jQuery 時使用“jQuery”而不是“$”

由於 WordPress 已經帶有兼容模式的 jQuery 版本，jQuery 的標準$不起作用。這是為了防止它與您可能會或可能不會在 WordPress 中使用的其他 JavaScript 庫發生衝突。相反，您需要使用jQuery代替$快捷方式。

所以這…

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

需要變成這樣……

jQuery(document).ready(function(){
  jQuery("p").click(function(){
    jQuery(this).hide();
  });
});

但是，如果您想保持代碼不那麼臃腫並保留那些$快捷方式，如果您添加$作為傳遞給文檔就緒函數的參數，您可以使用$而不是jQuery 。這將允許您將 $ 保留在該函數中包含的 jQuery 代碼段中。

這就是它的樣子……

jQuery( document ).ready(function( $ ) {
    // Add jQuery code here, using $ to refer to jQuery.
    $( "div" ).hide();
});

或者，您可以使用像這樣的簡單函數以及文檔就緒函數為jQuery傳遞$ ......

(function($) {
    
    // Add jQuery code here, using $ to refer to jQuery.
    $(document).ready(function(){

      $( "div" ).hide();

    });
    
})( jQuery );

現在我們了解了一些關於如何格式化 JavaScript 片段的最佳實踐，讓我們探索如何將它們正確添加到您的 Divi 站點。

使用代碼模塊將 JavaScript 代碼段添加到單個頁面

如果您想將 javascript（或 jquery）片段添加到 Divi 中的單個頁面，您可以使用代碼模塊。這將確保 JS 不會不必要地加載到每個頁面上，從而導致頁面加載時間在甚至不需要它的頁面上略有增加。

這是如何做到的。首先，在編輯需要 JS 代碼段的頁面時激活 divi 構建器。然後，將代碼模塊添加到您的頁面。

div javascript 片段

該代碼將在頁面上的任何位置工作，因此您可以將其放置在何處。

添加代碼模塊後，粘貼 JavaScript 代碼段。確保將代碼包裝在<script>標籤中，以便代碼被識別為 JavaScript。

div javascript 片段

不要忘記通過用<script>標籤包裹它來確保你的代碼片段被正確編碼，以便代碼被識別為 JavaScript。如果您使用 jQuery，請包含文檔就緒函數，以便在文檔準備就緒時加載它。此外，您需要在代碼片段中使用jQuery而不是簡寫$ 。

就是這樣！您的代碼段應該按預期在頁面上運行。

注意： <script>標籤通常要求您指定腳本的媒體類型，如下所示……

<script type="text/javascript">
</script>

但是，由於“text/javascript”是默認類型，因此在將其用於 JavaScript 代碼片段時可以將其省略。

使用 Divi 主題選項將 JavaScript 片段添加到所有頁面/帖子（不需要子主題）

JavaScript 片段也可以使用主題選項下的 Divi 代碼集成選項卡添加到 Divi。此方法適用於您希望在網站的所有頁面/帖子上加載的 JS 片段。如果您沒有子主題，或者如果您只有一些 JS 片段需要添加到您的 Divi 站點並且不想將它們包含在外部 JS 文件中，這也是一個不錯的選擇。

要找到代碼集成部分，請導航到 Divi > 主題選項，然後單擊集成選項卡。

div javascript 片段

找出放置 JavaScript 代碼段的位置

在那裡您將看到四個區域，您可以將自定義代碼添加到您的 Divi 站點。大多數情況下，最好將 JS 代碼段添加到正文中。這實際上會將您的代碼段放在頁面底部，以便它在其他所有內容之後加載，這對頁面加載速度非常有用。在某些情況下，您可能希望將代碼添加到頭部，以便代碼可以更快地加載（或者如果您的文檔依賴於更快運行的 JavaScript）。因此，您必須測試並決定最佳選項，以便在性能、時間和功能之間取得最佳平衡。

例如，您可能有一個 jQuery 代碼段為您的標題添加樣式。在這種情況下，您不希望將它加載到正文中（在頁面末尾），因為在讀取代碼段之前，標題最初會在沒有該樣式的情況下加載。這將使您的首屏在短時間內對訪客來說看起來很醜陋。但是，如果您將其加載到頭部，則不會有樣式延遲。

如果您的代碼僅適用於博客文章，您也可以選擇將 JS 代碼段添加到您的文章底部。這將防止代碼不必要地加載到其他頁面上。

div javascript 片段

代碼集成區域會將代碼直接添加到您的頁面，因此您需要使用<script>標記包裝您的代碼片段。

div javascript 片段

從單獨的 JS 文件向 Divi 添加 JS 片段（使用子主題）

始終建議為您的 Divi 站點使用子主題。一旦您正確設置了子主題，您不妨合併一個 JS 文件，該文件可用於保存您的自定義 JS 片段。
這絕對是在 WordPress 網站中處理 javascript 的首選方式，它也適用於 Divi。

在您的子主題中創建 JS 文件

設置 Divi 子主題始終是一個好主意，特別是如果您打算更改主題文件。創建 Divi 子主題後，您可以輕鬆創建一個 JavaScript 文件，您可以在其中將所有 JS 片段放在一個位置。

這是如何做到的。

創建一個 JavaScript 文件並將其添加到您的子主題文件夾

使用代碼編輯器創建一個新文件並將其另存為 JavaScript 文件。例如，如果您將文件保存為名為“scripts”的“js”類型，則完整的文件名將是“scripts.js”。您可以在此處添加所有要添加到 Divi 的 js 片段。您不需要將代碼片段包裝在<script>標記中，因為該文件已保存為 js 文件。

div javascript 片段

創建文件後，您需要將其添加到子主題文件夾中。我喜歡創建一個 js 文件夾來保存我的自定義 js 文件，以便更好地組織。為此，只需在子主題文件夾的根目錄下創建一個名為“js”的新文件夾，並將“scripts.js”文件添加到該文件夾中。

div javascript 片段

在子主題的 Functions.php 文件中排隊腳本

現在我們需要將 js 文件入隊，以便在 Divi 中加載它。如果你已經創建了一個子主題，你應該已經創建了一個functions.php文件，你已經將子主題的style.css文件排入隊列，它應該看起來像這樣......

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

現在你需要對你的新 js 文件做同樣的事情。為此，您需要將以下代碼段添加到該函數中。

    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );

將 style.css 和 scripts.js 文件排入隊列所需的最終代碼如下所示……

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

最後的想法

如果您不熟悉網頁設計或剛開始使用 Divi，您可能不熟悉 JavaScript 或如何將其添加到您的網站。希望這篇文章有助於為您指明正確的方向，並提供一些即使是經驗豐富的 Web 開發人員也能欣賞的最佳實踐。

我期待在評論中收到您的來信。

乾杯!