您想了解如何在 wordpress 中正確添加 JavaScript 和 css 樣式表嗎？
許多 DIY 用戶經常犯在插件和主題中直接調用腳本和樣式表的錯誤。
在本文中，我們將向您展示如何在 wordpress 中正確添加 JavaScript 和樣式表。這對于那些剛剛開始學習 WordPress 主題和插件開發的人來說特別有用。
在 WordPress 中添加腳本和樣式表時的常見錯誤
許多新的WordPress 插件和主題開發人員都犯了直接將腳本或內聯 css 添加到插件和主題中的錯誤。
立即學習“Java免費學習筆記（深入）”；
有些人錯誤地使用該wp_head函數來加載腳本和樣式表。
由
在 WordPress 中一鍵使用
雖然上面的代碼看起來更簡單，但這是在 WordPress 中添加腳本的錯誤方法，并且會導致將來出現更多沖突。
例如，如果您手動加載 jQuery，而另一個插件通過正確的方法加載 jQuery，則 jQuery 會被加載兩次。如果它在每個頁面上加載，那么這將對WordPress 的速度和性能產生負面影響。
也有可能兩者是不同的版本，也可能導致沖突。
話雖這么說，讓我們看看添加腳本和樣式表的正確方法。
為什么要在 WordPress 中排隊腳本和樣式？
WordPress 擁有強大的開發者社區。來自世界各地的數千人為 WordPress 開發主題和插件。
為了確保一切正常運行，并且沒有人踩到別人的腳趾，WordPress 有一個排隊系統。該系統提供了加載 JavaScript 和 CSS 樣式表的可編程方式。
通過使用 wp_enqueue_script 和 wp_enqueue_style 函數，您可以告訴 WordPress 何時加載文件、加載文件的位置以及其依賴項是什么。
該系統還允許開發人員利用與 WordPress 捆綁在一起的內置 JavaScript 庫，而不是多次加載相同的第三方腳本。這可以減少頁面加載時間并有助于避免與其他主題和插件發生沖突。
如何在 WordPress 中正確排隊腳本？
在 WordPress 中正確加載腳本非常簡單。下面是一個示例代碼，您可以將其粘貼到插件文件或主題的functions.php 文件中，以便在 WordPress 中正確加載腳本。
?phpfunctionwpb_adding_scripts() { wp_register_script('my_amazing_script', plugins_url('amazing_script.JS', __FILE__), array('jquery'),'1.1', true); wp_enqueue_script('my_amazing_script');} add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts'); ?>
由
在 WordPress 中一鍵使用
解釋：
我們首先通過該wp_register_script()函數注冊我們的腳本。該函數接受 5 個參數：
- $handle?– Handle 是腳本的唯一名稱。我們的叫做“my_amazing_script”
- $src?– src 是腳本的位置。我們使用plugins_url 函數來獲取插件文件夾的正確URL。一旦 WordPress 發現，它就會在該文件夾中查找我們的文件名 Amazing_script.js。
- $deps?– deps 用于依賴。由于我們的腳本使用了 jQuery，因此我們在依賴項區域中添加了 jQuery。如果網站上尚未加載 jQuery，WordPress 將自動加載 jQuery。
- $ver?– 這是我們腳本的版本號。該參數不是必需的。
- $in_footer?– 我們想要在頁腳中加載腳本，因此我們將該值設置為 true。如果您想在標頭中加載腳本，那么您可以將其設置為 false。
在提供了所有參數后wp_register_script，我們就可以調用使一切發生的腳本wp_enqueue_script()。
最后一步是使用 wp_enqueue_scripts操作掛鉤來實際加載腳本。由于這是示例代碼，我們已將其添加到其他所有內容的正下方。
如果您要將其添加到主題或插件中，那么您可以將此操作掛鉤放置在實際需要腳本的位置。這可以讓您減少插件的內存占用。
現在有些人可能想知道為什么我們要采取額外的步驟先注冊腳本然后將其排隊？好吧，這允許其他網站所有者注銷您的腳本，而無需修改插件的核心代碼。
在 WordPress 中正確排列樣式
就像腳本一樣，您也可以將樣式表排入隊列。看下面的例子：
<?phpfunctionwpb_adding_styles() {wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));wp_enqueue_style('my_stylesheet');}add_action( 'wp_enqueue_scripts', 'wpb_adding_styles'); ?>
由
在 WordPress 中一鍵使用
wp_enqueue_script我們現在不再使用，而是wp_enqueue_style使用 添加樣式表。
wp_enqueue_scripts請注意，我們對樣式和腳本都使用了動作掛鉤。盡管有這個名字，但這個函數對兩者都適用。
在上面的示例中，我們使用plugins_url函數來指向我們想要排隊的腳本或樣式的位置。
但是，如果您在主題中使用排隊腳本功能，則只需使用get_template_directory_uri()即可。如果您正在使用子主題，請使用get_stylesheet_directory_uri().
下面是一個示例代碼：
<?php functionwpb_adding_scripts() {wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);wp_enqueue_script('my_amazing_script');} add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts'); ?>
由
在 WordPress 中一鍵使用
我們希望本文能幫助您學習如何在 WordPress 中正確添加 JavaScript 和樣式。您可能還想研究頂級 WordPress 插件的源代碼，以獲取一些現實生活中的代碼示例，或者查看我們關于如何選擇最佳網頁設計軟件的指南。
