2_워드프레스 쇼핑몰 테스트

예전 포스트에 1_워드프레스 쇼핑몰 테스트 ( http://blog.daum.net/web_design/587 )에서 Mystile테마 디자인을 적용해 보았습니다.

 - 예전 작업결과 URL: http://time-space.biz/wp5/

이번에는 storefront 라는 우커머스에서 제작한 테마를 기본으로 하는 Deli테마를 가지고 쇼핑몰 작업을 해 보았습니다.(아래)

- 오늘 작업결과 URL: http://wp5shop.dothome.co.kr/

작업결과 미리보기(아래)

아래는 사용한 소스 정보 입니다. (심플하게 테마, 플러그인2개 설치로 구성해 보았습니다.)
1. 워드프레스 버전 5.25 + 우커머스플러그인 버전 3.7.0 설치
2. 우커머스호환 테마: GNU버전 storefront(2.5.3) 의 Child-Theme Deli(2.0.15)

- 원본테마 :  storefront (배포사이트 https://docs.woocommerce.com/documentation/themes/storefront/ )
- Child-Theme : Deli (배포사이트 https://pe.wordpress.org/themes/deli/ )
- 라이센스: GNU General Public License v2 or later
- 자식테마사용:  storefront테마와 Deii테마 업로드 후 Deli자식테마를 활성화적용
3. 주문시 한국우편번호 검색 추가 플러그인: Beomps Korea Postcode Search

Ps. Deli 테마 정보 : https://learnwoo.com/best-woocommerce-storefront-child-themes/

참고로 자식테마(Child-Them)를 만드는 방법을 위 Deli테마의 Style.css파일로 복습해 봅니다.

-핵심1. 부모테마 지정하기.

아래 Template: 항목의 값 storefront 가 부모 테마명으로 명시해야 자식테마로서 상속받게 됩니다.

/*
Theme Name:  Deli
Theme URI:  https://woocommerce.com/products/deli/
Description: Deli is a Storefront child theme featuring a texturised, earthy design, perfect for stores selling natural, organic or hand made goods. As a Storefront child theme, Deli benefits from all of the tasty WooCommerce integration features that Storefront provides. Bon Appetit!
Author:   WooCommerce
Author URI:  https://woocommerce.com
Template:  storefront <---------------------------- 이부분이 핵심
Version:  2.0.15
License:  GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:   e-commerce, light, blue, brown, two-columns, right-sidebar, left-sidebar, responsive-layout, accessibility-ready
Text Domain: deli
*/
/* =Deli styles starts here
-------------------------------------------------------------- */

- 핵심2. 부모 테마 특정한 파일 상속받아 수정하기.

필요에 따라서는 부모 테마의 특정 파일을 건드려야 하는 경우도 있습니다.
이럴 경우는 부모 테마 파일이 위치한 디렉터리로 가서 수정하려고 하는 테마 파일만 복사하여 자식 테마 디렉터리로 붙여 넣으면 됩니다.
자식 테마와 부모 테마에 동일한 이름의 파일이 있을 경우 자식 테마의 파일이 우선하기 때문입니다.

예를 들어, 테마의 헤더(header) 부분에 무언가 수정이 필요하다고 하다면,
이 경우 워드프레스의 테마 디렉터리 내 부모 테마 디렉터리(이 글에서는 /wp-content/themes/storefront)로 가서 header.php 파일을 복사하여 자식 테마 디렉터리에 붙여 넣습니다.

그런 다음 다시 대시보드의 [테마 편집기] 메뉴로 돌아와 보면 테마 헤더 파일을 직접 수정할 수 있게끔 파일이 열릴 것입니다.

기술참조: 아래 [자식 테마 다루기] URL에서 확인 가능 합니다.

- https://wpguide.usefulparadigm.com/posts/372