エントリー -

WordPress 해외 쇼핑몰 제작(17) : 워드프레스의 Theme 설정

Theme 설치까지완료했습니다. 이제테마의세부적인설정에들어가야겠네요. 설정하기전에또다시테마를건들여야하겠습니다.   1. 부모테마와 자식테마? <출처 : ThemeGrill>   워드프레스에는 Child Theme 라는 개념이 있습니다. 우리말로는 “자식테마” 라고 합니다. 워드프레스의 신기하고도 처음에는 참 어려운 개념이기도 합니다.   자식이 있으면 부모가 있어야겠죠. 한 테마를 부모 테마라고 생각하고, 그 테마의 몇가지 파일을 복사, 수정해서 워드프레스가 설치된 곳의 테마 폴더안에 새로 넣어두면 부모테마의 모든 속성을 그대로 따라가는 자식테마가 생성됩니다. 그럼 이런 건 왜 만드는가, 어차피 한 테마는 하나의 도메인에 적용될 수 있는데 굳이 왜 사용할가요?  부모테마의 모든 것을 상속받는 관계이기 때문에 부모 테마를 직접 변경하지 않고도 테마를 수정할 수 있는 것이 큰 장점입니다. 테마를 수정하며 일어날 수 있는 각종 에러를 방지하기도 하고, 특히 테마가 업데이트 되었을 때에 독립적으로 대응할 수 있는 장점이 있습니다. 자식테마의 활용은 워드프레스의 큰장점이자 강점 중 하나입니다. 물론 단점도 있습니다. 2. 어떻게 만드는가? <자식테마를 쉽게 만들 수 있게 하는 Child Themify 플러그인> “자식테마” 혹은 “차일드테마” “child Theme” 정도로 검색하시면 구글이나 네이버에 존재하는 수많은 글을 보실 수 있습니다. 직접 FTP로 호스팅에 올리는 방식, 자식테마 파일로 설치하는 방식, 플러그인을 사용하는 방식 등, 여러가지가 있습니다. 요즘에는 자식테마 파일을 테마 제작사에서 따로 만들어서 올려두곤 합니다. 쉽다곤 하지만 같이 설치할 수 있도록 말이죠.  개인적으로는 가장 쉬운 방식으로 그 파일을 받아서 설치하는 것을 선호합니다. 제가 사용하는 Enfold 테마의 페이지에 들어가서 Child Theme 를 검색해보면 나타나 있습니다.  “Child theme support for easy customization, that is not affected by theme updates. You can download a very basic child theme here” 자식테마를 다운로드 받을 수 있게 올려두었고, 그 테마를 업로드하여 설치합니다. 설치 후 Activation 하면 바로 적용 되며, 테마마다 다르지만 API키나 사용자를 넣어야 할 때에는 추가적으로 활성화 시켜주면 됩니다. 3. 원리는?   워드프레스에서는 Customizing 과정이 필수적입니다. 사용하다 보면 예상외로 별 일 아닌 것도 파일을 건드릴 때가 종종 있습니다. 흔히들 Style.css파일에서 폰트나 색상 등을 바꾸기도 하고 플러그인이나내부 기능 외에서 필요로 하는 공백이나 배치 등을 바꿀 때도 있습니다. 이렇게 사이트를 운영하다가 테마 업데이트를 무심코 눌렀는데, 그 파일들이 모두 업데이트가 되어서 하나씩 바꾸어 두었던 속성들이 테마의 기본 속성으로 변경 됩니다. 나름대로 잘라서 만들어두었던 이미지들이나 배치가 엉망이 되어버리기도 합니다. 이런 불상사를 막기 위해서 자식테마를 사용합니다. <자식 테마를 만들기 위해서는 저 두 파일만 새로운 폴더에 넣어주면 됩니다>    원리는자식테마에동일한파일이있다면, 부모테마보다지식테마의파일을먼저사용합니다. 즉, 웹페이지에누군가가접속했을때에는사이트나테마의여러파일을불러와서접속자의화면에나타나게합니다. 테마는그중디자인적요소를담당하고있고요. 자식테마에서레이아웃을바꾸고색상과폰트를바꾸도록한파일이있다면, 부모테마의요소들보다자식테마의요소들을불러와서변경된화면으로보일수있도록합니다. 이렇다보니, 업데이트가되었을때도부모테마가업데이트되고바뀐레이아웃과색상, 폰트들은그대로유지할수가있는것이죠. (다만, functions.php 파일은부모테마의기능에서자식테마의기능을추가합니다. 나중에이한문장이필요하실때가있을겁니다)   4. 장점만 있는가? <자식테마의 작동 원리 출처 : make.wordpress.org>   하지만자식테마도완벽하지는않습니다. 중요한보안요소의업데이트가있을경우, 그것을 pass 하는경우도생길수있습니다. 예를들어자신이변경한 a.php 파일이있다면부모테마가업데이트되었어도실제작동은자식테마의예전파일로작동하게됩니다. 이경우중요한업데이트나보안요소업데이틀놓칠수도있고, 큰업데이트가있다면오히려에러의요소로작용할수도있습니다. 또한과한자식테마의수정은오히려부모테마를고치는것이나을수있습니다. 워드프레스의구조에서여러파일들을자식테마와부모테마를오가면서로딩을하는것은, 영향이크지는않다고는하지만궁극적으로사이트작동의복잡성을늘리게되어별로좋은결과로나타나지는않을것입니다.  따라서자식테마를사용하더라도중요요소에서테마파일의수정이일어나야할것이며, 중요업데이트가있을경우에는수정된파일과의차이를확인하고새작업을해야할수도있습니다.  물론요즘테마들은과한 Customizing과정없이도중요레이아웃등을변경할수있도록최대한많은기능을지원하기도합니다.   5. 꼭 만들어야 하는가?  워드프레스의 강점은 다양한 Customizing 입니다. 처음 단계에서야 딱히 건들 부분이 없다 해도, 가능한한 자식테마를 만드는 상태로 시작하시길 권합니다. 전문가의 조언들은 대부분 일치합니다. 자식테마 자체가 만병 통치약은 아니며, 과하게 자식테마를 사용하는 것은 부모 테마를 고치는 것과 큰 차이가 없다고 합니다. 우리는 과도한 수정보다는 실습과 구축의 의미이므로, 당연히 자식테마를 기본적으로 설치하고 진행합니다. 사실 현재 상황에서는 설치한다고 해서 크게 다를 것도 없습니다. 게다가 Enfold 테마에도 물론 자식테마를 지원하지만, 테마파일들을 직접 수정하지 않는 한 워드프레스 내에서 수정하는 내용들은 테마와 분리되어 저장됩니다. 다만 사용자에 따라 테마 파일을 직접 수정할 수 있기 때문에 자식테마 활용을 추천하는 것입니다.  

WordPress 해외 쇼핑몰 제작(16) : 워드프레스의 Theme 설치

테마구매후저장을잘해두셨으면, 이제그테마를바로설치해봐야겠죠. 테마설치는어렵지않습니다. 워드프레스에서제공되는기본적인테마들은관리자화면내에서온라인설치가가능합니다. 다만모든테마가온라인설치를지원하지는않기때문에유료구매테마는직접업로드해주어야합니다.   1. 테마 파일 열어보기 생각보다 큰 용량의 압축파일입니다. 그 안에 있는 enfold.zip 파일만 있으면 테마 설치가 가능합니다. 테마 파일만은 15.6MB입니다. Documentation 폴더의 압축을 풀어 documentation 파일을 열면 폴더 제작사의 설명 웹페이지로 연결됩니다. 사실 이 웹페이지만 천천히 따라가도 대부분의 설치와 설정은 쉽게 할 수 있습니다. 물론 영어로 되어있지만요. 다시 documentation 폴더 내의 index파일을 열면 예쁘지는 않지만 텍트스 위주로 구성된 상세한 설치매뉴얼이 나타납니다.  대부분의테마매뉴얼은친절합니다. 물론 영어… 전체파일을받아도 License code는포함되어있지않기때문에, Themeforest 에서별도로받아서저장해야합니다.   2. 테마 설치  테마는 관리자 화면의 Appearance – Theme 메뉴에서 가능합니다. 한글로는 외모–테마 가 되겠죠. 상단의 Add New 버튼을클릭합니다. 현재사용중인테마가나오는데, 여기서다시상단의 Upload Theme를클릭합니다. 다시상단의 “파일선택“을클릭하여 enfold.zip 파일을선택, Install Now를클릭하여설치합니다. 클릭해도잠시변화가없고, 하단에 “업로드중 (~~%)” 가뜨는데기다리시면됩니다. 업로드가 잘 되고, 설치가 완료되면 Theme installed successfully. 라는 메시지가 출력됩니다. 여기서 발생할 수 있는 에러가 보통 두가지입니다. 첫째는 올바르지 않은 테마 선택, 즉 Enfold.zip파일을 업로드 해야 하는데, Themeforest 에서 받은 전체 파일을 업로드 했을 경우입니다. 이 경우는 제대로 된 테마 파일을 업로드 하면 해결됩니다. 제대로 된 테마 파일이란, ZIP파일을 열어보면 “style.css” 파일과 “functions.php” 파일이 포함되어 있습니다.  두번째는워드프레스에서에러가나타나기보다는브라우저의하얀화면에까만글씨로알수없는에러가출력되는경우입니다. 폴더의권한이없다거나, 웹서버의공간이부족하거나, 테마파일이호스팅서비스의지원범위보다큰파일이거나, 초과시간..즉업로드에시간이너무오래걸려서호스팅서버에서정지되었거나…등등조금더기술적인부분입니다. 이러한에러들은자동설치보다는 FTP등을사용하거나셀프호스팅등으로직접서버를관리할경우에많이일어나며, 혹시나발생했다해도이미많은사용자들에의해해결방안이제시되어있어, 구글검색으로도해결이가능합니다. 설치가완료되었으면 Active 를클릭하여테마를활성화합니다.   3. 테마 활성화 테마 활성과 함께 즉시 테마 설정 화면으로 넘어갑니다. 이 화면은 언제든 Enfold라는 좌측 메뉴에서 찾을 수 있습니다. 테마 설치 후, 유료 테마 설치를 확인시켜 주어야 하는데, 테마 메뉴의 가장 아래에 있는 “Theme Update” 메뉴를 클릭합니다. 참고로 추후에 이 메뉴에서 테마의 자동 업데이트도 가능합니다. 테마를 구매한 Themeforest 에서 User name 과 API Key를 입력해야 하는데 링크에 있는 Find your API Key here 를 클릭하면 어디서 찾는지 알려줍니다. Themeforest 에 로그인 후, 오른쪽 위의 본인의 ID를 클릭하여 Setting으로 가면 API keys 메뉴를 찾을 수 있습니다. 처음에는 API키가 없기 때문에 Generate API key를 클릭하여 키값을 생성합니다. 잠시 후에 위쪽에 나타나는 키를 복사하여 워드프레스 테마의 API 키 입력란에 붙여넣기 합니다. 사용자 ID와 API 키를 넣고 Save all changes 를 클릭하면 활성화가 완료 됩니다. 테마 활성화까지 완료했습니다. 다음 편 부터는 기본적인 설정, 예시 등을 살펴보겠습니다.  

WordPress 해외 쇼핑몰 제작(15) : 워드프레스의 Theme 구매

1. 왜 Enfold 테마를? 사실큰이유는없습니다. 개인적으로가벼운테마를선호하지만 Enfold 테마가타테마에비해획기적으로가벼운것도아닙니다. 제가모든유명테마를써본것도아니기도하며이보다더빠르고좋은테마도많습니다. 다만편집기능이그렇게복잡하지않고, Visual Composer 보다조금가벼운편집이가능한느낌이라선택하게되었습니다. 다만생각보다조금더밋밋합니다. 이건이미지로어떻게든상쇄할수밖에없지만, 디자인능력이많이떨어지는제입장에서는어찌보면자충수일수도있습니다. 하지만복잡한게싫고직원들에게조금이라도쉬운걸알려줘야하는입장에서, 사용해본테마중선택하려하니이테마를고르게되더군요. 당연히여러테마를사용해보고자사의홈페이지를꾸미기에가장적합한테마를고르시기를추천합니다.   2. 테마를 구매하기 전에 이미 도메인, 호스팅까지 준비하며 일정 비용을 들이셨다면 굳이 언급하지 않아도 될 일이지만, 노파심에 한번 더 언급하자면 홈페이지,쇼핑몰을 구성하기 전에 내부 컨텐츠 준비는 필수입니다. 테마를 사면 프리뷰와는 달리 황량한 홈페이지가 반겨주기 때문에, 빈공간을 꽉꽉 채워 줄 여러 이미지들이 필요합니다. 아래의 준비물이 우선적으로 필요합니다. – 웹사이트 로고 (회사 로고) – 상품의 분류(카테고리) – 상품 이미지 (최대한 많고, 고퀄리티의 이미지들) – 상품 설명 – 상품 가격 – About Us 에 들어갈 회사 소개 컨텐츠 – Contact Us 에 들어갈 회사계정의 이메일과 주소 등의 정보 – 그 외…   3. 테마 구매 테마는 여러 번 언급했던 Themeforest 에서 구매합니다. 아무 검색창에서나 Enfold를 검색하면 해당 페이지로 넘어가며, 혹시나 PSD파일이나 일부 다른 구성요소가 아닌, Theme가 맞는지 확인 하고, 구매 전에 하단의 Live Preview와 기능도 한번씩 보는 것을 추천드립니다. Add to Cart나 Buy Now 둘다클릭해도동일하게구매가능합니다. 체크아웃페이지입니다. 카드청구주소를한번확인하시면되고, 구매는 PayPal로쉽게구매할수있고신용카드로도구매할수있습니다.  안타깝게도카드나 PayPal은수수료 $2가붙어서,  저는 Credit으로구매했습니다. 수수료 $2가붙어, $61에사느냐, 당장쓰지도않을 $60에사고 $1을 Balance로남겨두느냐는본인의선택입니다. 저는 $1 싸서그냥 Credit으로구매하며, 뭔가당한느낌의찜찜함을버릴수없었습니다. (기필코저 $1도 쓰고 말겠다….는이미진거겠…) 다행인지, Credit 역시 PayPal과신용카드모두가능합니다. 저는편의상 PayPal 구매로진행합니다. 매 포스팅마다 하단에 PayPal 가입 링크가 있어서, PayPal에 지금까지 가입 안하신 분은 없겠죠. 계정이 있다면 로그인 하면 됩니다. 물론 신용카드로도 구매 가능합니다. SSL/TLS 보안이 적용되어 있고, 별다른 플러그인 없이 결제가 가능합니다. PayPal에도 장단점이 있겠지만, 우리나라는 참 결제가 어려워서무언가를 구매할 때마다 짜증이 많이 납니다. 그나마 각종 Pay 서비스로 조금은 나아졌지만, 결제와 무관한 관공서는 Aㅏ…..(아, 물론 ActiveX 가 거의 100% 사라져서 참으로 행복하긴 하군요. exe파일은 뭐가 다르냐? 그놈의 non-ActiveX 참….) 예전에는 계정에 Balance 와 신용카드가 있다면 무조건 Balance 에서 부터 빠져나갔는데, 지금은 선택이 가능하군요. 그것때문에 결제용 계정을 따로 만들기도 했었는데, 사용자 측면에서 여러모로 좋아진것같습니다. 결제 완료 화면입니다. 여기서 Download 화면으로 넘어가시면 됩니다. 하단의 Install for $50 이 쓰여진 파란 버튼을 클릭하면, 유료로 자사의 홈페이지에 설치해주는 서비스에 연결되는데, 어차피 이 글을 읽고 계시는 분은 사용하지 않으셔도 될 것 같습니다.  Themeforest에로그인후프로필-Downloads 에들어가면위와같은화면이나타나고, 구매한테마를언제든제한없이다운로드가능합니다. 테마구매시에는기본적으로 6개월의 Support가함께합니다. 이메일이나 Ticket(Case)를통해상담이가능합니다. 다만사용자가많은테마의경우는제작사의포럼에서검색만으로도다양한정보획득이가능합니다. Enfold 테마같은오래되고판매량이상위인테마를사용하는주요이유중하나입니다.   4. 테마 받아두기  상단의 All files & Documentation은 테마 파일과 설명서가 들어있습니다. 추가 제공 Plugin이나 템플릿이 포함되는 경우도 있습니다.  Wordpress file Only를 선택하면 바로 업로드 하여 설치할 수 있는 테마 파일(zip 압축)을 받을 수 있고 PDF나 Text파일은 라이선스 키가 들어있는 파일입니다. 이 키는 꼭 저장해 두시기 바랍니다. 유료 테마이기 때문에 License code가 있어야 테마 활성화와 업데이트가 지원됩니다. 추가 플러그인이나 Support 시에도 사용될 수 있습니다. 파일도 저장해 두고, 여기서 꿀팁이라면, 자신이 주로 사용하는 이메일로 파일을 보내서 안전하게 저장해두시기 바랍니다. 파일 전체 용량은 클 수도 있으니 Text나 PDF파일의 내용만 보내놓아도 괜찮습니다. 이미지가 많아서 글이 길어졌습니다. 다음편에서 바로 테마를 설치하겠습니다.  

WordPress 해외 쇼핑몰 제작(14) : 워드프레스의 Theme 고르기

워드프레스에는 몇가지의 기본 테마가 설치되어 있습니다. 이 테마들을 활용해서 사이트를 꾸밀 수 있으나, 조금 더 멋지고 다양한 기능들을 위해 유/무료 테마들을 설치하고 수정하는 것을 권장합니다. 여러기능들은 대부분 플러그인이나 테마의 내부 기능들로 구성되어 있는데, 테마를 설치함으로써 기능을 사용함과 동시에, 자체 지원되지 않는 기능은 플러그인을 함께 설치하도록 하거나 혹은 테마 구매 시 플러그인을 포함하여 판매하는 경우가 많기 때문입니다. 1. 테마 골라보기  유료로 테마를 판매하는 사이트는 https://themeforest.net 라는 곳이 유명합니다. 해당 사이트에 대한 간략한 설명은 지난번 설명한 내용이 있습니다. 이 곳에서 마음에 드는 테마를 골라 구매하면 됩니다.  메인 메뉴에  Web Themes & Templates 라는 항목에 기본 선택이 되어 있으며,  Wordpress -> eCommerce 메뉴에 들어가거나, eCommerce -> Woocommerce 로 진입합니다. 현재 1100여개의 테마가 판매되고 있습니다. 물론 해당 사이트 내에서 판매하는 테마가 이 정도이며 실제로 다른 사이트에서 구매할 수 있는 테마도 많습니다.  처음테마에대해접근하고고르기에는조금난감할수있기때문에아래의기준에따라테마를고르게됩니다. – 현재의최신워드프레스버전지원여부 – 다양한브라우저지원여부 – 반응형 (모바일, 태블릿, 데스크톱) 지원여부 – 지속적인업데이트와 Support 제공여부 – 플러그인지원 : WPML, Woocommerce 는기본 – 속도 : 무거운기능보다가벼운구성으로속도를빠르게낼수있는가 – 기능 : 빌더(화면편집,구성을쉽게하는기능), 슬라이더 – 다양한레이아웃제공여부 – Demo 데이터제공여부 – 설치문서혹은영상등의매뉴얼제공여부 등, 다양한구매결정요소가있습니다. 초보자입장에서가장중요한부분은지속적인업데이트와 Support입니다. 사용중에러가발생했을경우실시간상담, 혹은기존구매자들의질문과답변을통해문제를해결할수있는경우면좋습니다. 더좋은것은실제 Admin Panel로접근하여테마를이리저리사용해볼수있는기능을제공하면좋겠지만, 최근에는이러한기능을많이제공하지않더군요. 그리고브라우저, 최신워드프레스버전지원, 반응형의경우에는대부분의테마미리보기에서확인이가능하거나대부분지원하는경우가많습니다. Demo data 또한많은테마에서기본으로제공하고있는데, 생각보다중요한부분입니다.  처음테마를설치하면흰화면에까만글자만덩그러니놓여있습니다. 처음워드프레스를설치했을경우와크게다르지않아, 초보자의입장에서는테마를설치했는데제대로설치가안된것인가하는생각까지들게됩니다. 따라서대부분의테마에서는 Demo data를제공합니다. 테마설치후에데모를불러오면자동으로상품이나사진등이업로드되고, 자사의쇼핑몰이테마미리보기에서보았던쇼핑몰로멋지게변화합니다. 이러한기능을통해화면구성이나기능들을직접보고적용할수있습니다.   2. Best Seller, Top Sellers?  메뉴에서 Woocommerce 테마로 들어가면 기본 보기는 최신순으로 정렬 되어 테마들이 나열되어 있습니다. 오른쪽 상단에서 Sort By 방식을 Best sellers로 변경해 보면, 지금까지 장기간 좋은 평가를 받고많이 판매 된 테마를 확인할 수 있습니다. 많이 팔렸다고 해서 무조건 좋은 것은 아닙니다. 다만 여러 고객이 구매했고 아직까지 활발하게 지원과 업데이트가 이어져 오고 있으며, 또한 문제 발생 시에 사용자 층이 많기 때문에 해결할 수 있는 경우의 수가 많기 때문에 처음 구매하실 때에는 Best Sellers 의 테마를살펴보시는 것도 좋습니다. 혹은 Web Themes & Templates 의 All Items 항목의하위메뉴인 Popular Files 메뉴에보면, 주단위 3개월단위등의기간동안 Best Seller 제품군을볼수있습니다. 이곳에나온테마들은 Woocommerce의기능은기본으로지원하여, 쇼핑몰외에도회사홈페이지, 원페이지등등, 여러가지웹페이지를만들수있는 Multi Purpose Theme 임을강조하고있습니다. 당장에쇼핑몰을열기보다는회사홈페이지구축이우선인경우, 여러목적에따라홈페이지를구성할수있는 Multi Purpose 테마를사용하는것도좋은방법입니다.   3. 라이선스 정책 대부분의테마는구매후 6개월간 Support를제공합니다. 여기에 12개월의추가지원을받기위해서는추가요금이지불되어야합니다. 라이선스는Regular License를기본으로합니다. $29~$69정도의가격으로구매할수있는이러한경우는 1개의홈페이지에 1개의테마를구매, 사용합니다. 대부분한도메인에서는하나의테마를사용하기때문에큰지장은없고, 혹시나하위사이트 ( aaa.com 과 image.aaa.com, aaa.com/image 등)는하나의도메인에해당됩니다.    4. Live Preview 확인 한테마를클릭해서설명을보려하면상단에는테마에대한이미지가있고그바로아래에 Live Preview 버튼이있습니다. 이버튼을이용해서테마가적용된웹사이트를미리볼수있습니다. 여러기능을제공하는테마의경우에는주제나레이아웃등에따라서 Live Preview를다양하게제공하기도합니다. Best Seller 의상위랭킹을장기간유지하고있는 Be 테마의경우, 총 360가지이상의미리보기를제공합니다. 워낙방대한예시라서이들프리뷰를살펴보는데에도많은시간이걸리겠네요.   저는개인적으로가볍고적당한기능이포함된테마를선호합니다. 그래서요즘엔 Enfold 테마를주로사용하고있습니다. 물론여러플러그인들이한번에설치되는다양한테마도훌륭하지만, 여러기능을익히는데에도시간이소요되더군요. 급히 만든 사이트긴 하지만, 실제로http://zeffiroinc.com/도 Enfold로만든웹사이트들중하나입니다.   5. 모바일 반응성 체크 방법  대부분은 테마 미리보기 상단에서 모바일 아이콘을 통해 반응형 여부를 쉽게 확인할 수 있지만, […]