6

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

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

任何帮助，将不胜感激。

4

1 回答 1

4

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

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

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

于 2021-12-19T16:30:48.020 回答