WordPress 學習筆記： 將 php 的 Variable 傳遞給 JavaScript 檔案

在做任何應用的開發，對工程師而言這種需求並不少見，而在 WordPress 開發中，更是常見，因為很多 WordPress 的 Variable 與 Method ， 都是經 php 開發後所提供：

最典型的例子就是 get_template_directory_uri( ) 了 ：

這是 WordPress 用來回傳 版型根目錄 所提供的 Method，在 JavaScript 的開發中，尤其是在 Ajax 的應用，往往都會需要 檔案目錄的路徑 來協助提取我們要的資料

那如何將 get_template_directory_uri( ) return 的結果回傳給 JavaScript 呢 ？

方法一：Ajax

你可以使用 WordPress 提供的 Ajax 的方法 wp ajax (action)，來使用 Ajax 方式向 WordPress 的 php 檔案來提取

在此不對這方法做詳細的說明，因為真的沒必要阿～～～

方法二：全域變數

直接在 php 檔案的 header 裡加入：

<script>
  uri = <?php get_template_directory_uri()?>
<script>

恩～～

這方法是我無意間 google 到的 ， 雖然不得不說這方法的確可行，而且也很簡單，容易理解，但在開發時可能會碰到一些你預期不到的問題

• 不是所有的 JavaScript 檔案都需要此變數
• 不易管理
• 檔案載入順序的問題
• …

方法三：使用 WordPress 提供的方法

此需求如此常見，所以 WordPress 貼心的提供了一個方法：wp_localize_script()，來解決此需求：

wp_localize_script() 為 wp_enqueue_scripts 的 action 中提供的方法，其主要功能就是將 php 的 Variable 傳遞給以 註冊的JavaScript腳本

Method :

<?php wp_localize_script( $handle, $name, $data ); ?>

Parameters :

$handle：

• 類型：String (必填)
• 說明：以註冊的腳本名稱

$name ：

• 類型：String (必填)
• 說明：傳遞給 JavaScript 的 Variable 名稱

$data ：

• 類型：Array (必填)
• 說明：傳遞給 JavaScript 的 Variable 的值

Example:

<?php
  //註冊腳本
  wp_register_script( 'myscript', 'path/to/myscript.js' );

  //遞值
  wp_localize_script('myscript','url',array(get_template_directory_uri()))

  //引用腳本
  wp_enqueue_script( 'myscript' );
?>

除非特定需求，本人還是比較建議能用系統本身的方法來處理這項需求