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 Custom Post Type 不要有 slug 前綴?

WPForm 使用 PHP 取得各種資訊的方法

WordPress 被駭了怎麼辦？被攻擊時的檢查和自救方式