将管理页面集成到 WooCommerce 扩展中

简介

有多种方法可以管理 WooCommerce 扩展的管理区域页面。您可以使用现有的 PHP 页面或创建新的基于 React 的页面。无论您选择哪种方法，您都需要使用 PageController 注册您的页面，以便在您的页面上显示 WooCommerce 管理器标题和活动面板。

将基于 PHP 的页面连接到 WooCommerce 管理器

要将现有的基于 PHP 的管理页面注册到 PageController，请使用 wc_admin_connect_page() 函数。例如：

wc_admin_connect_page(
    array(
        'id'        => 'woocommerce-settings',
        'screen_id' => 'woocommerce_page_wc-settings-general',
        'title'     => array( 'Settings', 'General' ),
        'path'      => add_query_arg( 'page', 'wc-settings', 'admin.php' ),
    )
);

wc_admin_connect_page() 函数接受一个参数数组，其中两个参数是可选的：

id (必需) - 这用于标识页面和控制器。
parent (可选) - 此值将页面标记为父页面的子页面（使用父页面的 ID），并用于生成面包屑。
screen_id (必需) - 这对应于 PageController::get_current_screen_id()。它用于确定当前页面。（请参见下面的说明）
title (必需) - 这对应于页面的标题，并用于构建面包屑。您可以在此处提供一个字符串或一个面包屑片段的数组。
path (可选) - 这是页面的相对路径。当此页面是父页面时，用于链接面包屑片段。

在上面的示例中，您可以看到如何使用数组来构建您扩展的面包屑。 WooCommerce 将在标题数组中的第一个片段上附加一个链接，该链接指向 path 值。所有后续片段都将以文本形式显示，而不会被链接。

关于确定屏幕 ID 的说明

WooCommerce Admin 使用其自己的 get_current_screen() 函数版本，以便更精确地识别管理页面，这些页面可能具有各种标签和子部分。

此 ID 的格式可能因页面上存在的结构元素而异。该函数将生成以下格式：

{$current_screen->action}-{$current_screen->action}-tab-section
{$current_screen->action}-{$current_screen->action}-tab
{$current_screen->action}-{$current_screen->action} 如果没有标签
{$current_screen->action} 如果没有操作或标签

如果您的扩展添加了带有标签或子部分的页面，请务必使用 wc_admin_pages_with_tabs 和 wc_admin_page_tab_sections 过滤器，以便 WooCommerce 为它们生成准确的屏幕 ID。

您还可以使用 wc_admin_current_screen_id 过滤器来对屏幕 ID 生成行为进行任何必要的更改。

注册一个基于 React 的页面

要注册一个基于 React 的页面，请使用 wc_admin_register_page() 函数。它接受一个参数数组：

id (必需) - 这用于标识页面和控制器。
parent (可选) - 这将页面标记为 parent 的子页面（使用父页面的 ID），并用于生成面包屑。
title (必需) - 这对应于页面的标题，并用于构建面包屑。您可以在此处提供一个字符串或面包屑片段的数组。
path (必需) - 这是页面的路径（相对于 #wc-admin）。它用于标识此页面，并且当此页面是父页面时，用于链接面包屑片段。
capability (可选) - 访问此页面所需的用户权限。默认值为 manage_options。
icon (可选) - 使用此选项可以应用 Dashicons 辅助类或 Base64 编码的 SVG。包含完整的 dashicon 类名，例如 dashicons-*。请注意，这不会包含在 WooCommerce Admin 导航中。
position (可选) - 父页面的菜单项位置。参见：add_menu_page()。

注册一个基于 React 的页面类似于连接一个 PHP 页面，但有一些关键区别。注册页面将自动为它们创建 WordPress 菜单项，并根据 parent 的值创建适当的层级结构。

示例：添加一个新的 WooCommerce 管理员页面

if ( ! function_exists( 'YOUR_PREFIX_add_extension_register_page' ) ) {
  function YOUR_PREFIX_add_extension_register_page() {
    if ( ! function_exists( 'wc_admin_register_page' ) ) {
        return;
    }

    wc_admin_register_page( array(
        'id'       => 'my-example-page',
        'title'    => __( 'My Example Page', 'YOUR-TEXTDOMAIN' ),
        'parent'   => 'woocommerce',
        'path'     => '/example',
    ) );
  }
}
add_action( 'admin_menu', 'YOUR_PREFIX_add_extension_register_page' );

在上面的示例中，我们把对 wc_admin_register_page() 函数的调用封装在一个函数中，并将该函数连接到 admin_menu 动作钩子。一旦您在控制器中注册了一个页面，您就可以在客户端提供一个 React 组件。

import { addFilter } from '@wordpress/hooks';
import { __ } from '@wordpress/i18n';

const MyExamplePage = () => <h1">My Example Extension</h1>;

addFilter( 'woocommerce_admin_pages_list', 'my-namespace', ( pages ) => {
	pages.push( {
		container: MyExamplePage,
		path: '/example',
		breadcrumbs: [ __( 'My Example Page', 'YOUR-TEXTDOMAIN' ) ],
	} );

	return pages;
} );

在上面的代码中，我们创建了一个简单的函数式 React 组件用于演示，但一个真实的扩展程序很可能具有更复杂的组件嵌套结构。

简介​

将基于 PHP 的页面连接到 WooCommerce 管理器​

关于确定屏幕 ID 的说明​

注册一个基于 React 的页面​

示例：添加一个新的 WooCommerce 管理员页面​

更多阅读​

简介

将基于 PHP 的页面连接到 WooCommerce 管理器

关于确定屏幕 ID 的说明

注册一个基于 React 的页面

示例：添加一个新的 WooCommerce 管理员页面

更多阅读