지난 해 12월 프리미엄 테마를 이용한 쇼핑몰/웹사이트 만들기 책을 기획하고 약 두달간의 준비 과정을 거쳐 한달 정도 걸려 원고를 마쳤습니다. 준비과정이 좀 길었던 것은 초보자도 다루기 쉬운 테마를 선택하는데 그리고 테마를 번역하는데 시간이 많이 걸렸기 때문입니다. 최근 1년 이내에 출시된 테마를 구매해 직접 사용해보고 웹사이트와 쇼핑몰을 동시에 만족할만한 테마를 선택하는 것이 어려운 작업이었습니다. 테마를 선택하기 위한 전제조건은 크게 4가지로 우선 순위를 정했습니다. 1. 비주얼 컴포우저라는 페이지 빌더가 있는가.2. 레볼루션 슬라이더 또는 레이어 슬라이더 플러그인이 있는가.3. 메가메뉴 기능이 있는가.4. 쇼핑몰 기능이 얼마나 내장돼 있는가. Subway, The7, Total, Elision - ..
우커머스가 2.1 버전 이후로 두 번의 업데이트가 있었는데 아직 세부적인 에러가 발생하고 있습니다. 우커머스 - 설정 화면에서 물음표 아이콘에 마우스를 올리면 도움말 툴팁이 나타나야 하는데 작동하지 않고 선택 상자도 고급 형태가 아닌 일반 선택상자로 보입니다. 아래의 화면이 정상입니다. 수정이 될 것으로 기다리고 있었는데 다른 나라 버전에서는 작동이 잘돼더군요. 그래서 개발팀에 연락해서 어제 해결을 했습니다. 다음 버전이 나오면 제대로 작동하겠지만 바로 해결하고 싶은 분은 아래처럼 작업해주면 됩니다. 바로가기 위 버튼을 클릭하면 아래의 화면이 나옵니다. 빨간색 박스의 우커머스 플러그인 경로에서 해당 파일을 열고 줄번호에서 코드를 찾아 녹색의 코드로 각각 교체해주고 저장하면 됩니다. 아니면 아래의 파일을 ..
워드프레스 플러그인은 수시로 업데이트 되는데 새로운 버전으로 업데이트 하면 레이아웃이 엉망이 되는 경우도 발생합니다. 우커머스 2.1 버전은 이전 글에서도 언급했지만 스타일시트를 전면 개정해서 반응형 레이아웃으로 전환했습니다. 그래서 부득이 구버전을 사용해야 하는 경우 해당 플러그인 사이트에서 내려받을 수 있습니다. 현재 버전이 2.1.1인데 구버전은 Developers 탭을 선택하면 있습니다. Other Versions에서 2.0.20을 클릭하면 됩니다. 개발버전은 현재 버전에 버그가 있는 경우 수정을 진행하고 있는 현재버전 보다 높은 버전입니다. 그러니 이 버전은 안정적이지 못합니다. 위 버전은 한글이 제대로 나오지 않으니 아래의 파일을 내려받아 압축을 풀고 설치하세요. 한글 언어 파일이 포함된 우커..
최근의 워드프레스 책 두권을 발간하면서 내 컴퓨터에서 완성한 워드프레스의 모든 파일을 웹호스팅 서버로 이전하는 과정이 있었습니다. 여기에 필요한 것이 php 스크립트인데 이 스크립트의 프로젝트가 업데이트 되어 사용법을 업데이트 하겠습니다. 물론 책의 내용대로 해도 문제는 없고 다만 최신 버전은 좀 더 간편해졌습니다. 이 스크립트는 워드프레스 데이터베이스의 테이블에서 원하는 스트링을 안전하게 변경하는 역할을 합니다. 이 스크립트를 사용하면 내 컴퓨터에서 작업하던 워드프레스를 그대로 복사해서 새로운 워드프레스를 만들어 테스트 할 수도 있습니다. 그렇지 않으면 워드프레스 설치, 플러그인 설치, 모든 설정을 재설정 해야 하지만 이 스크립트를 사용해 워드프레스를 이전하면 간편하게 설정 그대로 사용할 수 있습니다...
오늘 날짜로 우커머스(WooCoomerce) 쇼핑몰 플러그인 2.1 버전이 발표됐습니다. 이전 버전과 많이 다르므로 2.0 버전 사용자는 업데이트를 주의 해야 합니다. 왜냐하면 이전 버전은 상점 관련 페이지가 반응형이 지원되지 않았지만 이번 버전은 반응형을 지원하기 때문에 스타일시트가 많이 변경돼 서로 충돌이 일어나며 레이아웃이 엉망이 됩니다. 우커머스용 프리미엄 테마 사용자도 우커머스 2.1을 지원하는 업데이트 버전이 나올 때까지는 업데이트 하면 안됩니다. 시험삼아 우커머스를 업데이트 하고자 하는 분은 반드시 데이터베이스를 백업해서 레이아웃 오류가 발견되면 이전 버전으로 복구해야 합니다. 새 버전을 시험하고자 하는 분은 가능한한 로컬호스트에서 새로운 워드프레스를 설치하고 실험하는 것이 좋습니다. 일부 ..
[업데이트] 우커머스 2.1 RC2 버전입니다. 한국시간으로 2월 11일 정식 버전이 나올 예정입니다. ______________________________________________________________________________ 우커머스 2.1 버전이 베타 단계를 끝내고 RC 단계로 들어섰습니다. 당초 1월 말까지 정식 버전이 나오기로 했었는데 좀 늦어졌습니다. 조만간 정식 버전이 나올 것 같습니다. https://github.com/woothemes/woocommerce/tree/v2.1.0-RC1 깃허브에서 내려받으면 됩니다. 2.1 버전에서는 한글이 포함됩니다. 그동안 2.0 버전에서는 버전 막바지에 한글 파일을 보냈더니 추가하지 않고 있어서 우커머스를 설치해도 한글이 나오지 않았지..
워드프레스 우커머스 결제 플러그인 중 하나인 WooCommerce KCP가 무료로 개방됐습니다. 이 플러그인은 아진시스템에서 제작한 것으로 아래 사이트에서 무료 요청을 하거나 github에서 직접 내려받을 수 있습니다. 아진시스템 홈페이지 → http://wpshop.ajinsys.com/ 깃허브 → http://hongsw.github.io/ajin-kcp-payment-woocommerce/ zip 파일을 내려받아 압축을 풀면 폴더 안에 woocommerce-KCP-plugin 폴더가 있습니다. 이 폴더를 wp-content/plugins 폴더로 붙여넣습니다. 플러그인을 활성화하고 우커머스 → 설정 → 지불 게이트웨이 탭을 선택한 다음 Kcp[Card]링크를 클릭합니다. 테스트 결제를 위한 내용들이 ..
어떤 웹디자인이든 제이쿼리를 사용하기 마련입니다. 개발자가 만들어놓은 제이쿼리 플러그인을 웹사이트에 적용하기 위해서 코드를 입력하는데 제대로 입력했다고 생각하지만 오류가 나서 어떤 부분에서 잘못됐는지 찾기가 어렵습니다. 이럴때는 웹브라우저에 포함된 개발자 도구를 이용해서 요소 검사를 하고 분석하면 바로 찾을 수 있습니다. 워드프레스 쇼핑몰 만들기 책으로 작업 중 독자 분이 이런 오류를 찾을 수 없어서 요청을 했는데 찾는 방법을 알아보겠습니다. 우선 HTML과 CSS 가 제대로 입력이 됐는지 확인합니다. 요소에 오른쪽 마우스 클릭하고 나오는 메뉴에서 요소검사를 클릭하면 하단의 좌측에 HTML 부분이 나타나고 우측에 CSS가 보입니다. img 태그의 src url에 마우스를 올리면 이미지도 나타납니다. 제대..
씸포레스트에서 테마를 구매하는 방법을 알아보겠습니다. 웹브라우저로 http://themeforest.net/에 들어가면 미국의 대표적인 테마 사이트 중 하나인 씸포레스트로 이동합니다. 씸포레스트에서는 고가의 테마가 아닌 보통 수준의 가격에 테마를 판매하고 있습니다. 씸포레스트는 워드프레스뿐 아니라 각종 템플릿을 대부분 저렴한 판매하는 것으로 유명한 템플릿 사이트입니다. 메뉴에서 워드프레스를 클릭하면 블로그의 성격별로 분류돼 있어 선택하기 편리합니다. http://themeforest.net/ 우선 계정을 만들어야 구매할 수 있으므로 위 링크로 접속해서 화면의 우측 상단에서 Create Account를 클릭합니다. 이미 계정이 있는 경우 Sign In을 클릭합니다. 다음 화면에서 우측의 입력란에 각종 정보..
이전 글에서 우커머스 쇼핑몰의 상세 페이지에 디스커스 댓글 시스템을 추가하는 방법을 알아봤는데 이 방법은 리뷰 탭에 우커머스의 리뷰 기능을 제거하고 이곳에 디스커스를 추가했습니다. 그래서 탭의 제목에는 리뷰라고 돼있지만 리뷰의 숫자가 계속 0으로 나타나는 단점이 있습니다. 디스커스의 댓글 수를 우커머스 리뷰 숫자로 가져오는 방법을 제공하지 않고 있기 때문에 발생하는 문제입니다. 그래서 우커머스의 리뷰 기능을 제거한 상태에서 디스커스의 댓글 시스템을 탭에 배치하지 않고 탭의 상단이나 하단에 배치할 수도 있습니다. 또한 우커머스 리뷰 기능은 그대로 유지하고 디스커스를 추가할 수도 있습니다. 이번 글에서는 이런 방법을 알아보겠습니다. 워드프레스 쇼핑몰 만들기 책에서 우커머스의 템플릿 구조에 대해 파악하는 방법..
YITH(Your Inspiration Theme)에서 계속해서 우커머스용 프리미엄 테마를 개발해 출시하고 있네요. 이전과 같이 무료 버전을 내려받을 수 있습니다. http://yithemes.com/themes/wordpress/the-jewelry-shop/?ap_id=list-theme-jewelry Live Demo 버튼을 클릭해서 테마의 모양을 볼 수 있고 다운로드 버튼을 클릭해서 무료 버전을 내려받을 수 있습니다. 상점 페이지입니다. 상세 페이지입니다. 테마 옵션 설정 페이지입니다. 이 테마는 구글 웹폰트인 Sacramento를 사용하고 있습니다. 그래서 웹폰트 링크만 걸어주면 됩니다. 플러그인 설치하기 화면에서 Google Fonts로 검색해서 WP Google Fonts 플러그인을 설치합니..
위 두 가지 책은 책에서 만든 내용 그대로 데모 사이트를 만들 수 있도록 해놨습니다. 워드프레스를 처음 하시는 대부분의 분들은 서문을 잘 안보고 지나치시는데 책에서 사용된 소스는 서문의 마지막 부분에 링크가 있습니다. 해당 링크를 주소창에 입력하고 이동하면 소스 파일이 있는 제 블로그가 보입니다. 그러면 데모 사이트를 자신의 컴퓨터에 만드는 방법을 알아보겠습니다. 이 내용도 책에 다 있지만 간단하게 만들 수 있습니다. 이것은 책을 진행하면서 안되는 부분이 있으면 뭐가 잘못 됐는지 찾는데 시간이 많이 걸리고 질문에 대한 답변을 제대로 하지 못하기 때문에 반드시 필요한 과정입니다. 워드프레스 쇼핑몰 만들기 데모 사이트 위 압축 파일을 모두 내려받습니다. 알집 파일인데 알집을 사용하지 않는 분들은 세븐집을 설..
워드프레스와 우커머스 플러그인을 사용해서 쇼핑몰을 만들 경우 우커머스 전용 테마 뿐만 아니라 모든 테마를 사용할 수 있습니다. 우커머스 플러그인을 설치하고 활성화하면 관리자 화면 상단에 아래와 같은 메시지 박스가 2개 나타납니다. 하나는 우커머스 상점을 위한 여러 가지 페이지를 만드는 버튼이 있고 하나는 사용 중인 테마의 페이지 템플릿에 우커머스에 사용되는 페이지를 만드는 버튼입니다. 첫번째 버튼을 클릭하면 우커머스에 의해 단축코드가 삽입된 페이지가 만들어지지만 이들 페이지를 사이트에 나타내기 위해서는 두번째 버튼을 클릭해서 가이드를 참고해야 합니다. 테마 결합 가이드는 두 가지 방법을 소개하고 있는데 책에서는 첫 번째 방법을 이용해 우커머스용 페이지 템플릿을 만들었습니다. 책을 보지 않는 분들을 위해 ..
어제 독자분이 우커머스 쇼핑몰 상세 페이지의 리뷰 란에 이미지를 올릴 수 있는 방법이 있을까 문의를 하셔서 구글링을 해봤더니 이런 아이디어를 낸 분이 있더군요. 또 어떤 분은 리뷰가 아닌 댓글 시스템을 추가할 수 있는 방법이 있는지에 관한 내용도 구글에 있었으며 해결 방법도 있었습니다. 사람들의 생각은 참 여러 가지입니다. 뭔가 아이디어를 내면 누군가 해결하고 구글은 이런 모든 정보의 산실이죠. 사실 "워드프레스 쇼핑몰 만들기"라는 책도 구글링 반, 제 아이디어 반의 결과물이라 해도 과언이 아닙니다. 그러니 영어 잘 하고 검색 능력만 있으면 웹 개발은 쉽다는 얘기가 됩니다. 해결 방법은 디스커스(Disqus)라는 댓글 시스템을 이용하는 것입니다. 디스커스 댓글 시스템은 전세계적으로 가장 많이 쓰이는 댓글..
