在 WordPress 插件中創建自訂後台頁面並加載 CSS 和 JavaScript 文件

在 WordPress 插件開發中，除了創建自訂的後台管理頁面外，您還可能需要為這些頁面加載特定的 CSS 和 JavaScript 文件，以實現頁面的功能和美觀。本節課將指導您如何完成這些操作。

步驟 1：創建和設置插件的主文件

首先，我們需要在插件的主文件中定義一個自訂函數，用於註冊和加載所需的 CSS 和 JavaScript 文件。這個函數將使用 wp_register_style 和 wp_enqueue_style 註冊和加載 CSS 文件，同樣地使用 wp_register_script 和 wp_enqueue_script 來註冊和加載 JavaScript 文件。

• 自訂函數：my_enqueue_style

  function my_enqueue_style() { 
      // 註冊並加載 Bootstrap 樣式表
      wp_register_style('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'); 
      wp_enqueue_style('bootstrap'); 
  
      // 註冊並加載 DataTables 和 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'); 
  
      // 註冊並加載 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'); 
  
      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'); 
  
      // 註冊並加載 DataTables 的按鈕插件和相關資源
      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_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('jszip', 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js', false, '3.1.3'); 
      wp_enqueue_script('jszip'); 
  
      wp_register_script('pdfmake', 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js', false, '0.1.53'); 
      wp_enqueue_script('pdfmake'); 
  
      wp_register_script('vfc_fonts', 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js', false, '0.1.53'); 
      wp_enqueue_script('vfc_fonts'); 
  
      wp_register_script('buttons_html5', 'https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js', false, '1.6.1'); 
      wp_enqueue_script('buttons_html5'); 
  
      wp_register_script('button_print', 'https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js', false, '1.6.1'); 
      wp_enqueue_script('button_print'); 
  
      wp_register_script('buttons_colVis', 'https://cdn.datatables.net/buttons/1.6.1/js/buttons.colVis.min.js', array('jquery'), '1.0.0'); 
      wp_enqueue_script('buttons_colVis'); 
  
      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('tmpl', 'https://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js?ver=1.0.0', array(), '1.0.0', true); 
      wp_enqueue_script('tmpl'); 
  }

步驟 2：綁定 admin_menu 鉤子並加載樣式與腳本

在插件的主文件中使用 add_action 函數來綁定 admin_menu 鉤子，並在自訂函數中加載所需的樣式表和腳本。

• 創建後台菜單並加載資源

  add_action('admin_menu', 'my_admin_page_create1');
  
  function my_admin_page_create1()
  {
      // 創建後台菜單項目
      $temple_light_up = add_menu_page(
          '裝置',               // 頁面標題
          '裝置',               // 菜單標題
          'read',               // 權限要求
          'My_Device1',         // 菜單 slug
          'my_device1',         // 回調函數
          '',                   // 圖標 URL
          10                    // 菜單位置
      );
  
      // 當該頁面被加載時，添加自訂樣式與腳本
      add_action('admin_print_styles-' . $temple_light_up, 'my_enqueue_style');
  }
  
  function my_device1()
  {
      // 包含自訂頁面內容的文件
      include(plugin_dir_path(__FILE__) . 'Pages/my_device1.php');
  }
  

步驟 3：更新後台頁面的 HTML 代碼

接下來，更新 my_device1.php 文件中的 HTML 代碼，以利用引入的 Bootstrap 樣式和功能。

• my_device1.php 文件內容：

  <h3 class="pl-1 pt-2 font-weight-bold">裝置</h3>
  <hr>
  
  <div class="p-1">
      <button class="btn btn-primary m-1" type="button" id="add_btn">新增</button>
  </div>
  

  在這個代碼中，<h3> 和 <button> 元素使用了 Bootstrap 提供的樣式類，這些類可以幫助您快速創建美觀的 UI 元素。