WooCommerce Storefront 자식 테마를 만드는 방법 [전체 가이드]

게시 됨: 2022-01-05

WooCommerce Storefront 자식 테마를 만드는 방법 이 기사에서는 간단한 4단계로 WooCommerce Storefront 자식 테마를 만드는 방법을 살펴보겠습니다. Storefront WooCommerce 테마는 WooCommerce를 무료로 사용하기 쉽고 최소한의 노력으로 독특한 상점을 만들 수 있기 때문에 성공할 수 있었던 주요 이유 중 하나입니다.

또한 WooCommerce는 거의 무한한 사용자 정의 가능성을 제공하며 이는 WooCommerce의 성공에 기여하는 또 다른 큰 요소입니다. 즉, 올바른 테마와 결합하면 많은 디자인 유연성을 제공할 수 있습니다.

WooCommerce Storefront 하위 테마

전문적인 모양을 위해 Storefront 테마는 훌륭한 선택입니다. 이제 WooCommerce 스토어가 실행되고 있으므로 정확한 비전과 일치하도록 스토어 모양을 사용자 정의할 수 있습니다.

WooCommerce 스토어프론트 테마를 설치한 후 다음 단계에서는 상위 테마의 코드를 직접 편집하지 않고도 스토어프론트 상위 테마 테마를 변경할 수 있는 WooCommerce 스토어프론트 하위 테마를 생성해야 합니다.

이렇게 하면 상점 모양을 쉽게 사용자 정의할 수 있고 테마 및 상점에 대한 잠재적 위험, 특히 WooCommerce Storefront 테마가 업데이트될 때 추가한 사용자 정의를 잃을 위험이 제거됩니다.

WooCommerce Storefront 하위 테마 만들기

WooCommerce Storefront 자식 테마를 만드는 이유는 무엇입니까?

WordPress에서 읽는 데 많은 시간을 할애했다면 이전에 하위 테마를 접했을 수 있습니다. 간단히 말해서 자식 테마는 종종 '상위 테마'라고 하는 다른 테마의 복사본입니다.

즉, 부모 테마를 직접 편집하지 않고도 자식 테마를 변경하고 테스트할 수 있습니다. 원래 테마를 변경하면 돌이킬 수 없는 오류가 발생하고 웹사이트가 손상될 수 있으므로 하위 테마를 변경하는 것이 중요합니다.

또한 다른 테마를 기본으로 사용하고 싶기 때문에 자식 테마를 만들고 싶을 수도 있습니다. 이렇게 하면 시간을 절약할 수 있으며 처음부터 완전히 새 테마를 만들 필요가 없습니다.

또한 테마의 브랜딩이나 전체적인 미학을 약간 변경할 수도 있습니다. 하위 테마를 사용하면 진행 중인 프로젝트에 기꺼이 할애하는 시간에 따라 많은 가능성이 열립니다.

그러나 공식 WooCommerce 스토어 또는 ThemeForest와 같은 다른 사이트에서 여러 옵션을 다운로드할 수 있지만 제공되는 기존 하위 테마 중 어느 것도 귀하의 요구와 일치하지 않을 수 있습니다. 또한 독특한 모양을 만들고 싶을 수도 있습니다. Storefront 자식 테마는 틈새 시장에 완벽한 매장 경험을 제공하는 것을 목표로 합니다.

또한 하위 테마를 만드는 실제 프로세스는 WooCommerce 또는 보다 일반적인 WordPress 사이트에서 동일하다는 점을 언급할 가치가 있습니다. 이러한 사실에도 불구하고 자식 테마를 사용자 지정할 때 스토어의 목적을 염두에 두어야 합니다.

WooCommerce Storefront 자식 테마를 만드는 방법

이 자습서에서는 Storefront를 부모로 사용하는 테마를 만듭니다. 모든 테마를 기반으로 사용할 수 있습니다. 진행하기 전에 사이트 백업을 생성하는 것도 중요합니다. 이렇게 하면 개발 프로세스 중에 문제가 발생할 경우 매장을 안전하게 보호할 수 있습니다.

또한, 자식 테마를 만들고 조정하기 위해 스테이징 환경을 사용하는 것도 현명합니다. 하위 테마를 생성하려면 하위 테마 디렉토리, style.css 파일 및 functions.php 파일의 세 가지만 시작하면 됩니다.

다음은 WooCommerce 하위 테마를 만들기 위해 따라야 하는 단계입니다.

1. 테마 폴더 만들기

이 테마 폴더에는 스타일시트와 함수 파일이 들어 있습니다. 전문가의 관점에서는 상위 테마의 이름을 폴더 이름으로 사용하고 "-child"를 추가하는 것이 이상적입니다. 이 튜토리얼에서는 디렉토리 이름을 "Storefront-child"로 지정했습니다. 가능한 오류를 피하기 위해 하위 테마의 디렉토리 이름에 공백이 없는지 확인하는 것도 중요합니다.

WooCommerce Storefront 하위 테마 만들기

2. 하위 테마 스타일시트

폴더를 생성한 후에는 하위 테마에 대한 스타일시트를 생성해야 합니다. 스타일시트는 상위 테마에서 스타일을 상속하도록 설정해야 합니다.

이렇게 하려면 다음 스타일시트 헤더를 삽입하고 관련 세부정보로 교체해야 합니다. 여기에서 수행된 사용자 정의는 상위 테마 스타일을 재정의한다는 점도 언급할 가치가 있습니다.

 /*

 테마 이름: 스토어프론트 하위

 테마 URI: http://sitename.com/storefront/

 설명: 스토어프론트 하위 테마

 저자: 당신의 이름

 작성자 URI: http://sitename.com

 템플릿: storefront /*이것은 대소문자를 구분합니다*/

 버전: 1.0.0

 라이선스: GNU 일반 공중 라이선스 v2 이상

 라이선스 URI: http://www.gnu.org/licenses/gpl-2.0.html

 태그: 라이트, 다크, 전폭, 반응형 레이아웃, 접근성 준비

 텍스트 도메인: storefront-child

*/

/*테마 커스터마이징은 여기에서 시작됩니다*/

그러나 이 튜토리얼에서는 CSS를 사용하는 방법을 가르치지 않을 것입니다. 왜냐하면 이 기사에서 다룰 수 없기 때문입니다. 웹사이트에서 CSS를 조정하려면 CSS를 배우거나 개발자를 고용해야 합니다.

3. 하위 테마 기능

이전 방법에서는 스타일시트에서 "@import"를 사용하여 자식 테마를 로드할 것을 제안합니다. 이것은 더 이상 모범 사례로 간주되지 않는다는 점에 유의하는 것이 중요합니다. 그러나, 당신은 당신의 자식 테마의 functions.php 파일에서 당신의 부모 테마의 스타일시트를 "대기열에 넣기"만 하면 됩니다.

이것을 가능하게 하려면 "wp_enqueue_scripts action"을 사용하고 "wp_enqueue_style()"을 사용할 수 있습니다. 또한 자식 테마의 스타일시트는 일반적으로 자동으로 로드된다는 점을 언급할 가치가 있습니다.

로드되도록 잘 큐에 넣어야 하고 자식 스타일시트가 우선순위를 갖도록 해야 합니다. 일을 더 쉽게 하기 위해 '부모 스타일'을 종속성으로 설정하는 다음 코드를 만들었습니다. 그러면 자식 테마 스타일시트가 그 뒤에 로드됩니다.

 <?php

기능 theme_enqueue_styles() {

$parent_style = '부모 스타일';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( '자식 스타일', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

?>

4. 활성화

이제 자식 테마 폴더가 완성되었으므로 WordPress 테마에 추가할 수 있도록 자식 테마 폴더의 .zip 파일을 만들어야 합니다.

7-zip 또는 Winrar를 사용하여 이 작업을 수행할 수 있습니다. 또한 style.css 및 functions.php가 하위 테마 폴더 안에 있는지 확인하는 것도 중요합니다.

또한 하위 테마를 활성화하기 전에 다른 플러그인 설정을 기록해 두는 것이 중요합니다. 그런 다음 모양 > 테마 추가 를 통해 WordPress에 업로드할 수 있습니다. 테마 업로드 WooCommerce Storefront 자식 테마 만들기

WordPress는 다른 테마처럼 설치하고 일단 설치되면 아래와 같이 모양 > 테마 로 이동하여 '활성화'를 클릭하여 활성화해야 합니다. WooCommerce Storefront 하위 테마 만들기

활성화하면 원래 테마와 동일하게 보입니다. 자식 테마는 부모 테마에서 스타일을 가져옵니다. 그런 다음 창의력을 발휘하고 스타일시트의 모양을 사용자 정의해야 합니다.

또한 변경하려는 템플릿 파일(예: header.php)을 부모에서 자식 테마 폴더로 복사하여 테마의 템플릿 파일을 변경할 수 있습니다.

또한 WordPress가 템플릿 파일을 참조하는 데 사용하는 기능을 지정하기 위해 몇 가지를 변경해야 합니다. 즉, get_stylesheet_directory(); 템플릿을 참조하려면 get_template_directory() 대신 함수를 사용하세요.

결론

이 시점에서 WooCommerce Storefront 자식 테마를 만들 수 있다고 확신합니다. 스타일을 최대한 활용하기 위해 CSS를 다듬고 더 많은 조언을 위해 자식 테마 생성에 대한 다른 가이드를 확인하는 것이 좋습니다.

타사 제공업체로부터 하위 테마를 구입할 수도 있지만 다른 사람의 창의성에 의존할 필요는 없습니다. WooCommerce Storefront 자식 테마를 만드는 것이 생각보다 어렵지 않기 때문입니다.

또한 상점의 모양과 기능을 거의 완벽하게 제어할 수 있습니다. 따라서 WooCommerce 사이트에서 개발 작업을 수행할 때 모범 사례로 간주되므로 하나 만들어야 합니다.

또한 테마를 직접 수정하면 업데이트 중에 수정 사항이 손실될 위험이 있습니다. 하위 테마는 수정 사항이 그대로 유지되도록 합니다.

유사한 기사

  1. WooCommerce 스토어프론트 테마는 무엇입니까? [답변]
  2. 스토어프론트 WooCommerce 테마를 사용자 정의하는 80가지 이상의 트릭: 궁극적인 스토어프론트 테마 사용자 정의 가이드
  3. WooCommerce 체크아웃 페이지에 신뢰 또는 보안 로고를 추가하는 방법
  4. 체크아웃 후 WooCommerce를 리디렉션하는 방법: 맞춤 감사 페이지로 리디렉션
  5. 플러그인에 대한 WooCommerce 관리자 알림을 만드는 방법 – WooCommerce Development
  6. PHPMyAdmin에서 WordPress 데이터베이스를 만드는 방법
  7. For & Foreach 루프를 사용하여 WordPress에서 여러 위젯을 만드는 방법
  8. WordPress에서 플러그인의 단축 코드를 만드는 방법
  9. 명령줄을 통해 MySQL 데이터베이스 WordPress를 만드는 방법
  10. WordPress Complete 초보자를 위한 처음 20단계 시작
  11. 카테고리별로 WooCommerce 제품을 표시하는 방법
  12. WooCommerce 로그아웃 PHP 스니펫을 사용하여 로그아웃 버튼 생성
  13. WooCommerce Shop 페이지에서 장바구니에 추가 버튼 텍스트를 변경하는 방법
  14. WooCommerce에서 추천 제품을 설정하는 방법
  15. WooCommerce에서 사용자 정의 배송 방법을 추가하는 방법