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

Posted 2023-02-19

【中文标题】如何在 WooCommerce 中为自定义产品数据选项卡定义图标

【英文标题】：How to define an icon for a custom product data tab in WooCommerce

【发布时间】：2022-01-21 13:22:30

【问题描述】：

我在 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，但在模板中找不到破折号的相关代码：

<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>

这有什么特别的钩子吗？如何向我的自定义选项卡添加与其他选项卡一样的自定义图标？

任何帮助将不胜感激。

【参考方案1】：

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

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

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

---

图标是通过 CSS 分配的：

// Add custom product setting tab
function filter_woocommerce_product_data_tabs( $default_tabs ) 
    $default_tabs['custom_tab'] = array(
        'label'     => __( 'Custom Tab', 'woocommerce' ),
        'target'    => 'my_custom_tab_data',
        'priority'  => 80,
        'class'     => array()
    );

    return $default_tabs;

add_filter( 'woocommerce_product_data_tabs', 'filter_woocommerce_product_data_tabs', 10, 1 ); 

// Contents custom product setting tab
function action_woocommerce_product_data_panels() 
    // Note the 'id' attribute needs to match the 'target' parameter set above
    echo '<div id="my_custom_tab_data" class="panel woocommerce_options_panel">';

    // Add field
    woocommerce_wp_text_input(array(
        'id'        => '_my_custom_data',
        'label'     => __( 'Product Support', 'woocommerce' ),
    ));

    echo '</div>';

add_action( 'woocommerce_product_data_panels', 'action_woocommerce_product_data_panels', 10, 0 );

// Add CSS - icon
function action_admin_head() 
    echo '<style>
        #woocommerce-product-data ul.wc-tabs li.custom_tab_options a::before 
            content: "\f101";
         
    </style>';

add_action( 'admin_head', 'action_admin_head' );

---

注意：通过调整优先级数字，您可以在其他现有标签之前或之后显示新标签。

其他图标见：Developer Resources: Dashicons