Entfernen Sie WordPress WooCommerce StoreFront Header-Stile

Das WordPress WooCommerce StoreFront-Design stellt Stile in der Kopfzeile des WooCommerce StoreFront Customizer in die Warteschlange;

<style id='storefront-woocommerce-style-inline-css' type="text/css"></style>
<style id='storefront-style-inline-css' type="text/css"></style>

Ich verbringe anscheinend mehr Zeit damit, diese Stile zu korrigieren, als zu definieren, was ich will. Weiß jemand, wie man sie entfernt oder den Storefront Customizer deaktiviert?

Für alle, die damit kämpfen, ist dies die Lösung, die ich gefunden habe:

function my_theme_remove_storefront_standard_functionality() {

//remove customizer inline styles from parent theme as I don't need it.
set_theme_mod('storefront_styles', '');
set_theme_mod('storefront_woocommerce_styles', '');  

}

add_action( 'init', 'my_theme_remove_storefront_standard_functionality' );

Die beiden Inline-CSS wurden in class-storefront-customizer.php hinzugefügt.

Für Inline-CSS im Storefront-Stil abmelden:

add_filter('storefront_customizer_css', '__return_false');

Zum Abmelden von storefront-woocommerce-style-inline-css:

add_filter('storefront_customizer_woocommerce_css', '__return_false');

Ich musste diese kürzlich entfernen, und der beste Weg, dies zu tun, ist die Verwendung Ngoc Nguyens Methode.

Fügen Sie einfach den folgenden Code in Ihre functions.php ein

function wpcustom_deregister_scripts_and_styles(){
    wp_deregister_style('storefront-woocommerce-style');
    wp_deregister_style('storefront-style');
}
add_action( 'wp_print_styles', 'wpcustom_deregister_scripts_and_styles', 100 );

Funktioniert das in Storefront 2.0.4?

Weil ich diese Filter habe:

add_filter( 'storefront_customizer_enabled', '__return_false' );
add_filter( 'storefront_customizer_css', '__return_false' );
add_filter( 'storefront_customizer_woocommerce_css', '__return_false' );

aber ich habe immer noch inline-css.

Der erste Filter wurde im Thema erwähnt:
https://wordpress.org/support/topic/remove-inline-css-1?replies=8

Versuche dies:

add_filter( 'storefront_customizer_enabled',   'woa_storefront_disable_customizer' );

function woa_storefront_disable_customizer() {
    return false;
}

https://github.com/FrancySanchez/storefront-child/blob/master/functions.php

Ich hatte dieses Problem und obwohl meine Lösung ziemlich spezifisch für meine eigene Anwendung ist, finden Sie vielleicht Verwendung darin.

Mein Problem war, dass ich weißen Menütext mit einer hellgrauen Hover-Farbe haben wollte. Standardmäßig scheint das Inline-CSS, mit dem Sie ein Problem haben, die Farbe Ihres Menütexts zu übernehmen, es um einen Faktor aufzuhellen und diese Farbe als Hover-Farbe festzulegen. Offensichtlich kann Weiß nicht aufgehellt werden, also blieb mein Menü beim Hover einfach gleich. So habe ich das gelöst:

In der Datei „class-storefront-customizer.php“, die sich unter wp-content/themes/storefront_child/inc/customizer befindet, sind Funktionen definiert, wie die Oberfläche des Theme-Editors funktioniert. Als erstes habe ich folgende Funktion genommen:

public static function get_storefront_default_setting_values() {
        return apply_filters( 'storefront_setting_default_values', $args = array(
            'storefront_heading_color'               => '#333333',
            'storefront_text_color'                  => '#6d6d6d',
            'storefront_accent_color'                => '#aeaeae',
            'storefront_header_background_color'     => '#ffffff',
            'storefront_header_text_color'           => '#6d6d6d',
            'storefront_header_link_color'           => '#333333',
            'storefront_footer_background_color'     => '#f0f0f0',
            'storefront_footer_heading_color'        => '#333333',
            'storefront_footer_text_color'           => '#6d6d6d',
            'storefront_footer_link_color'           => '#333333',
            'storefront_button_background_color'     => '#eeeeee',
            'storefront_button_text_color'           => '#333333',
            'storefront_button_alt_background_color' => '#333333',
            'storefront_button_alt_text_color'       => '#ffffff',
            'storefront_layout'                      => 'right',
            'background_color'                       => 'ffffff',
        ) );
    }

Und ich habe die var storefront_accent_color als die gewünschte Offset-Farbe festgelegt, in meinem Fall #aeaeae. Dadurch wird die Standardfarbe für den Editor auf diesen Wert gesetzt. Dieser Schritt ist nicht notwendig, macht es aber einfacher.

Ich habe diese Option auch auf den gleichen Wert gesetzt, da ich mir nicht sicher war, was wirklich greifen würde …

$wp_customize->add_setting( 'storefront_accent_color', array(
            'default'               => apply_filters( 'storefront_default_accent_color', '#aeaeae' ),
            'sanitize_callback'     => 'sanitize_hex_color',
        ) );

In Zeile 501 dieser Datei befindet sich die Definition der Funktion get_css(), die das Inline-CSS einrichtet, das Sie sehen und das Sie loszuwerden versuchen. Für mich war der Wert, den ich ändern musste, in diesem Abschnitt:

.main-navigation ul li a:hover,
        .main-navigation ul li:hover > a,
        .site-title a:hover,
        a.cart-contents:hover,
        .site-header-cart .widget_shopping_cart a:hover,
        .site-header-cart:hover > li > a,
        .site-header ul.menu li.current-menu-item > a {
            color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['header_link_color'], 80 ) . ';
        }

Ich habe den Wert dieses CSS-Attributs geändert in:

color: ' . $storefront_theme_mods['accent_color'] . ';

Dies hat die eingestellte Farbe meines Offsets beim Schweben nicht geändert. Was es jedoch tat, war den Editor zu ändern.

Der letzte Schritt besteht also darin, in den Editor zu gehen, auf die Registerkarte Typografie zu gehen, Akzentfarbe auszuwählen, auf die Schaltfläche für die Standardfarbe zu klicken (die jetzt als meine Farbe erscheinen sollte) und dann zu SPEICHERN. Mein Menü funktionierte danach einwandfrei.

Das war ein bisschen lang und nicht ganz das, wonach Sie gefragt haben, aber ich habe alles eingefügt, um zu veranschaulichen, wie Sie die Werte manipulieren können, die in dieses Inline-CSS ausgegeben werden. Hoffentlich hat Ihnen diese Info geholfen.

Falls noch jemand über diese Frage stolpert, hier ist, wie ich es gelöst habe:

1. Erstellen Sie ein untergeordnetes Design aus dem übergeordneten Storefront-Design. (unter diesem Link erfahren Sie, wie das geht: https://developer.wordpress.org/themes/advanced-topics/child-themes/)

2. Fügen Sie in der Datei functions.php des untergeordneten Designs den folgenden Code ein:

   remove_action( 'wp_enqueue_scripts', array( $storefront->customizer, 'add_customizer_css' ), 130 );
   

Es greift im Grunde die Funktion “add_customizer.css” aus der Klasse Storefront_Customizer, die das Inline-CSS hinzufügt, und entfernt diese Hook-Funktion aus den ‘wp_enqueue_scripts’. In der Datei functions.php des Storefront-Designs befindet sich der folgende Code:

    $storefront = (object) array(
    'version'    => $storefront_version,

    /**
     * Initialize all the things.
     */
    'main'       => require 'inc/class-storefront.php',
    'customizer' => require 'inc/customizer/class-storefront-customizer.php',
);

Es speichert die Klasse Storefront_Customizer aus der Datei ‚class-storefront-customizer.php‘ im $storefront-Array und konvertiert das Array dann in ein Objekt.

Indem Sie ein untergeordnetes Design erstellen, können Sie Ihr übergeordnetes Storefront-Design aktualisieren, und die Änderungen gehen nicht verloren.