在 WooCommerce 會員後台嵌入 Amelia 預約日曆，可以讓用戶直接查看與管理預約，提升使用體驗。但直接嵌入 WordPress 後台頁面時，會看到不必要的管理員選單與工具列，影響介面整潔度。本文將介紹如何利用 WordPress 的 admin_head 鉤子與 WooCommerce 的會員選單過濾器，達成隱藏管理員元素並新增「我的日曆」選單的功能。

隱藏 WordPress 管理員選單與工具列

當 iframe 載入 WordPress 後台 Amelia 預約頁面時，左側選單、頂部工具列等管理員元素會干擾介面。透過 admin_head 鉤子判斷 URL 是否帶有 iframe=true 參數，動態插入 CSS 隱藏這些元素，並調整內容區域寬度與頁面邊距。

關鍵程式碼片段：

function hide_admin_elements_for_iframe() {
 if (isset($_GET['iframe']) && $_GET['iframe'] == 'true') {
  echo '
<style>
   #adminmenumain, #wpadminbar, .update-nag, #screen-meta, #screen-options-link-wrap, #contextual-help-link-wrap {
    display: none !important;
   }
   #wpcontent, #wpfooter { margin-left: 0; }
   html.wp-toolbar { padding-top: 0 !important; }
   body { margin: 0; padding: 0; }
   #wpfooter { display: none !important; }
  </style>';
 }
}
add_action('admin_head', 'hide_admin_elements_for_iframe');

這段程式碼確保只有在 iframe 模式下才隱藏管理員介面元素，避免影響正常管理操作。

在 WooCommerce 會員後台新增「我的日曆」選單

為方便用戶直接在會員中心查看 Amelia 預約日曆，使用 add_rewrite_endpoint 註冊新端點 ameliacustomercalendar，並透過 woocommerce_account_menu_items 過濾器在「我的課程」後新增「我的日曆」選單。

點擊「我的日曆」時，利用 woocommerce_account_ameliacustomercalendar_endpoint 鉤子輸出 iframe，載入 Amelia 預約日曆頁面，並帶入 iframe=true 參數以隱藏管理員元素。

關鍵程式碼片段：

function add_ameliacustomercalendar_to_myaccount_menu() {
 add_rewrite_endpoint('ameliacustomercalendar', EP_ROOT | EP_PAGES);

 add_filter('woocommerce_account_menu_items', function($menu_links) {
  $new_menu_links = [];
  foreach ($menu_links as $key => $label) {
   $new_menu_links[$key] = $label;
   if ($key === 'ameliacustomerpanel') {
    $new_menu_links['ameliacustomercalendar'] = '我的日曆';
   }
  }
  return $new_menu_links;
 });

 add_action('woocommerce_account_ameliacustomercalendar_endpoint', function() {
  echo '<iframe width="100%" height="600" src="/wp-admin/admin.php?page=wpamelia-calendar&iframe=true"></iframe>';
 });
}
add_action('init', 'add_ameliacustomercalendar_to_myaccount_menu');

測試與驗證

1. 在瀏覽器網址列加入 ?iframe=true，確認 WordPress 管理員選單與工具列是否隱藏。
2. 進入 WooCommerce 會員後台，確認「我的日曆」選單是否出現。
3. 點擊「我的日曆」，檢查 iframe 是否正確載入 Amelia 預約日曆，且無多餘管理員元素。

延伸與常見坑

• 若使用快取插件，新增端點後可能需要刷新重寫規則（Permalinks）。
• iframe 高度可依需求調整，避免出現滾動條。
• 確保 Amelia 預約系統權限設定允許會員查看。

完整程式碼

function hide_admin_elements_for_iframe() {
 if (isset($_GET['iframe']) && $_GET['iframe'] == 'true') {
  echo '
<style>
   #adminmenumain, /* 左側選單 */
   #wpadminbar, /* 頂部管理工具列 */
   .update-nag, /* 更新通知 */
   #screen-meta, /* 屏幕選項 */
   #screen-options-link-wrap, /* 屏幕選項按鈕 */
   #contextual-help-link-wrap /* 說明按鈕 */
   {
    display: none !important;
   }
   #wpcontent, #wpfooter{
    margin-left: 0;
   }
   html.wp-toolbar {
    padding-top: 0 !important;
   }
   body {
    margin: 0;
    padding: 0;
   }
   #wpfooter{
    display: none !important;
   }
  </style>';
 }
}
add_action('admin_head', 'hide_admin_elements_for_iframe');

function add_ameliacustomercalendar_to_myaccount_menu() {
 add_rewrite_endpoint('ameliacustomercalendar', EP_ROOT | EP_PAGES);

 add_filter('woocommerce_account_menu_items', function($menu_links) {
  $new_menu_links = [];
  foreach ($menu_links as $key => $label) {
   $new_menu_links[$key] = $label;
   if ($key === 'ameliacustomerpanel') {
    $new_menu_links['ameliacustomercalendar'] = '我的日曆';
   }
  }
  return $new_menu_links;
 });

 add_action('woocommerce_account_ameliacustomercalendar_endpoint', function() {
  echo '<iframe width="100%" height="600" src="/wp-admin/admin.php?page=wpamelia-calendar&iframe=true"></iframe>';
 });
}
add_action('init', 'add_ameliacustomercalendar_to_myaccount_menu');

在整合 WordPress 插件如 Amelia 預約系統時，常需要從 WordPress 使用者中取得對應的 Amelia 使用者 ID。這對於同步使用者資料或進行特定預約操作非常重要。本文針對如何透過 PHP 及 WordPress 資料庫物件 $wpdb 查詢 Amelia 使用者 ID 進行說明，適合有基礎 PHP 與 WordPress 開發經驗的工程師或自學者。

函式說明

以下函式 get_amelia_user_id 主要功能是透過 WordPress 使用者 ID 查詢 Amelia 系統中對應的使用者 ID。若查無資料，則回傳 false。

function get_amelia_user_id($wp_user_id) {
    if (empty($wp_user_id)) {
        return false; // 如果 WordPress 使用者 ID 為空，直接回傳 false
    }
    global $wpdb; // 呼叫 WordPress 資料庫全域物件
    $user_table = $wpdb->prefix . 'amelia_users'; // Amelia 的資料表名稱
    $a_uid = $wpdb->get_results($wpdb->prepare("SELECT id FROM {$user_table} WHERE externalId = %d", $wp_user_id), ARRAY_A);
    if (count($a_uid) > 0) {
        return $a_uid[0]['id']; // 如果找到結果，回傳第一筆的 id
    } else {
        return false; // 沒有找到結果時回傳 false
    }
}

函式細節說明

1. 檢查輸入值是否有效：
   • 使用 empty() 判斷 $wp_user_id 是否為空，避免無意義的資料庫查詢。
2. 資料表命名：
   • 利用 $wpdb->prefix 動態取得 WordPress 資料表前綴，確保資料表名稱正確。
3. 安全查詢：
   • 使用 $wpdb->prepare 來避免 SQL 注入風險，確保查詢安全。
4. 回傳邏輯：
   • 若查詢結果非空，回傳第一筆資料的 id，否則回傳 false。

實際應用場景

• 自動同步 WordPress 使用者與 Amelia 使用者資料，確保兩邊資料一致。
• 根據 WordPress 使用者身份執行 Amelia 預約系統的特定操作。
• 在後台管理介面快速查詢 Amelia 使用者資料，提升管理效率。

常見坑與建議

• 確認 Amelia 資料表名稱與結構，避免因版本差異導致查詢失敗。
• 建議在實務中加入錯誤處理與日誌記錄，提升系統穩定性與除錯效率。
• 若系統使用多語系或多站台，需注意資料表前綴與使用者 ID 的對應關係。

完整程式碼

function get_amelia_user_id($wp_user_id) {
    if (empty($wp_user_id)) {
        return false; // 如果 WordPress 使用者 ID 為空，直接回傳 false
    }
    global $wpdb; // 呼叫 WordPress 資料庫全域物件
    $user_table = $wpdb->prefix . 'amelia_users'; // Amelia 的資料表名稱
    $a_uid = $wpdb->get_results($wpdb->prepare("SELECT id FROM {$user_table} WHERE externalId = %d", $wp_user_id), ARRAY_A);
    if (count($a_uid) > 0) {
        return $a_uid[0]['id']; // 如果找到結果，回傳第一筆的 id
    } else {
        return false; // 沒有找到結果時回傳 false
    }
}