Update 18/1/21

赫然發現靜態檔案的這一篇忘記寫進css的部分，難怪覺得篇幅怪怪的，會在這個週末把css補齊，並且慢慢的網medium移動文章過去，並且加入新的內容。

在wordpress中，不只是後端，你還需要提供頁面給使用者去做使用，那麼就不可能是純粹的後端來做全部的cover，那麼我們有個更精準與官方的方式來實行這個，我在剛開始寫的時候是使用<script>來做，其實要找code並不容易，而且還有cache的問題更是麻煩..不管如何，雖然wordpress有提供inline的插入，但是我是完全不推薦使用的，我有個開發鐵則，只要在wordpress上使用到Javascript，將全部的script都regist，然後在要使用的時候加入（enqueue）。

註冊我們的script - wp_regist_scripts

我們的開始，先從註冊說起，regist_script可以將我們使用的javascript hook到自己定義的地方，以平常的的需求，我們在前端的頁面之中，需要有頁面的處理，就可以呼叫這個calling hook來做到，大家都是reuse到正確的檔案，一舉兩得。

function wporg_register_scripts() {
       wp_register_script(
             'wporg-your-script-id',                    // Unique name
             plugin_dir_url( __FILE__ ) . '/assets/script.js',   // URL to the file
             array(),                                  // Dependencies
             '1.0.0',                                  // Version
             true                                      // Output in Footer
       );
}
add_action( 'init', 'wporg_register_scripts' );

加入我們的script - wp_enqueue_script/wp_dequeue_script

而當你在已經將你的script註冊之後，當你的頁面需要，使用enqueue與dequeue來做到，匯入與刪除這個javascript hook，特別好用，在整體使用的邏輯更佳順暢，不管是處理模板，或是shortcode上，使用上可以更一致，也就不用每一次還需要regist的一次，畢竟regist這個hook佔的資源很稀少的。

wp_enqueue_script( 'wporg-your-script-id' );

wp_dequeue_script( 'wporg-your-script-id' );

而關於這上述幾個的重要性，在你的外掛之中，如果曾經沒人告訴過你，不要再寫script在你的template或是shortcode，現在我告訴你，不要寫，超級難維護且難找，讓大家用同一個function來處理這個javascript，不香嗎？而且找戰犯很容易，況且在script的部分，也可以處理快取，可以看看以下的評論給的範例，使用version來做處理。

function my_load_scripts($hook) {
 
    // create my own version codes
    $my_js_ver  = date("ymd-Gis", filemtime( plugin_dir_path( __FILE__ ) . 'js/custom.js' ));
    $my_css_ver = date("ymd-Gis", filemtime( plugin_dir_path( __FILE__ ) . 'style.css' ));
     
    // 
    wp_enqueue_script( 'custom_js', plugins_url( 'js/custom.js', __FILE__ ), array(), $my_js_ver );
    wp_register_style( 'my_css',    plugins_url( 'style.css',    __FILE__ ), false,   $my_css_ver );
    wp_enqueue_style ( 'my_css' );
 
}
add_action('wp_enqueue_scripts', 'my_load_scripts');

集中式管理

我們在使用上，不少會將script分散的匯入，但其實在開發的過程中，我們應該是要有autoloader的概念，將script一併的加入regist，會是較可以控制註冊的時間不會過晚的方式，而在呼叫的時節，我們也可能會使用同樣的方式，但是會加上特定的條件來注入不同的script，比如說has_shortcode來判斷是不是我們的shortcode，要不要加入script，而在載入的hook，推薦使用wp_enqueue_scripts來做。

function wporg_enqueue_gallery_scripts() {
       if ( is_singular() && has_shortcode( get_the_content(), 'gallery' ) {
             wp_enqueue_script( 'wporg-your-script-id' );
       }
}
add_action( 'wp_enqueue_scripts', 'wporg_enqueue_gallery_scripts' );

在地化的延伸 wp_localize_script

我們常常可以聽到l10n，是使用__來將特定的文字轉換成該特定的語言文字，而在php與javascript中，也是有提供這種互通的方式來處理，概念可以想像是兩個不同的scope要連接的橋樑，但使用起來更像是將陣列extract到script之中，很實用且可以讓本質也是在地化的函數，將php端的的參數傳過去，而也是不少人將前端在地化的實行方法，使用這個參數來達到，可以看到下面的介紹。

// Register the script
wp_register_script( 'some_handle', 'path/to/myscript.js' );
 
// Localize the script with new data
$translation_array = array(
    'some_string' => __( 'Some string to translate', 'plugin-domain' ),
    'some_number' => '10'
);
wp_localize_script( 'some_handle', 'object_name', $translation_array );
 
// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );

那我們這邊使用Js來接的話，就會對照傳入的陣列資料出來，但是有個需要注意的點，他傳過去的都是string，如果你是要傳數字你需要特別去設定。

alert( object_name.some_string );
parseInt(object_name.some_number);

最後，我們都知道原先的wordpress使用了非常多的jquery，所以一直可以在定義錢號來設定，但在5.0後，可以看到gutenburg，是使用react打造的新武器，我很期待wordpress可以最後去jquery化，把完整的react帶進他每一個使用的優化，甚至是可以在它內部的部分做所有靜態檔案的優化，像是在網站也可以切換正式機與測試機的bundle，這才是給開發者真正的福音！

reference

wp_enqueue_script
wp_localize_script
Including CSS & JavaScript