呈上篇 “如何在WordPress中正確引入外部的CSS或Javascript檔案”
在寫Javascript的過程中,有時會遇到需要將後端的資料傳到Javascript內的問題,如多國語系字串、設定檔等,讓Javascript可以使用這些資料
多國語系字串是最常見的情境,因為WordPress的翻譯機制依賴後端處理mo檔案來產生本地化字串,如果你的Javascript內需要控制顯示某些訊息,但這些訊息又要跟著翻譯檔案來翻譯成本地化訊息的話,就會需要特別處理過這個訊息的取得方式
1. 在Javascript內使用翻譯過後的字串
使用wp_localize_script
這個function,在註冊過script之後定義需要傳入的資料以及資料的物件名稱
wp_localize_script
有3個參數:
- handle,需要套用的Javascript檔案handle名稱
- object_name,Javascript全域物件名稱,WordPress會將這些資訊包在這個物件內
- data,需要傳入的資料
<?php add_action('wp_enqueue_scripts', 'octopuswp_enqueue_scripts'); /** * 傳送後端資料到Javascript */ function octopuswp_enqueue_scripts() { // 取得子主題的目錄URL $stylesheet_dir_uri = get_stylesheet_directory_uri(); // 註冊Javascript wp_register_script('octopuswp-single-post', $stylesheet_dir_uri . '/assets/js/single-post.js', ['jquery']); // 註冊此Javascript的需要用到的資料 wp_localize_script('octopuswp-single-post', 'OctopusWP_Single_Post', [ // 使用翻譯函式來翻譯字串Hello World 'helloWorld' => __('Hello World', 'octopuswp') ]); // 引入(enqueue) if(is_single() && 'post' == get_post_type()) { wp_enqueue_script('octopuswp-single-post'); } } ?>
WordPress會在這個Javascript被引入(enqueue)時,在html下產生一個全域的Javascript物件,再將資訊放在裡面
因此在Javascript內就可以使用OctopusWP_Single_Post物件去存取裡面的資訊
alert(OctopusWP_Single_Post.helloWorld)
當然wp_localize_script
內可傳入的不只是本地化字串,任何資訊都行,端看需求而定