Wordpress WooCommerce StoreFront 헤더 스타일 제거

Wordpress WooCommerce StoreFront 헤더 스타일 제거

Wordpress WooCommerce StoreFront Theme는 WooCommerce StoreFront 커스터마이저의 헤더에 스타일을 큐잉합니다.

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

나는 내가 원하는 것을 정의하는 것보다 이러한 스타일을 바로잡는 데 더 많은 시간을 할애하는 것 같다.Storefront 커스터마이저를 제거하거나 비활성화하는 방법을 아는 사람이 있습니까?

이것과 싸우고 있는 사람들을 위해, 제가 찾은 해결책은 다음과 같습니다.

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

2개의 인라인 CSS가 class-storefront-customizer.php에 추가되었습니다.

storefront-style-inline-css 등록 해제의 경우:

add_filter('storefront_customizer_css', '__return_false');

storefront-woocommerce-style-inline-css 등록 해제의 경우:

add_filter('storefront_customizer_woocommerce_css', '__return_false');

최근에 이것들을 제거해야 했는데, 가장 좋은 방법은 Ngoc Nguyen의 방법을 사용하는 것입니다.

당신의 기능에 아래 코드를 입력하기만 하면 됩니다.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 );

이것은 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

이것을 시험해 보세요.

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

저는 이 문제를 안고 있었습니다만, 제 솔루션은 제 독자적인 어플리케이션에 한정되어 있습니다만, 아마 도움이 될 것입니다.

문제는 밝은 회색의 호버 색상의 흰색 메뉴 텍스트를 원한다는 것이었습니다.디폴트로는 문제가 있는 인라인 css는 메뉴 텍스트 색상을 가져와서 배율만큼 밝게 하고 해당 색상을 호버 색상으로 설정합니다.흰색을 옅게 할 수 없기 때문에, 메뉴도 흔들리지 않습니다.이 문제를 해결한 방법은 다음과 같습니다.

wp-content/temes/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',
        ) );
    }

그리고 저는 #aeaeae의 경우 원하는 오프셋 컬러로 storefront_accent_color var를 설정했습니다.그러면 편집기의 기본 색상이 해당 값으로 설정됩니다.이 순서는 필수는 아니지만, 간단하게 할 수 있습니다.

또, 어느 쪽이 실제로 유효하게 되는지를 알 수 없기 때문에, 이 옵션을 같은 값으로 설정했습니다.

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

이 파일의 501행에는 삭제하려는 인라인 css를 설정하는 함수 get_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 Atribute의 값을 다음과 같이 변경했습니다.

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

이렇게 해도 호버에 있는 오프셋의 설정 색상은 변경되지 않았습니다.그러나 그것이 한 것은 편집기를 바꾼 것이다.

마지막으로 에디터로 이동하여 타이포그래피 탭으로 이동하여 액센트 색상을 선택하고 기본 색상 버튼(현재 내 색상으로 표시됨)을 누른 후 저장합니다.그 후로는 메뉴가 잘 됐어요.

이것은 조금 길고, 당신이 원하는 것은 아니지만, 어떻게 그 인라인 css에 출력되는 값을 조작할 수 있는지를 설명하기 위해 모든 것을 입력했습니다.그 정보가 도움이 됐길 바라.

다른 사람이 이 문제에 대해 실수할 경우를 대비해서 내가 해결한 방법은 다음과 같다.

1. 상위 스토어프런트 테마에서 하위 테마를 만듭니다.(그 방법에 대해서는, https://developer.wordpress.org/themes/advanced-topics/child-themes/) 를 참조해 주세요.

2. 아테마의 기능.php 파일에는 다음 코드를 입력합니다.

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

기본적으로는 클래스 Storefront_Customizer에서 함수 "add_customizer.css"를 가져와 인라인 css를 추가하고 "wp_enqueue_scripts"에서 해당 후크 함수를 제거합니다.점포 테마의 기능.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 배열에 저장한 후 어레이를 개체로 변환합니다.

하위 테마를 만들면 부모 스토어 프런트 테마를 업데이트할 수 있으며 변경 내용이 손실되지 않습니다.

몇 번의 시도 끝에 나는 문제를 해결할 수 있는 최종 해결책을 얻었다.쉽게 생각하면 :-) "class-storefront-customizer.php"에서 다음 행을 삭제하면 동작합니다.

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

허버트 경위

언급URL : https://stackoverflow.com/questions/37262876/remove-wordpress-woocommerce-storefront-header-styles