So definieren Sie ein Symbol für einen benutzerdefinierten Produktdaten-Tab in WooCommerce

Question 1

Ich habe eine benutzerdefinierte Produktdaten-Registerkarte in WooCommere erstellt mit:

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

Jetzt versuche ich, das Symbol/Dashicon auf dem Admin-Bildschirm zu ändern:

Ich habe versucht, die Vorlage zu ändern html-product-data-panel.php aber ich kann den zugehörigen Code zu Dashicons in der Vorlage nicht finden:

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

Gibt es dafür einen speziellen Haken? Wie kann ich ein benutzerdefiniertes Symbol wie die anderen Registerkarten zu meiner benutzerdefinierten Registerkarte hinzufügen?

Jede Hilfe wäre willkommen.

Question 2

html-produktdaten-panel.php ist keine Vorlagendatei. So BEARBEITEN SIE NIEMALS PLUGIN-DATEIEN! Wenn WooCommerce aktualisiert wird, überschreibt es die Installation mit allen neuen Updates, die in der Version enthalten sind. Wenn der Kern zuvor zerhackt und modifiziert wurde, werden diese Änderungen gelöscht.

Das bedeutet, dass große Teile der Installation einfach nicht mehr funktionieren. Das Ändern des Kerns kann alle möglichen unbeabsichtigten Folgen haben, wie z. B. das Verhindern, dass Updates ordnungsgemäß funktionieren, und das weitere Vermasseln einer Installation.

Noch schlimmer ist das Potenzial, unbeabsichtigte Sicherheitslücken einzuführen. Das Herumspielen mit Kerndateien könnte leicht eine Lücke schaffen, die es Hackern ermöglicht, eine Website zu übernehmen.

Das Icon wird per CSS zugewiesen:

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

Notiz: Durch Anpassen der Prioritätsnummer wird die neue Registerkarte vor oder nach anderen vorhandenen Registerkarten angezeigt.

Weitere Symbole finden Sie unter: Entwicklerressourcen: Dashicons