WooCommerce 會員後台嵌入 Amelia 預約日曆與隱藏管理員選單實作筆記

前言

在 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');
標籤
分享

相關文章