유료 테마를 처음 접했을 당시 가장 좋았던 점이라면, ‘전체적으로 디자인이나 기능상의 구조를 꽤 멋지게 갖추고 시작을 한다!’ 라는 점이었습니다. 마음에 드는 것을 그냥 고르기만 하면 잘만하면 그냥 써도 될 정도라고 생각될 정도!?
이전까지는 테마를 찾아놓고, 이 디자인은 이러이러한 플러그인, 이 기능은 이러이러한 플러그인… 각종 목록을 준비해 놓는 게 일이었습니다. 게다가 조합이 갖춰진들 실제로 뭔가 컨텐츠 구성을 하긴 해야 하겠는데 단순 페이지 편집기만 사용하자니 원하는 구조를 만들기부터 해 내야 하고, 거기에 빌더 기능의 플러그인을 설치해도 미리 테마에서 디자인을 해 놓은 것이 아니기 때문에 그 부분도 손이 참 많이 갔었고요. 그런데, 유료 테마들의 경우는 경쟁이 치열해서 그렇겠지만 서로들 데모들까지 멋지게 미리 제작을 해 주는 상황이니 잘 조합만 해도 꽤 훌륭한 사이트가 만들어진다는 게 고맙기만 한 상황입니다. (워프를 테마와 플러그인 둘러보기로 시작했어요)
아무튼, 실제로 몇몇 유료 테마를 사용하다 보니 나름 좋은 방법이 정리가 되어서 공유를 해 봅니다.
!!! 목표 ::
테마 데모 디자인 요소들을 활용하여 컨텐츠(사진, 글)만 바꿔서 구성하고 끝내기
적용할 테마의 특징 및 전제 조건
1. 페이지 빌더가 있음
2. 페이지 구성 내용을 export,import 할 수 있는 방법 제공 (또는 copy & paste로라도 이동시킬 수 있으면 ok)
3. 경우에 따라 데모 디자인들을 임포트할 개발용 호스팅이 하나 더 필요
(local 환경에 MAMP 또는 XAMPP 등으로 웹환경 준비하고 사이트를 하나 더 설치하면 됩니다. 단, 어떤 테마는 로컬에서 임포트가 안 되는 경우도 있음;)
>> 즉, 베스트는 라이브용 호스팅 사이트 1개 + 데모 임포트용으로 사용할 사이트 1개
( !!! 데모 하나 불러와서 그거만 활용해도 충분하다면 그야말로 베스트입니다. 그런데 기획이나 디자인에 따라 하나의 데모 요소 내에서 모두 갖추고 있지 않을 때도 있어서 대개 이 방법을 사용하게 되더라고요. 물론 데모 컨텐츠 안에서 페이지간 이동할 요소가 있을 때에도 응용할 수 있는 방법입니다. )
# 위 조건들을 토대로 아래 예로 사용할 테마가 BeTheme 이고, 제 경우는 로컬에 MAMP를 사용해서 데모 임포트용 사이트를 하나 더 만들었습니다.
Be Theme 데모 소개 페이지를 가 보면… 250가지가 넘는 데모를 한번에 설치할 수 있다를 말해주고 있습니다.(다시 보니 며칠 사이에 10개가 늘어난 @@!) 최근에 추가된 데모들이 있어서 다시 한 번 주욱 살펴봐 보니, 아무래도 하단으로 갈수록 예전 것들은 공통적인 요소들이 많은 게 사실이지만, 그럼에도 여러 가지의 조합의 묘나 장점들이 있어서 약간의 메모를 해 봤습니다. > 비 테마(BeTheme) 디자인 및 기능상 좋은 요소들
■ 진행 과정
1. 주 디자인용 테마 데모를 하나 고르고 > 라이브 호스팅 사이트에 데모를 원클릭 임포트 한다. (to Live용 사이트)
2. 가정) 페이지 중 일부는 다른 구조의 디자인을 사용하고 싶다. 그런데 다른 데모에 적합한 요소가 있다. > 개발용 사이트에 ?해당 데모를 임포트를 한다.?(to 데모 불러오기용으로 만들어 놓은 사이트)
3. 복사하고 싶은 요소가 있는 페이지 > 편집에서 필요없는 다른 요소들을 제거 후 복사할 요소만 남겨서 Export (Be theme의 경우 클릭하고 copy)
4. 라이브 호스팅 사이트의 페이지 중 복사해 온 요소를 임포트 부분에 복사해 넣은 후 Import 클릭 (요소를 넣을 위치에 주의, 앞에 넣을 거냐 뒤에 넣을 거냐, 그냥 덮어쓸 거냐 선택 – 편의상 기존 컨텐츠 다음으로 위치)
5. 추가된 섹션 구조를 원하는 위치로 이동. 끝.
6. 필요 시 약간의 디자인 수정 (child theme의 style.css 이용)
만약, 여러 데모에서 요소들을 가져오고 싶을 땐, reset wp 같은 플러그인을 통해 워드프레스 설치 초기 상태로 되돌린 후 다시 원하는 테마 데모를 임포트해서 사용하면 끝 ?(필요한 요소만 쓰고, 리셋하고 다른 거 불러오고 하는 방식 반복)
+ ) 만약, 비주얼 컴포저를 이용하는 테마의 경우는? (복사하는 방식만 약간 차이)
1. 원하는 요소가 있는 페이지에서 나머지 불필요한 것들은 모두 제거 후 남은 요소만 편집기를 classic 모드 상태로 전환한 뒤, 편집기를 text모드로 바꾸면, 전체 페이지 구성 내용을 쇼트코드화 해서 볼 수 있습니다. 모두 선택 후, 그걸 복사합니다. (선택 후 ctrl+c)
2. 라이브 사이트에서 임시 페이지를 하나 만든 뒤, 텍스트 편집 모드에서 복사했던 쇼트코드를 붙여 넣습니다.
3. 페이지 편집 모드를 비주얼 빌더 UI로 전환(BACKEND EDITOR)하여, 복사된 구조를 탬플릿으로 저장합니다. (구조를 탬플릿화)
4. 복사해 온 요소를 넣고 싶은 페이지의 편집 화면에서 저장한 탬플릿을 클릭(아까 저장했던 템플릿 이름)하여 붙여넣기. 그러면 템플릿이 페이지 편집 맨 하단으로 붙음
5. 복사된 구조를 페이지에서 원하는 위치에 위치시킴. 끝
6. 필요 시 약간의 디자인 수정 (child theme의 style.css 이용)
적다보니 팁이라 하기도 뭐한 내용인 거 같지만…
실제로 어떤 페이지에 직접 비주얼 빌더를 가지고 요소를 넣어서 데모를 따라서 어떤 한 부분을 만들려고 하면, 빌더에 상당히 익숙해지기 전에는 여간 손이 많이 가는 게 아니거든요. 텍스트 크기부터 정렬에, 공간 확보에 등등… (솔직히 전 지금도 그냥 맨 요소로 잘 구현 안 됩니다; 옵션도 하나씩 빼먹어서 왔다갔다 비교도 계속;;)
결론은 이런 방법만으로도 테마가 데모 페이지를 만들기 위해 디자인을 고려해서 작업해 놓은 요소 요소들을 그냥 쓸 수 있고, 바꾸고싶은 이미지나 텍스트로 교체만 해도 꽤 멋진 사이트가 만들어 질 수 있다라는 점입니다.
비디자이너인 저도 테마를 고르는 안목만 있다면 그래도 멋진 사이트를 구성할 수 있는 방법이 있다는 희망적인 사실이기도 하고요… ^^ 남은 건 테마에 없는 필요한 기능을 넣거나, 뭔가 커스텀을 해야 할 작업들인데 이건 부디 최소화로~~~ (늘 희망사항일뿐 >< )
( WP가 알면 알수록 전문적이지만 나름의 활용 방법만 알면 누구나 쉽게 쓸 수 있다는 생각은 변함이 없어서 한 번 정리해 봤습니다! 원하는 디자인이 있고 기능이 있고 하면 그냥 쉽게쉽게 사용하면 되는거 아닌가요? ㅎㅎ)
끝.