如何在 WordPress 中正確添加 JavaScript 和樣式
在這篇文章中，我們將看到 如何在 WordPress 中正確添加 JavaScript 和樣式.
有許多新的 WordPress 開發人員喜歡專門為自己的網站編寫代碼和開發插件，或者在各種市場上出售它們並獲得豐厚的回報。
編寫代碼的方法有很多種，但只有選定的方法可以有效地編寫代碼。
如果您可以在兩行而不是十行中編寫代碼，那麼您將節省大量的處理和內存。
如果對於小型輕量級網站可能無關緊要，但對於重型網站來說，這可能意味著很多。
如果您不編寫清晰的代碼並有效地使用可用資源，您將為其他程序製造大量衝突。
例如，有多種方法可以在 WordPress 中為您的插件載入外部現成的 Javascript。
但是如果你不遵循正確的標準，所有激活的插件都會被嚴重卡住。
本文主要面向願意開發 WordPress 主題和插件的新 WordPress 開發者。
除非您正確編碼，否則您的代碼將是不專業的，並且您製作的任何產品，無論概念多麼好，您都永遠不會被接受。
所以，最好知道 如何在 WordPress 中正確添加 JavaScript 和樣式.
添加 JavaScript 的錯誤
你們中的一些人可能知道 WordPress 有一個名為 wp_head 的函數，它可以幫助您在網站的標題部分載入任何內容。
您需要做的就是在腳本文件中添加以下代碼行，所有內容都將出現在標題中。
|
1 2 3 4 |
add_action('wp_head', 'wpb_bad_script'); function wpb_bad_script() { echo 'jQuery goes here'; } |
這是添加東西的一種相當快捷的方式，但它不是最好的方法。 您必須遵循正確的標準放棄快捷方式，這就是本插圖的重點。
例如，您在插件中手動載入 JQuery，而另一個開發人員也手動或通過適當的標準載入相同的 JQuery。 如果有人激活了你的兩個插件，那麼 JQuery 將在內存中載入兩次，這是一種浪費。
此外，如果載入的 JQuery 版本不同，那麼由於衝突，插件中會出現很多故障。 你得知道 如何在 WordPress 中正確添加 JavaScript 和樣式 在編寫任何代碼之前。
如何避免此類錯誤——入隊函數的概念？
您可能知道，WordPress 開發者社區是一個龐大而強大的社區。 每天都有成千上萬的開發人員開發新的主題和插件。
但是他們正在做的是通過入隊腳本功能來確保彼此的編碼方法永遠不會發生任何衝突。
這是負責的功能 正確添加 JavaScript 和樣式 在 WordPress 中，這樣就不會有任何衝突和不必要的內存阻塞。
它確保以系統的方式載入 JavaScript 和樣式。 函數 qp_enquque_function 告訴 Wordless 何時載入這些 JavaScript 和樣式，載入它們的位置，尤其是在什麼條件下載入。
在這些幫助下，您不必手動載入 JQuery 和類似的東西，因此，由於一次又一次地載入相同的文件，永遠不會出現內存阻塞的情況。
原因是 Enqueue 功能允許您使用 WordPress 本身附帶的內置庫。 由於沒有手動載入 JavaScript，它還將減少頁面載入時間緩慢的負擔。
步驟 在 WordPress 中正確添加 JavaScript 和樣式-
1. 在 WordPress 中排隊腳本
以下代碼行載入了 WordPress 附帶的內置 JavaScript 包。 當您創建插件時，您必須將這些行放在插件文件中，或者如果您正在創建主題，則必須將它們放在 functions.php 中。
|
1 2 3 4 5 |
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() 註冊。
1. $handle - 它是腳本的唯一名稱。 這是'my_amazing_script'。
2. $src - 它定義了你的腳本的位置。 庫函數 plugins_url 獲取插件文件夾的正確 URL。 一旦它被獲取，它將開始在其中尋找 Amazing_script.js 文件。
3. $deps——它定義了依賴。 當您要求 WordPress 載入 Jquery 之類的庫腳本時，您需要添加它。
如果腳本已經載入到內存中，則不會再次載入，而是進行新的載入。 這確保了沒有衝突、沒有內存阻塞和沒有時間浪費。
4. $ver - 它定義了腳本的版本號。 這不是強制性的。
5. $in_footer - 用於在頁腳中載入腳本。 如果要在標頭中載入腳本，則應將其設置為 false。
一旦定義了所有內容，您只需使用 wp_enqueue_script() 調用腳本。
2. WordPress 中的入隊樣式
就像 JavaScript 一樣，您必須將樣式表排入隊列。 在您的插件文件或 functions.php 文件中使用以下代碼來創建主題。
|
1 2 3 4 5 |
function wpb_adding_styles() { wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__)); wp_enqueue_script('my_stylesheet'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' ); |
上述代碼適用於您創建插件時。 創建主題時，必須將 plugins_url() 更改為 get_template_directory_uri()。 其餘的事情將保持不變。
|
1 2 3 4 5 |
function wpb_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' ); |
如果要創建子主題，則必須使用 get_stylesheet_direcroy_uri() 而不是 get_template_directory_uri()。
這是標準的方法 在 WordPress 中正確添加 JavaScript 和樣式。
如果您的插件或主題遇到任何故障，您應該使用上述代碼行修改它們的代碼，也許故障會得到解決。
始終遵循世界各地遵循的編碼標準，以便與其他成功的開發人員保持一致。
1. 帶 [親測] 說明源碼已經被站長親測過!
2. 下載後的源碼請在24小時內刪除,僅供學慣用途！
3. 分享目的僅供大家學習和交流，請不要用於商業用途！
4. 本站資源售價只是贊助，收取費用僅維持本站的日常運營所需！
5. 本站所有資源來源於站長上傳和網路，如有侵權請郵件聯繫站長！
6. 沒帶 [親測] 代表站長時間緊促,站長會保持每天更新 [親測] 源碼 !
7. 盜版ripro用戶購買ripro美化無擔保,若設置不成功/不生效我們不支持退款!
8. 本站提供的源碼、模板、插件等等其他資源，都不包含技術服務請大家諒解！
9. 如果你也有好源碼或者教程，可以到審核區發布，分享有金幣獎勵和額外收入!
10.如果您購買了某個產品，而我們還沒來得及更新，請聯繫站長或留言催更，謝謝理解 !
GG資源網 » 如何在 WordPress 中正確添加 JavaScript 和樣式
