Twenty Twelve 테마 + WooCommerce: 초간단 커스터마이징(워드프레스)

Last Updated: 2023년 07월 16일 11개 댓글

지난 시간에는 WooCommerce 샘플 데이터를 설치하는 방법을 살펴보았습니다. 지난 글에 이어서 WooCommerce가 설치된 Twenty Twelve 테마를 5분만에 초간단 커스터마이징하는 방법을 살펴보겠습니다.

전면 페이지를 쇼핑 페이지로 설정하기

우선 전면 페이지를 쇼핑 페이지로 설정하여 고객이 사이트를 방문하자마자 상품을 볼 수 있도록 만들겠습니다.

알림판에서 설정 > 읽기를 선택합니다.
Settings - Reading in WordPress
표시되는 화면에서 전면 페이지를 쇼핑 페이지로 설정하도록 합니다.
Setting front page
(설명이 길어지는 관계로 블로그 페이지는 설정하지 않고 넘어 가겠습니다. 블로그 페이지를 하나 만들어 위의 화면에서 "글 페이지"로 지정해주시면 됩니다.)

그러면 다음과 같이 전면 페이지가 쇼핑 페이지로 연결됩니다.
Front Page changed
이 화면에서 두 가지를 간단히 수정해보겠습니다. 첫 번째는 메뉴 아래에 헤더 이미지를 지정하고, 두 번째는 헤더 부분을 없애도록 하겠습니다.

헤더 이미지 삽입

먼저 헤더 이미지로 사용할 고품질 이미지를 준비하도록 합니다. 회사 이름과 로고가 삽입되어 있다면 더 좋을 것 같네요. 크기는 960x250px 정도가 권장됩니다. 외모 > 사용자 정의하기로 들어갑니다.
Appearance - Customizer
그런 다음 "헤더 이미지" 섹션에서 헤더 이미지를 추가하도록 합니다.
Customize - Header Image

사이트 제목/설명 없애기

다음으로 헤더 부분의 사이트 제목과 사이트 설명을 없애보겠습니다. 방법은 매우 간단합니다. 사용자 정의하기 화면에서 "사이트 제목과 태그라인"에서 "헤더 글자 표시"의 확인란의 체크를 없애주면 됩니다.
Site title and site description

이제 최종 화면을 볼까요?
Final customized Twenty Twelve and Woocommerce
5분 정도만 수정했는데 처음과는 느낌이 많이 달라진 것을 볼 수 있습니다. 위의 샘플에서는 무료 이미지 중에서 대충 골라 삽입했습니다만, 사용자의 쇼핑 사이트에 맞는 고품격 이미지를 삽입한다면 느낌이 더욱 살아날 것입니다. 더구나 "업로드된 헤더 램덤화"를 사용하면 여러 이미지 중에서 램덤하게 표시하는 것도 가능할 것입니다.
업로드된 헤더 램덤화
헤더 이미지 부분에 슬라이드를 삽입하여 보다 역동적으로 사이트를 만들고 싶으신 분은 "Twenty Twelve 테마를 이용한 간단한 워드프레스 테마 수정(커스터마이징) - 위젯 및 검색 상자 추가" 글을 참조하시기 바랍니다.

이상으로 WooCommerce가 설치된 2012 테마에 대한 초간단 테마 수정 방법을 살펴보았습니다.

참고:


11 개 댓글

Leave a Comment

  1. 안녕하세요, 워드프레스 관련한 글들 잘 읽고 있습니다.
    본문 내용에서 "서점에서 워드프레스 관련서적" 한권 정도 기본적인 것을 이해하는데 도움이 될 수 있도록 구입해서 읽어보기를 권하셨는데, 혹시 추천하실 만한 서적이 있으시면 추천 좀 부탁드립니다.

    응답
  2. 안녕하세요. 사용자정의하기에서 아무것도 안뜨는 경우는 무엇인가요? 로고부분, 헤더, 바텀부분 까지 설정하기가 나와야하는데 백지로 뜹니다... 플러그인들도 다 설치를 했습니다.

    응답
    • 안녕하세요?
      이런 경우 보통 테마와 플러그인과 충돌하거나 테마 자체가 현재 워드프레스 버전과 호환되지 않는 경우입니다.
      먼저는 모든 플러그인을 비활성화한 후에 테스트해보시면 플러그인과의 충돌인지 알 수 있습니다.
      모든 플러그인을 비활성화해도 문제가 없다면 테마를 기본 테마로 바꾸어보시기 바랍니다.

      응답
  3. 안녕하세요. 항상 글 잘 보고 있습니다. 상품을 클릭해도 상품 상세 페이지가 없는 페이지라고 나옵니다. 어떻게 이 문제를 해결할 수 있는지 조언 부탁드립니다. 이 때문에 진행을 못하고 있습니다. 감사합니다.

    응답