移除WordPress WooCommerce StoreFront主题的页眉样式。

7
Wordpress的WooCommerce StoreFront主题会从WooCommerce StoreFront自定义器中在头部排队加载样式;
<style id='storefront-woocommerce-style-inline-css' type='text/css'></style>
<style id='storefront-style-inline-css' type='text/css'></style>

我似乎花费了更多的时间在修正这些样式上,而不是定义我想要的。有人知道如何删除它们或禁用 Storefront 定制器吗?

头部样式


我发现 storefront>inc>class-storefront.php 的第181行和 storefront>inc>woocommerce>class-storefront-woocommerce.php 的第76行有一些引用... 如果这能帮到你的话。在这两个文件的开头,有一些注册钩子。我会删除我的回答... 希望你能快速找到解决方案。 - LoicTheAztec
我认为这是一个钩子中的钩子。 - Stuart
8个回答

14

如果您正在处理此问题,这是我找到的解决方案:

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

1
谢谢!我已经和这个东西斗争了太久了。 - Tim

11

在 class-storefront-customizer.php 中添加了两个内联 CSS。

对于去注册 storefront-style-inline-css:

add_filter('storefront_customizer_css', '__return_false');

取消注册 storefront-woocommerce-style-inline-css 样式表:

add_filter('storefront_customizer_woocommerce_css', '__return_false');

还是不行。我已经花了数小时尝试弄清楚这个问题。 - Stuart

6

最近我不得不移除这些内容,而最好的方法是使用Ngoc Nguyen的方法

只需将以下代码放入您的functions.php中即可。

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

有帮助,但并没有完全回答 OP 想要的问题。这将删除 Storefront 加载的样式,而不是它在 <head> 中添加的内联样式。 - Brad Adams
+1。这帮助我摆脱了 storefront 添加到我的主题中的 woocommerce.css 样式。我自己永远不会想到解决方法。 - ecg8

0

我之前一直遇到这个问题,虽然我的解决方案对于我的应用程序来说非常具体,但你可能会从中受益。

我的问题是,我想要白色的菜单文字,并且在悬停时显示浅灰色。默认情况下,你所遇到的内联CSS似乎会获取你的菜单文字颜色,将其变亮并将该颜色设置为悬停颜色。显然,白色无法变亮,所以我的菜单在悬停时保持不变。以下是我解决这个问题的方法:

在位于wp-content/themes/storefront_child/inc/customizer的文件“class-storefront-customizer.php”中,定义了有关主题编辑器界面如何工作的函数。首先,我使用了以下函数:

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

我将 storefront_accent_color 变量设置为我想要的偏移颜色,例如 #aeaeae。这将默认颜色设置为该值以供编辑器使用。这一步骤并非必需,但确实使它更容易。

我还将此选项设置为相同的值,因为我不确定哪个会真正生效...

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

在该文件的第501行是函数get_css()的定义,它设置了您试图摆脱的内联CSS。对我来说,我需要更改的值在这个部分中:
.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 ) . ';
        }

我将这个CSS属性的值改为:

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

这并没有改变我的悬停偏移的设置颜色。然而,它确实改变了编辑器。

因此,最后一步是进入编辑器,转到排版选项卡,选择强调颜色,点击默认颜色按钮(现在应该显示为我的颜色),然后保存。之后我的菜单就正常工作了。

这有点冗长,不太符合你的要求,但我把它全部放在这里是为了说明如何操作输出到内联 CSS 中的值。希望这些信息能对你有所帮助。


0

0
这在 Storefront 2.0.4 中工作吗?
因为我有这些过滤器:
add_filter( 'storefront_customizer_enabled', '__return_false' );
add_filter( 'storefront_customizer_css', '__return_false' );
add_filter( 'storefront_customizer_woocommerce_css', '__return_false' );

但我仍然有内联 CSS。

第一个过滤器在主题中提到: https://wordpress.org/support/topic/remove-inline-css-1?replies=8


0

如果有人也遇到了这个问题,以下是我解决的方法:

  1. 从父 storefront 主题创建一个子主题。 (请参阅此链接以了解如何执行此操作:https://developer.wordpress.org/themes/advanced-topics/child-themes/
  2. 在子主题的 functions.php 文件中放入以下代码:

    remove_action( 'wp_enqueue_scripts', array( $storefront->customizer, 'add_customizer_css' ), 130 );
    
它基本上从类Storefront_Customizer中获取函数“add_customizer.css”,该函数添加内联CSS,并从'wp_enqueue_scripts'中删除该挂钩函数。 在商店主题的functions.php文件中,有以下代码:
    $storefront = (object) array(
    'version'    => $storefront_version,

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

它的功能是将文件“class-storefront-customizer.php”中的类Storefront_Customizer存储在$storefront数组中,然后将该数组转换为对象。
通过创建子主题,您可以更新父 storefront 主题,而不会丢失更改。

-1

经过多次尝试,我得到了一个最终的解决方案来解决这个问题! 它太简单了,难以置信 :-) 在 "class-storefront-customizer.php" 中删除以下行,它就可以工作:

    add_action( 'wp_enqueue_scripts',array( $this, 'add_customizer_css' ), 130 );

敬礼 Herbert


在 storefront 主题中删除一行将会在第一个 storefront 更新时破坏主题。 - Maciej Paprocki

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接