如何添加商店管理链接

简介

在新的和改进的 WooCommerce 主界面中，有两个扩展点供插件开发者使用，这些扩展点最近受到了广泛关注。第一个是设置任务列表，允许您提醒用户需要完成的任务，并跟踪他们的进度。

第二个是商店管理链接部分。当用户完成设置任务后，此部分将显示给他们。此部分汇总了一系列方便的导航链接，方便商家快速找到 WooCommerce 中的功能。

用户发现功能可能很困难，因此这可以是一个很好的地方，用于突出显示您插件的功能，并允许用户轻松找到您插件提供的关键功能。

添加您自己的商店管理链接是一个简单的过程。

添加您自己的商店管理链接

在开始之前，让我们概述一些关于此功能的限制。

目前，这些链接的设计目的是将用户保留在 WooCommerce 内部，因此不支持外部链接。

您添加的所有链接都将属于列表中的一个特殊分类，称为“扩展”。目前不支持自定义分类。

考虑到这些因素，让我们开始吧。

第一步 - 注册 JavaScript

添加商店管理链接的所有操作都将在 JavaScript 中完成，因此第一步是注册您的脚本，该脚本将添加商店管理链接。最重要的是确保您的脚本在商店管理链接部分渲染之前运行。

为了确保您的脚本在我们脚本之前运行，您需要使用比 15 更高的优先级注册它。您还需要依赖 wp-hooks 以获取 addFilter 的访问权限。

示例：

function enqueue_management_link_script() {
    wp_enqueue_script( $script_name, $script_url, array( 'wp-hooks' ), 10 );
}

add_action( 'admin_enqueue_scripts', 'enqueue_management_link_script' );

第二步 - 安装 @wordpress/icons

为了为您的商店管理链接提供您选择的图标，您需要在您的 JavaScript 项目中安装 @wordpress/icons：

npm install @wordpress/icons --save

第三步 - 添加您的过滤器

您的脚本需要使用 addFilter 将您的自定义链接提供给商店管理链接部分。您还需要从 @wordpress/icons 导入您选择的图标。以下是一个示例：

import { megaphone } from "@wordpress/icons";
import { addFilter } from "@wordpress/hooks";

addFilter(
  "woocommerce_admin_homescreen_quicklinks",
  "my-extension",
  (quickLinks) => {
    return [
      ...quickLinks,
      {
        title: "My link",
        href: "link/to/something",
        icon: megaphone,
      },
    ];
  }
);

以下是使用我们新的自定义商店管理链接的屏幕截图：