如何在 WooCommerce 中定义自定义产品数据选项卡的图标

Question

我使用以下方法在 WooCommere 中创建了一个自定义产品数据选项卡：

function my_custom_panel(){ ?>
  <div class='panel woocommerce_options_panel'>
    <?php
    woocommerce_wp_text_input(array(
      'id'          => '_my_custom_data',
      'label'       => __('Product Support', 'woocommerce'),
    ));

    ?>
  </div>
<?php }

add_action('woocommerce_product_data_panels', 'my_custom_panel');

现在我正在尝试更改管理屏幕上的图标/破折号：

我尝试更改模板html-product-data-panel.php，但在模板中找不到 dashicon 的相关代码：

<ul class="product_data_tabs wc-tabs">
  <?php foreach (self::get_product_data_tabs() as $key => $tab) : ?>
    <li class="<?php echo esc_attr($key); ?>_options <?php echo esc_attr($key); ?>_tab <?php echo esc_attr(isset($tab['class']) ? implode(' ', (array) $tab['class']) : ''); ?>">
      <a href="#<?php echo esc_attr($tab['target']); ?>"><span><?php echo esc_html($tab['label']); ?></span></a>
    </li>
  <?php endforeach; ?>
  <?php do_action('woocommerce_product_write_panel_tabs'); ?>
</ul>

有什么特殊的钩子吗？如何将自定义图标像其他选项卡一样添加到我的自定义选项卡中？

任何帮助，将不胜感激。

Answer 1

html-product-data-panel.php不是模板文件。所以永远不要编辑插件文件！当 WooCommerce 更新时，它会使用该版本中包含的任何新更新覆盖安装。如果核心已被事先切碎和修改，它\xe2\x80\x99将消除这些更改。

\n

这意味着安装的大部分将停止工作。修改核心可能会产生各种意想不到的后果，例如阻止更新正常工作，进一步搞砸安装。

\n

更糟糕的是可能会引入意外的安全漏洞。弄乱核心文件很容易引入漏洞，让黑客能够接管网站。

\n\n

图标通过 CSS 分配：

\n

// Add custom product setting tab\nfunction filter_woocommerce_product_data_tabs( $default_tabs ) {\n    $default_tabs[\'custom_tab\'] = array(\n        \'label\'     => __( \'Custom Tab\', \'woocommerce\' ),\n        \'target\'    => \'my_custom_tab_data\',\n        \'priority\'  => 80,\n        \'class\'     => array()\n    );\n\n    return $default_tabs;\n}\nadd_filter( \'woocommerce_product_data_tabs\', \'filter_woocommerce_product_data_tabs\', 10, 1 ); \n\n// Contents custom product setting tab\nfunction action_woocommerce_product_data_panels() {\n    // Note the \'id\' attribute needs to match the \'target\' parameter set above\n    echo \'<div id="my_custom_tab_data" class="panel woocommerce_options_panel">\';\n\n    // Add field\n    woocommerce_wp_text_input(array(\n        \'id\'        => \'_my_custom_data\',\n        \'label\'     => __( \'Product Support\', \'woocommerce\' ),\n    ));\n\n    echo \'</div>\';\n}\nadd_action( \'woocommerce_product_data_panels\', \'action_woocommerce_product_data_panels\', 10, 0 );\n\n// Add CSS - icon\nfunction action_admin_head() {\n    echo \'<style>\n        #woocommerce-product-data ul.wc-tabs li.custom_tab_options a::before {\n            content: "\\f101";\n        } \n    </style>\';\n}\nadd_action( \'admin_head\', \'action_admin_head\' );\n

\n\n

注意：通过调整优先级编号，您可以在其他现有选项卡之前或之后显示新选项卡。

\n

对于其他图标，请参阅：开发人员资源：Dashicons

\n