워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

블로그 인기글

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

워드프레스와 우커머스 플러그인을 사용해서 쇼핑몰을 만들 경우 우커머스 전용 테마 뿐만 아니라 모든 테마를 사용할 수 있습니다. 우커머스 플러그인을 설치하고 활성화하면 관리자 화면 상단에 아래와 같은 메시지 박스가 2개 나타납니다.



하나는 우커머스 상점을 위한 여러 가지 페이지를 만드는 버튼이 있고 하나는 사용 중인 테마의 페이지 템플릿에 우커머스에 사용되는 페이지를 만드는 버튼입니다. 첫번째 버튼을 클릭하면 우커머스에 의해 단축코드가 삽입된 페이지가 만들어지지만 이들 페이지를 사이트에 나타내기 위해서는 두번째 버튼을 클릭해서 가이드를 참고해야 합니다. 


테마 결합 가이드는 두 가지 방법을 소개하고 있는데 책에서는 첫 번째 방법을 이용해 우커머스용 페이지 템플릿을 만들었습니다. 책을 보지 않는 분들을 위해 두 가지 방법을 모두 사용하는 방법을 알아보겠습니다.


1. woocommerc.php 파일로 만드는 방법


여기서는 기본적으로 두가지 메시지가 나타나는 워드프레스 기본 테마 중 Twenty Fourteen을 사용해보겠습니다. 우커머스는 기본테마인 Twenty Twelve에 대해서는 두번째 메시지가 나타나지 않도록 했는데 앞으로 나올 우커머스 2.1 버전에서도 Twenty Fourteen에 그런 작업이 이뤄질지는 미지수입니다. 현재 워드프레스 3.8 버전에 우커머스 2.1 베타 2 버전을 설치했는데 위 그림과 같이 두가지 메시지가 나타나고 있습니다. 베타 버전은 아직 수정할 부분이 많으므로 2.0 버전으로 사용하는 것이 좋습니다.



우선 첫번째 메시지 박스에서 "우커머스 페이지 설치하기" 버튼을 클릭하면 페이지가 만들어지면서 우커머스 초기 화면이 나타납니다. 



하지만 다른 페이지로 이동하면 항상 두번째 메시지 박스가 나타납니다. 모든 페이지로 이동하면 4가지 페이지가 만들어져 있습니다. 우커머스 2.1 버전에서는 주요 페이지를 제외하고 많은 페이지가 최종점(Endpoint)로 전환됐습니다.



사이트에서 보면 메뉴가 나타나지만 상점을 클릭하면 레이아웃이 제대로 나타나지 않고 있습니다. 우선 레이아웃을 보기 위해 우커머스에 포함된 샘플 상품을 가져오기를 통해 업로드 하겠습니다.



우커머스가 설치된 디렉토리로 이동하면 dummy-data폴더가 있으며 이곳에는 워드프레스 가져오기 파일인 xml 파일과 우커머스 상품 가져오기 플러그인을 통해 상품을 일괄적으로 업로드 할 수 있는 csv 파일이 있습니다. 



도구-->워드프레스를 선택하고 가져오기 플러그인을 설치한 다음 활성화하고 파일 선택 버튼을 클릭해서 dummy-data.xml 파일을 업로드하고 가져오기 과정을 실행합니다. 이미지까지 가져오므로 시간이 꽤 걸립니다. 모두 완료되면 Have fun!이 나타납니다.



상품 페이지로 가면 업로드 된 상품이 나타납니다.



사이트에서는 상품 목록이 우측에 치우쳐 나타납니다. 제대로 나타나도록 하기 위해 파일을 수정해야 합니다.



테마를 수정해 사용할 때는 항상 자식 테마를 만들어 사용합니다. 이곳을 참고해서 위처럼 자식 테마를 만듭니다.



우커머스 플러그인 폴더에서 template 폴더를 복사해 테마 폴더에 붙여넣고 폴더 이름을 woocommerce로 변경합니다. page.php 파일을 복사해 이름을 woocommerce.php 로 변경한 다음 이 파일을 편집기에 엽니다.



php 코드와 html 코드가 혼합돼있으므로 주의해서 편집해야 합니다. 위와 같이 html 코드와 php코드가 분리돼 있는 경우 //Start the loop 가 있는 php 코드 부분을 제거하고 <?php woocommerce_content(); ?>를 추가하면 됩니다. 



페이지를 새로고침하면 레이아웃이 제대로 나타나지만 레이아웃을 담당하는 선택자가 없으니 상하좌우 패딩이 필요한 상태입니다. 이 이후로는 테마에 따른 스타일시트를 여러 곳에서 재설정해줘야 합니다.



콘텐츠 영역의 클래스 선택자에 대해서 패딩을 설정하면 됩니다.



상세 페이지에 들어오면 이전의 패딩 설정으로 인해 옵션 부분이 하단으로 밀려납니다.



우커머스 상세 페이지를 담당하고 있는 스타일시트에 48%로 돼있는 것을 46%로 줄여서 재설정하면 됩니다. 이처럼 우커머스의 각 페이지에 대해서 제대로 나타나도록 설정해주면 모든 테마를 우커머스용으로 사용할 수 있습니다.



php 코드만 있는 경우의 테마



아래처럼 php 코드만 있는 테마의 경우 반복문을 제거하기 위해 조건문의 시작 중괄호를 클릭하면 중괄호에 밑줄이 나타나고 종료되는 중괄호에도 밑줄이 나타나므로 어떤 부분을 제거할지 알 수 있습니다. if 부터 종료 중괄호까지 제거해줘야 합니다.



이전과는 달리 woocommerce_content();만 삽입합니다. 왜냐하면 이미 <?php 태그와 ?> 태그 사이에 있기 때문이죠. 그런데 페이지의 레이아웃을 만들기 위해서는 해당 테마의 레이아웃을 만들어주는 html 코드가 필요하므로 아래와 같이 테마의 선택자를 추가해야 합니다.



위처럼 php 코드는 html 코드와 분리해 줘야 합니다. html이 시작되면 그 이전에 php를 종료해야 하고 html이 종료된 후에는 다시 php가 시작되는 태그가 들어가야 합니다. 


2. 함수코드 수정하는 방식


functions.php 파일에 아래의 코드를 추가하면 됩니다.


remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);

remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);

add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {

  echo '<div id="content" class="site-content" role="main">';

}

function my_theme_wrapper_end() {

  echo '</div>';

}

테마에 따라서 콘텐츠 영역을 담당하는 아이디 선택자와 클래스 선택자가 달라집니다.



이 방식은 위처럼 사이드바가 나타나지 않으니 우커머스용 테마를 만들 때 사용합니다.


위와 같이 우커머스를 위한 테마 수정할 한 후에는 메시지 박스의 버튼을 클릭해서 메시지를 나타나지 않게 하거나 다음의 코드를 functions.php 파일에 추가합니다.


add_theme_support( 'woocommerce' );