Blog

呈上篇 “如何在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內可傳入的不只是本地化字串，任何資訊都行，端看需求而定