WordPress enqueue script – 如何置入自定義腳本
使用 WordPress來架設網站，對很多網站架設的初學者來說，真的是一個很好的開始。max 的文章也有非常多的篇幅介紹，如何透過子佈景主題的式樣檔，來增加網站的特殊效果，而這些式樣修改對於初學者來說是很容易上手的技巧之一。今天跟大家分享的是另外的一項技巧，難度稍微增加一點點，就是如何在 WordPress網站置入自定義腳本 WordPress enqueue script。因為網路上有很多的程式開發者，又或者是你自己開發的程式（例如 JavaScript ），而這些開發出來的程式腳本（scripts），可以讓網站頁面展示出一些特殊的效果。簡單來說就是要告訴大家，如何的在 WordPress網站執行一些特殊效果的程式腳本。
以這篇文章來說，max展示的 particles效果（可以在文章末段，看見範例效果影片），就是 JavaScript 設計出來的特效。文章的重點說明會放在如何透過 WordPress的程式代碼 wp_enqueue_script 來帶入這些效果。至於 particles效果設計等等，有興趣的朋友可以前往程式開發者的網站好好研究。
WordPress enqueue script
在 WordPress網站通常要置入這些程式腳本的方法就是直接編輯 header.php或是content.php檔案，直接置入這些程式碼的檔案位置。不過今天分享的方法是另外一種，這也是 max網站上經常出現的方法，編輯子佈景主題的 functions.php檔案，置入以下的語法。
|
1 2 3 4 |
function my_custom_scripts() { wp_enqueue_script( 'my-custom-script', get_template_directory_uri() . '/js/my-custom-script.js', array( 'jquery' ), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'my_custom_scripts' ); |
使用的方法很簡單，將這些 JavaScript程式碼上傳到子佈景主題資料夾的 js資料夾下，透過 wp_enqueue_script 這個 WordPress程式代碼將它帶入網站使用。
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ) 五個參數。
- my-custom-script.js ：JavaScript程式碼檔案名稱。
- get_template_directory_uri()：子佈景主題的正確路徑。
- 當然其他需要式樣設計的語法，必須自己加到子佈景主題的式樣檔裡面（style.css）。
相關資料
- Plugin API/Action Reference/wp enqueue scripts 官網說明文件。
- wp_enqueue_script 官網開發文件。
- particles.js 粒子特效程式碼。
- CodePen 網站上有很多範例程式碼可以參考。
- JavaScript Tutorial 程式碼教學。
particles 粒子效果展示影片
結論
遵循 WordPress核心程式的規範，可以為自己的網站增加很多的創造力，這些功能的展現，會讓自己對於網站的價越來越有成就感，也會越來越喜歡 WordPress。如果有心想要從事 WordPress網站設計工作的朋友，經常閱讀官網上的文件就是一件非常重要的課題。
