WordPress 게시물에서 WooCommerce 스타일 및 스크립트를 비활성화하는 방법은 무엇입니까?

WooCommerce는 온라인 상점 설정을 위한 가장 인기 있는 WordPress 플러그인입니다. WordPress의 동일한 개발자가 제공하기 때문에 소규모에서 대규모 비즈니스 요구 사항을 지원하기 위해 원활하게 작동합니다. 그러나 문제는 WooCommerce가 사이트의 페이지 로딩 속도를 상당히 줄이는 방식으로 발생합니다. 가장 좋은 옵션은 필요하지 않은 WordPress 게시물에서 WooCommerce 스타일과 스크립트를 비활성화하는 것입니다. 이런 식으로 WooCommerce의 힘을 활용하고 게시물을 빠르게 로드할 수 있습니다.

개선 시나리오

WooCommerce 플러그인은 배송, 세금 등을 지원하는 실제 비즈니스를 위한 것입니다. 따라서 본격적인 전자 상거래 상점이 있는 경우 사이트의 각 제품 페이지에 플러그인이 필요하므로 개선할 수 있는 사항이 많지 않습니다. 제품 페이지 로딩 속도를 높이려면 WooCommerce에 최적화된 호스팅 회사를 사용해야 할 것입니다. WooCommerce 플러그인으로 느린 페이지 로딩 속도를 수정하는 방법에 대한 기사를 확인할 수 있습니다.

그러나 이 기사에서는 블로거가 직면하는 다양한 시나리오에 대해 논의할 것입니다. 많은 블로거들은 WooCommerce 플러그인에 최적화된 상용 테마를 사용합니다. 따라서 플러그인의 의도된 목적을 모른 채 전자책과 같은 단순한 디지털 제품을 판매하기 위해 플러그인을 빠르게 사용하는 경향이 있습니다. 예를 들어 상품 페이지가 10개이고 일반 게시물이 1000개일 때 WooCommerce를 사용하는 것은 의미가 없습니다. 이 경우 1000개의 모든 게시물이 WooCommerce 플러그인의 CSS 및 JS 파일을 로드하므로 전체 사이트 속도가 감소합니다.

이는 WooCommerce 플러그인이 제품을 판매하려는 페이지에 로드된 리소스를 비활성화하는 방법을 제공하지 않기 때문입니다. 이유는 또한 많은 사이트의 상단 탐색 모음에 장바구니 버튼이 있으므로 주문 세부 정보를 동적으로 업데이트하기 위해 플러그인 리소스가 필요하기 때문입니다. 장바구니 AJAX 호출과 이에 따른 속도 영향에 대한 이전 기사에서 설명했습니다. WooCommerce를 사용하고 싶었지만 일반 게시물/페이지에서 플러그인의 CSS 및 JS를 제거하고 싶다면 아래 옵션 중 하나를 따르세요.

또한 Google PageSpeed ​​Insights는 페이지에서 사용하지 않는 CSS 및 JS를 제거하여 속도 점수를 낮추도록 경고합니다.

WooCommerce 스타일 및 스크립트

먼저 플러그인에 의해 로드된 리소스를 확인합시다. 사이트에서 캐싱 플러그인을 비활성화하고 라이브 페이지의 소스 코드를 확인하기만 하면 됩니다. 장바구니, WooCommerce 차단 또는 제품이 없는 게시물 또는 페이지를 선택할 수 있습니다. Chrome에서 아래와 같이 보일 것입니다.

플러그인은 /wp-content/plugins/WooCommerce/assets/에서 CSS/JS 파일을 로드하고 /wp-content/plugins/WooCommerce/packages/WooCommerce-blocks/build에서 스타일을 차단합니다. 페이지에는 제품을 판매하려는 제품이나 장바구니가 없기 때문에 아래 리소스는 모두 쓸모가 없습니다.

참고: 위 파일은 21 테마의 버전 5.7.2에 있습니다. 테마의 WooCommerce 설정에 따라 사이트에 설치된 플러그인 버전과 다른 CSS 파일을 볼 수 있습니다. 또한 플러그인에 의해 로드된 woocommerce.woff와 같은 글꼴을 볼 수도 있습니다.

WooCommerce 스타일 및 스크립트 비활성화

제품 관련 항목이 없는 WordPress 게시물에서 WooCommerce 스타일 및 스크립트를 비활성화하는 다음 옵션에 대해 설명합니다.

• 프리미엄 플러그인 사용
• 무료 플러그인 사용
• 사용하지 않는 WooCommerce 리소스를 수동으로 비활성화

좋은 점은 WordPress에 사이트에서 사용하지 않는 CSS 및 JS를 비활성화하는 플러그인이 있다는 것입니다.

옵션 #1 – Perfmatters 프리미엄 플러그인 사용

Perfmatters는 WooCommerce 플러그인을 최적화하는 데 도움이 되는 프리미엄 전용 플러그인입니다. Perfmatters를 첫 번째 옵션으로 언급한 이유는 클릭 몇 번으로 전체 사이트의 게시물/페이지에서 WooCommerce 스타일과 스크립트를 비활성화할 수 있기 때문입니다. 이것은 코드를 편집하고 싶지 않거나 무료 플러그인에 너무 많은 시간을 할애하고 싶지 않은 초보자에게 적극 권장됩니다. 또한 Perfmatters의 스크립트 관리자 옵션을 사용하여 게시물/페이지별로 사용하지 않는 CSS 및 JS 파일을 비활성화할 수도 있습니다.

플러그인 비용은 1년 무료 업데이트 및 지원과 함께 $24.95입니다. 플러그인을 설치한 후 라이선스를 활성화하여 업데이트를 받으십시오.

• "설정 > 성능" 메뉴로 이동하여 "옵션 > 일반" 섹션으로 이동합니다.
• 맨 아래로 스크롤하여 "WooCommerce" 섹션에서 "UoCommerce의 특정 요소 비활성화"를 확인합니다.
• 제품 페이지, 장바구니 및 체크아웃 페이지를 제외한 전체 사이트에서 WooCommerce 스크립트를 비활성화하려면 "스크립트 비활성화" 옵션을 켜십시오.
• 필요한 경우 장바구니 조각화, 메타 상자 및 위젯을 비활성화하는 다른 옵션을 켤 수도 있습니다.
• 사이트의 게시물/페이지에서 모든 WooCommerce 스크립트를 비활성화하려면 "변경 사항 저장" 버튼을 클릭하십시오.

이제 게시물의 소스 코드를 확인하십시오. 아래 스크린샷에서 볼 수 있듯이 모든 스타일과 스크립트가 비활성화되고 WooCommerce 글꼴만 로드됩니다.

플러그인은 또한 포스트별로 스타일/스크립트를 제거하고자 할 때 유용한 스크립트 관리자를 제공합니다. 먼저 "옵션 > 자산" 섹션에서 "스크립트 관리자"를 활성화해야 합니다.

게시물을 편집할 때 상단 관리자 표시줄에서 "스크립트 관리자"를 클릭하고 불필요한 스타일 및 스크립트를 비활성화합니다.

모든 WooCommerce 스타일/스크립트를 비활성화하고 "위치"를 "모든 곳"으로 선택합니다. 필요한 경우 이러한 스타일/스크립트가 제품 페이지에 로드되도록 제품, 제품 카테고리 및 제품 태그로 예외를 제공할 수 있습니다. 그렇지 않으면 전체 사이트에서 WooCommerce 리소스를 완전히 비활성화할 수 있습니다. 설정을 저장하고 관리 표시줄에서 옵션을 클릭하여 스크립트 관리자를 닫습니다.

이제 소스를 확인하여 글꼴을 제외한 모든 WooCommerce 스타일과 블록 스타일을 포함한 스크립트가 제거되었는지 확인할 수 있습니다. 필요한 경우 "옵션 > 미리 로드" 섹션에서 글꼴 파일을 미리 로드하여 Google PageSpeed ​​Insights에서 주요 요청 미리 로드 문제를 방지할 수 있습니다. WooCommerce를 비활성화하는 스크립트 관리자는 아니지만 Contact Form 7과 같은 다른 플러그인의 리소스를 비활성화하려는 경우 필요합니다.

옵션 #2. 무료 자산 정리 플러그인 사용

프리미엄 플러그인을 사용하고 싶지 않다면 Asset CleanUp: Page Speed ​​Booster 플러그인을 사용해 보세요. 이것은 Perfmatters Script Manager와 같은 유사한 기능을 제공하는 부분적으로 무료인 플러그인입니다.

• 플러그인을 설치하고 활성화한 후 게시물을 수정하세요.
• 플러그인은 게시물에 로드된 모든 WooCommerce 스타일과 리소스를 메타 상자에 표시합니다.
• 아래로 스크롤하여 WooCommerce 플러그인에 대한 "모두 확인" 옵션을 클릭합니다.

• 가능한 경우 "게시물" 게시물 유형의 모든 페이지에서 언로드 옵션을 선택합니다.

• 게시물에 대한 모든 WooCommerce 스타일과 스크립트를 비활성화하려면 "업데이트" 버튼을 클릭하세요. 필요한 경우 페이지에 대해 동일한 작업을 수행하여 리소스를 비활성화할 수 있습니다.
• 이제 게시물 중 하나를 열고 개발자 콘솔을 확인하십시오. 모든 WooCommerce 스타일과 스크립트가 제거되어야 합니다.

언제든지 "게시물, 페이지 및 사용자 정의 게시물 유형" 탭에서 자산 정리 > 일괄 변경" 섹션으로 이동하여 설정을 제거할 수 있습니다.

옵션 #3. 수동 방법

마지막 옵션은 WooCommerce 스타일 및 스크립트를 비활성화하기 위해 수동으로 테마 파일을 편집하는 것입니다. 테마 파일 편집은 권장하지 않으므로 하위 테마를 사용하도록 선택할 수 있습니다.

• WordPress 관리자 패널인 경우 "모양 > 테마 편집기"로 이동합니다.
• 활성 테마(또는 하위 테마)를 선택한 다음 functions.php 파일을 선택하십시오.
• 두 부분이 포함된 아래 코드를 붙여넣습니다. 한 부분은 모든 기본 스타일/스크립트를 비활성화하는 것이고 다른 부분은 프론트엔드에서 WooCommerce 블록을 비활성화하는 것입니다.

 /** Disable WooCommerce Styles and Scripts*/ add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_styles_scripts', 99 ); function dequeue_woocommerce_styles_scripts() { if ( function_exists( 'is_woocommerce' ) ) { if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) { # Styles wp_dequeue_style( 'woocommerce-general' ); wp_dequeue_style( 'woocommerce-layout' ); wp_dequeue_style( 'woocommerce-smallscreen' ); wp_dequeue_style( 'woocommerce_frontend_styles' ); wp_dequeue_style( 'woocommerce_fancybox_styles' ); wp_dequeue_style( 'woocommerce_chosen_styles' ); wp_dequeue_style( 'woocommerce_prettyPhoto_css' ); # Scripts wp_dequeue_script( 'wc_price_slider' ); wp_dequeue_script( 'wc-single-product' ); wp_dequeue_script( 'wc-add-to-cart' ); wp_dequeue_script( 'wc-cart-fragments' ); wp_dequeue_script( 'wc-checkout' ); wp_dequeue_script( 'wc-add-to-cart-variation' ); wp_dequeue_script( 'wc-single-product' ); wp_dequeue_script( 'wc-cart' ); wp_dequeue_script( 'wc-chosen' ); wp_dequeue_script( 'woocommerce' ); wp_dequeue_script( 'prettyPhoto' ); wp_dequeue_script( 'prettyPhoto-init' ); wp_dequeue_script( 'jquery-blockui' ); wp_dequeue_script( 'jquery-placeholder' ); wp_dequeue_script( 'fancybox' ); wp_dequeue_script( 'jqueryui' ); } } } /** Disable WooCommerce Block Styles */ function disable_woocommerce_block_styles() { wp_dequeue_style( 'wc-blocks-style' ); } add_action( 'wp_enqueue_scripts', 'disable_woocommerce_block_styles' );

• 테마 편집기에서 아래와 같이 표시되어야 하며 "파일 업데이트" 버튼을 클릭하여 변경 사항을 저장합니다.

게시물의 소스 코드를 확인하여 모든 WooCommerce 스타일과 스크립트가 비활성화되어 있는지 확인하세요. 플러그인에 의해 로드된 글꼴 파일만 볼 수 있습니다.

마지막 단어

보시다시피 WooCommerce 스타일과 스크립트를 비활성화하는 방법에는 여러 가지가 있습니다. 프리미엄 Perfmatters 플러그인을 사용하는 것은 쉽지만 woocommerce.woff 글꼴 파일을 별도로 로드합니다. 무료 플러그인 및 수동 옵션을 사용하면 필요하지 않은 페이지에서 WooCommerce 팽창을 완전히 제거할 수 있습니다. WooCommerce는 지속적으로 설정을 변경하므로 모든 옵션에 대해 설정/코드를 주의 깊게 확인하고 주기적으로 검토해야 할 수 있습니다.