WordPress 學習筆記: 如何在 WordPress 中 引入 JavaScript 檔案

WordPress 學習筆記: 如何在 WordPress 中 引入 JavaScript 檔案

前言 :

如果你是有一般 Html 跟 JavaScript 基礎你應該都知道,我們在 Html 上開發 JavaScript 時之前 , 除了直接在 script 標籤裡直接開發外,就直接用以下方式引入 JavaScript 的檔案:

<script src="myscripts.js"></script>

雖然使用這種方法在 WordPress 中也是行得通,不過你可能會碰到以下的問題:

  • 檔案路徑的問題
  • 因為 header.php 與 footer.php 重複使用 , 導致 js 在不必要時候載入

使用 WordPress 內建方法 :

WordPress 本身就有提供 引入 JavaScript 的 Action 與對應的 Method

Action :

Method :

簡單來說,WordPress 它在引入 JavaScript 檔案時 , 是在 wp_enqueue_scripts 這個 Action 下執行 , 也就是名為 wp_enqueue_scripts 的動作中,會使用上方的 Method 來達到引入 JavaScript 檔案的功能

你可以藉由此連結來理解 WordPress action 的機制

wp_register_script() :

註冊腳本 Register a new script

Method :

<?php wp_register_script($handle,$src,$deps = array(),$ver = false,$in_footer = false) ?>

Parameters :

$handle:

  • 類型:String(必填)
  • 說明:腳本名稱

$src :

  • 類型:String(必填)
  • 說明:腳本路徑

$deps :

  • 類型:Array
  • 說明:此註冊腳本依賴的其他以註冊的腳本
  • 預設值:array()

$ver :

  • 類型:(string|bool|null)
  • 說明:此腳本可 WordPress 支援的版本號
  • 預設值 : false (現在套用 WordPress 的版本號)

$in_footer :

  • 類型:bool
  • 說明:此腳本是否於 footer 載入
  • 預設值 : false (於 header 載入)

Exemple :

wp_register_script('myscripts', get_template_directory_uri() . '/js/myscripts.js',array ('jquery', 'jquery-ui'),false,false);

不得不說, WordPress 在這部份真的非常的貼心,你可點這個連結查看,它已經幫你註冊好許多我們在開發 JavaScript 常常需要的程式與套件,我們可以藉由 wp_register_script() 等方法直接套用引入,如:jQuery jQuery-ui 等等…

到目前為止,我們只是純在 WordPress 裡註冊自己的 JavaScript 檔而已,並還沒有做調用的動作

那該如何調用? 我們繼續往下看

wp_enqueue_script() :

將以註冊的 script 加入要執行script的隊列 Enqueue a script

Method :

<?php wp_enqueue_script($handle,$src,$deps = array(),$ver = false,$in_footer = false) ?>

Parameters :

wp_enqueue_script() 與 wp_register_script() 的參數基本上都是一樣的,這邊就不在特別說明,只有一點要注意的是:

wp_enqueue_script() 只有 $handle 這個參數是必填的

Exemple :

將以註冊的 js file 加入執行 script 的隊列

wp_enqueue_script('myscripts');

或是以下方式:將以註冊或未註冊的 js file 加入執行 script 的隊列

wp_enqueue_script('myscripts', get_template_directory_uri() . '/js/myscripts.js',array ('jquery', 'jquery-ui'),false,false);

當然 wp_enqueue_scripts 底下提供的 Method 絕對不只這篇文章提的這兩個,後續有機會會在補充

在 functions.php 裡調用:

剛剛在上面幾個 example code 如果你是直接複製貼在 functios.php 檔案裡執行,是會有錯誤的,這牽扯到 WordPress 執行順序的問題,因為有點複雜本人目前也還沒完全理解,所以這部份先不多說明:

解法:


function add_custom_scripts() { wp_enqueue_script('myscripts', get_template_directory_uri() . '/js/myscripts.js',array ('jquery', 'jquery-ui'),false,false); } add_action('wp_enqueue_scripts', 'add_custom_scripts');

說明 :

剛剛在前面有提到 wp_register_script() 與 wp_enqueue_script() 必須是要在 wp_enqueue_script 的 action 底下執行,所以我們使用 add_action() 的方式,來確保這幾段 code 是可以在 wp_enqueue_scripts 底下裡執行的

另外一提:

WordPress 新手可能會碰到的問題 :

如果你剛剛接觸 WordPress Theme 的開發,按上述的方法試,還是沒反應了話,你可能遺漏了下方的步驟 :

將下方 code 加入頁首

  <?php do_action('wp_head');?>

將下方 code 加入頁尾

  <?php do_action('wp_footer');?>