WordPress WooCommerce 會員後台新增 Amelia 預約日曆並隱藏管理員選單

作者:

在 WooCommerce 會員後台提供更好的用戶體驗，我們可以使用 iframe 嵌入 Amelia 預約日曆，並同時隱藏 WordPress 後台的管理員元素，讓介面更加簡潔。這篇文章將介紹如何透過 WordPress 的 admin_head 和 woocommerce_account_menu_items 來實現這個功能。

步驟 1：如何隱藏 WordPress 管理員選單與工具列

當我們使用 iframe 在 WooCommerce 會員後台嵌入 WordPress 後台頁面時，會看到左側選單、頂部管理工具列等不必要的管理員元素。為了讓介面更簡潔，我們可以透過 admin_head 鉤子，判斷 URL 參數，然後加入 CSS 來隱藏這些元素。

請將以下程式碼新增到 WordPress 主題的 functions.php：

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');

這段程式碼會檢查 URL 是否包含 iframe=true，如果是，則動態插入 CSS 來隱藏不必要的 WordPress 管理員介面元素。

步驟 2：如何在 WooCommerce 會員後台新增「我的日曆」選單

為了讓用戶能夠方便查看自己的 Amelia 預約日曆，我們可以在 WooCommerce 會員後台新增一個「我的日曆」選單，並使用 iframe 來嵌入 WordPress 管理後台的 Amelia 日曆頁面。

請將以下程式碼新增到 functions.php：

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. add_rewrite_endpoint：註冊 ameliacustomercalendar 作為 WooCommerce 會員中心的 URL 端點。

  2. woocommerce_account_menu_items 過濾器：在 WooCommerce 會員中心的「我的課程」選單後面新增「我的日曆」。

  3. woocommerce_account_ameliacustomercalendar_endpoint 鉤子：當用戶點擊「我的日曆」，會顯示一個 iframe，載入 /wp-admin/admin.php?page=wpamelia-calendar&iframe=true。

步驟 3：如何測試與驗證功能是否生效

  1. 確認 WordPress 管理員元素是否隱藏

    • 在網址列手動加入 ?iframe=true，查看管理員選單是否消失。

    • 進入 WooCommerce 會員後台，點擊「我的日曆」，應該只會顯示 Amelia 的日曆。

  2. 確認選單是否新增

    • 進入 WooCommerce 會員後台，看是否有「我的日曆」選單。

    • 點擊「我的日曆」，確保 iframe 正確顯示 Amelia 預約日曆。

結論

透過這篇教學，我們成功在 WooCommerce 會員後台新增了一個「我的日曆」選單，並透過 iframe 嵌入 Amelia 預約系統，同時使用 admin_head 鉤子來隱藏 WordPress 不必要的管理員介面元素。這樣的改動不僅提升了用戶體驗，還讓會員後台更加整潔。

發佈留言