WordPress 裡如何正確使用 wp_add_inline_script？

在製作 shortocde 時我們會習慣將 JavaScript 程式碼直接寫在裡面，這就會造成 script 標籤卡在 HTML 標籤裡，潛在的影響網頁讀取的效能 (Script Blocking)。

但我們也不想要將 JavaScript 獨立成另外一個檔案做引入時，我們就可以使用 wp_add_inline_script 這個方法並且搭配 wp_enqueue_script 來幫助我們解決這個問題。

要完成這件事情有幾個要素：

1. 定義好你的 script handler 名稱，並且做 wp_register_script
2. 準備一個輸出 script 的 function 程式碼，並且透過 wp_add_inline_script 加入
3. 設定 wp_enqueue_script

定義好你的 script handler 名稱，並且做 wp_register_script

wp_register_script( 'my_custom_app_shortcode_js', '', array('jquery'));

準備一個輸出 script 的 function 程式碼

function my_custom_app_shortcode_js() {
 ob_start();
  ?>
  <script defer>console.log('hello')</script>
  <?php
 return  ob_clean();
}

$inline = my_custom_app_shortcode_js();
    wp_add_inline_script(
        'my_custom_app_shortcode_js', 
        $inline
    );

設定 wp_enqueue_script

wp_enqueue_script('my_custom_app_shortcode_js');

延伸推薦

在 WordPress 用程式的方式更新媒體庫檔案的 alt 替代文字

Advanced Custom Fields (ACF) 不支援 Custom Post Type Label WPML 翻譯的解決方法

WPForm 實作 utm 追蹤的方式