您是否想學習如何在WordPress中正確添加JavaScript和CSS樣式表？ 許多DIY用戶經常犯直接在插件和主題中調用其腳本和样式表的錯誤。 在本文中，我們將向您展示如何在WordPress中正確添加JavaScript和样式表。 這對於剛開始學習WordPress主題和插件開發的人特別有用。
在WordPress中添加腳本和样式表時的常見錯誤
許多新的WordPress插件和主題開發人員犯了直接將其腳本或內聯CSS添加到其插件和主題中的錯誤。
有些錯誤地使用了 wp_head 函數以加載其腳本和样式表。
儘管上面的代碼似乎更容易，但這是在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中的腳本。
?php
function wpb_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' );
?>
說明：
我們首先通過 wp_register_script() 功能。 此函數接受5個參數：
- $句柄 – Handle是腳本的唯一名稱。 我們的被稱為“ my_amazing_script”
- $ src – src是腳本的位置。 我們正在使用plugins_url函數來獲取我們的plugins文件夾的正確URL。 一旦WordPress找到了，它將在該文件夾中尋找我們的文件名amazing_script.js。
- $ deps – deps用於依賴。 由於我們的腳本使用jQuery，因此我們在依賴項區域中添加了jQuery。 如果尚未在站點上加載WordPress，則WordPress將自動加載jQuery。
- $ ver –這是腳本的版本號。 不需要此參數。
- $ in_footer –我們希望將腳本加載到頁腳中，因此我們將值設置為true。 如果要在標題中加載腳本，則將其設置為false。
在提供所有參數之後 wp_register_script，我們可以只調用腳本 wp_enqueue_script() 一切都會發生。
最後一步是使用wp_enqueue_scripts操作鉤子實際加載腳本。 由於這是示例代碼，因此我們將其添加到其他所有內容的正下方。
如果要將其添加到主題或插件，則可以將此操作鉤放置在實際需要腳本的位置。 這使您可以減少插件的內存佔用。
現在有些人可能想知道為什麼我們要採取額外的步驟來首先註冊腳本，然後將其排隊？ 好吧，這使其他站點所有者可以註銷您的腳本，而無需修改插件的核心代碼。
正確地在WordPress中加入樣式
就像腳本一樣，您也可以加入樣式表。 看下面的例子：
而不是使用 wp_enqueue_script，我們現在正在使用 wp_enqueue_style 添加我們的樣式表。
請注意，我們已經使用 wp_enqueue_scripts 樣式和腳本的動作掛鉤。 儘管有名稱，此功能對兩者均適用。
在上面的示例中，我們使用了 plugins_url 函數指向我們要排隊的腳本或樣式的位置。
但是，如果您在主題中使用入隊腳本功能，則只需使用 get_template_directory_uri() 代替。 如果您正在使用兒童主題，則使用 get_stylesheet_directory_uri()。
下面是一個示例代碼：
我們希望本文能幫助您學習如何在WordPress中正確添加jacvascript和样式。 您可能還想研究頂級WordPress插件的源代碼，以獲得一些真實的代碼示例。
如果您喜歡這篇文章，請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。