작성일자
카테고리 워드프레스/워드프레스 쇼핑몰

워드프레스와 우커머스 플러그인을 사용해서 쇼핑몰을 만들 경우 우커머스 전용 테마 뿐만 아니라 모든 테마를 사용할 수 있습니다. 우커머스 플러그인을 설치하고 활성화하면 관리자 화면 상단에 아래와 같은 메시지 박스가 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' );

저작자 표시 비영리 변경 금지
신고
BlogIcon 인더미러

우커머스 페이지 설치를 안하고 넘어갔는데 다시 설치하려면 어떻게 하나요?

BlogIcon 베누시안

비활성화 하고 다시 활성화 해보세요.

스타일

우커머스 상세 페이지를 담당하고 있는 스타일시트에 48%로 돼있는 것을 46%로 줄여서 재설정하면 됩니다.
이 부분이 어떤 부분. 어디에 있는지 모르겠습니다.
단순히 저기 위에 스샷이있는것처럼 그냥 따라서 썻는데 상세페이지는 여전히 오른쪽으로 가있네요.

BlogIcon 베누시안

요소검사를 하면 스타일시트를 볼 수 있고 복사할 수도 있습니다. 이미지 영역과 옵션 영역 두 부분의 스타일시트를 복사해서 수정하는 것입니다.

스타일

IE에서 F12버튼을 눌러 스타일 시트를 보니 위에 적어주신 소스의 위치가 style.css가 아닌 woocommerce.css파일 이더군요. 그래서 style.css에 ".woocommerce div.product.....이하생략."을 넣어서 해봐도 적용이 안되길래 woocommerce.css이쪽 파일에만 위 소스를 넣으니 바로 적용 되었습니다. 제가 중간에 빼먹은게 있는건지.. 제가 하는 방법 되긴하는데 위에 설명과는 살짝 다른거같아서 댓글 남겨봅니다 ^^ 감사합니다

BlogIcon 베누시안

위에 나온 그림은 코드를 붙여넣은 결과입니다.

테마포레스트에서 테마를 구입하려고 하는데요, ecommerce에 있는 테마가 아닌 다른 테마들로도 우커머스의 구현이 가능한가요? 우커머스를 하고 싶으면 그 게시판의 테마를 받아야만 한다고 들었거든요ㅠㅠ

BlogIcon 베누시안

상단에 나오듯이 어떤 테마라도 우커머스를 사용할 수 있습니다. 게시판에서 말하는 것은 위와 같은 과정을 거치지 않기 때문입니다.

비밀댓글입니다

티스토리 툴바