WooCommerce에서 사용자 지정 제품 데이터 탭의 아이콘을 정의하는 방법

WooCommerce에서 사용자 지정 제품 데이터 탭의 아이콘을 정의하는 방법

WooComere에서 다음을 사용하여 사용자 지정 제품 데이터 탭을 만들었습니다.

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>

이것을 위한 특별한 갈고리가 있습니까?다른 탭과 같은 사용자 지정 아이콘을 사용자 지정 탭에 추가하려면 어떻게 해야 합니까?

어떤 도움이라도 주시면 감사하겠습니다.

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

---

참고: 우선 순위 번호를 조정하면 기존의 다른 탭 앞 또는 뒤에 새 탭이 표시됩니다.

기타 아이콘은 개발자 리소스: 대시 아이콘

언급URL : https://stackoverflow.com/questions/70413126/how-to-define-an-icon-for-a-custom-product-data-tab-in-woocommerce