在 WordPress 中註冊和加載 CSS 和 JavaScript 文件

在 WordPress 開發中，經常需要將外部的 CSS 和 JavaScript 文件引入到您的主題或插件中。這通常是通過 wp_register_style 和 wp_enqueue_style 函數來實現的，用於 CSS 文件；對於 JavaScript 文件，則使用 wp_register_script 和 wp_enqueue_script 函數。本節課將介紹這些函數的使用方法，並通過具體範例來展示如何正確地在 WordPress 中加載外部資源。

wp_register_style 和 wp_enqueue_style

wp_register_style 函數用於在 WordPress 中註冊一個新的樣式表（CSS 文件），但不會立即加載。這意味著您可以根據需要在後續的流程中再選擇是否加載它。wp_enqueue_style 函數則用於實際將已註冊的樣式表加載到網頁上。

• 範例：註冊並加載 Bootstrap 和 Semantic UI 的樣式表

  // 註冊 Bootstrap 的樣式表
  wp_register_style('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');
  wp_enqueue_style('bootstrap');
  
  // 註冊並加載 DataTable 和 Semantic UI 的樣式表
  wp_register_style('semanticui', 'https://cdn.datatables.net/1.10.20/css/dataTables.semanticui.min.css');
  wp_enqueue_style('semanticui');
  
  wp_register_style('semantic_ui', 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css');
  wp_enqueue_style('semantic_ui');
  
  // 註冊並加載 DataTable 的按鈕樣式表
  wp_register_style('buttons_semanticui', 'https://cdn.datatables.net/buttons/1.6.1/css/buttons.semanticui.min.css');
  wp_enqueue_style('buttons_semanticui');
  

  代碼解釋：

  • wp_register_style('handle', 'src'): 註冊一個樣式表，其中 handle 是樣式表的識別名，src 是樣式表的 URL。
  • wp_enqueue_style('handle'): 加載已註冊的樣式表。

wp_register_script 和 wp_enqueue_script

wp_register_script 函數用於在 WordPress 中註冊一個新的 JavaScript 腳本，但不會立即加載。wp_enqueue_script 函數則用於實際將已註冊的 JavaScript 腳本加載到網頁上。

• 範例：註冊並加載 Bootstrap 和 DataTable 的 JavaScript 文件

  // 註冊 Bootstrap 的 JavaScript 文件
  wp_register_script('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', false, '4.3.1');
  wp_enqueue_script('bootstrap');
  
  // 註冊並加載 DataTable 和相關插件的 JavaScript 文件
  wp_register_script('data_tables', 'https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js', false, '1.10.20');
  wp_enqueue_script('data_tables');
  
  wp_register_script('data_tables_semanticui', 'https://cdn.datatables.net/1.10.20/js/dataTables.semanticui.min.js', false, '1.10.20');
  wp_enqueue_script('data_tables_semanticui');
  
  wp_register_script('datatable_button', 'https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js', false, '1.6.1');
  wp_enqueue_script('datatable_button');
  
  wp_register_script('buttons4_databales', 'https://cdn.datatables.net/buttons/1.6.1/js/buttons.semanticui.min.js', array('jquery'), '1.6.1');
  wp_enqueue_script('buttons4_databales');
  
  wp_register_script('sweetalert2', 'https://cdn.jsdelivr.net/npm/sweetalert2@9.10.10/dist/sweetalert2.all.min.js', array(), '9.10.10', true);
  wp_enqueue_script('sweetalert2');
  

  代碼解釋：

  • wp_register_script('handle', 'src', deps, ver, in_footer): 註冊一個 JavaScript 文件，其中 handle 是腳本的識別名，src 是腳本的 URL，deps 是腳本的依賴（可以是空的），ver 是版本號，in_footer 確定腳本是否加載在頁腳（true）還是頁頭（false）。
  • wp_enqueue_script('handle'): 加載已註冊的腳本。

組合使用範例

在 WordPress 開發中，將上述方法結合使用，可以輕鬆地控制樣式表和腳本的加載順序和依賴性，確保您的主題或插件在頁面上正確渲染。

• 完整範例：註冊並加載 Bootstrap、DataTables 和相關資源

  // 註冊並加載 Bootstrap 的樣式和腳本
  wp_register_style('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');
  wp_enqueue_style('bootstrap');
  
  wp_register_script('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', false, '4.3.1', true);
  wp_enqueue_script('bootstrap');
  
  // 註冊並加載 Semantic UI 的樣式和 DataTables 的相關資源
  wp_register_style('semantic_ui', 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css');
  wp_enqueue_style('semantic_ui');
  
  wp_register_script('data_tables', 'https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js', array('jquery'), '1.10.20', true);
  wp_enqueue_script('data_tables');
  
  wp_register_script('data_tables_semanticui', 'https://cdn.datatables.net/1.10.20/js/dataTables.semanticui.min.js', array('jquery', 'data_tables'), '1.10.20', true);
  wp_enqueue_script('data_tables_semanticui');