워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

블로그 인기글

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

오늘부터 워드프레스 무료 테마를 사용해서 모바일 홈페이지를 만드는 전과정을 진행하겠습니다. 이 과정의 목적은 워드프레스로 하나의 홈페이지를 만드는 전 과정을 파악하므로서 워드프레스로 홈페이지를 만드는 것이 쉽다는 것을 알려드리는데 있습니다. 또한 무료 테마를 사용할 것이며 모든 소스는 무료입니다. 하루에 하나씩 글이 올라올 것이며 끝날 때까지는 몇개의 글이 올라올지는 모르겠으나 1일 1포스팅 원칙을 지킨다면 약 3주면 완성될 것 같습니다.


제가 만든 워드프레스 완벽입문 책은 상세하게 설명하느라고 설명도 많고 사진도 많아서 부담이 갈겁니다. 책 후반에는 무슨 컴퓨터 프로그램 만드는 책인지 착각을 일으킬 정도로 코드도 엄청 많습니다. 책의 기획 의도는 웹디자인 초보를 위한 것이라서 테마 만들기가 중점적으로 다뤄졌죠. 그래서 이번 워밍업 과정에서는 누구라도 따라할 수 있을 정도로 설명도 가능한한 짧게 하는 대신 이미지를 많이 넣어서 이해하기 쉽도록 하겠습니다. 대상 사이트는 제가 만든 책의 홈페이지입니다. 새로 만들기에는 시간이 걸리고 하니 이 홈페이지를 완성할 때까지의 과정만을 담을 것입니다. 이러한 과정을 그냥 따라하는 식으로 한번이라도 거치면 책을 읽는데 도움이 될 것이며 책을 안보시는 분들도 워드프레스를 익히는데 도움이 되리라 생각합니다. 또한 완료가 되면 출판사에서 전자책(pdf나 epub)으로 만들어 무료로 공개한다고 하니 굳이 블로그에 접속하지 않아도 되겠습니다. 


그럼 시작하겠습니다. 


1. WAMP 서버 설치하기


WAMP 서버가 처음 사용자에게는 오류가 발생할 수도 있으니 이글(http://martian36.tistory.com/1256)을 참고해서 오토셋을 설치하고 사용하세요.


워드프레스는 웹서버 환경이 있어야 작동이 가능합니다. 내 컴퓨터에 웹서버 환경을 만들어주는 프로그램이 여러가지 있는데 OS에 따라서 다릅니다. 윈도우 OS를 많이 사용하므로 윈도우용 웹서버 환경을 만들어주는 WAMP를 설치하겠습니다.


http://www.wampserver.com/en/


위의 링크를 클릭하면 WAMP 서버 프로그램을 내려받을 수 있는 사이트로 이동합니다.



페이지 상단에서 DOWNLOAD 메뉴를 클릭하면 여러가지 버전의 프로그램을 받을 수 있는 화면으로 이동합니다. 64비트와 32비트용이 있고 PHP 버전 아파치 버전에 따라서 다르지만 32비트나 64비트 컴퓨터에서 작동이 가능한 32비트용 프로그램으로 클릭합니다.



팝업 창에서 you can download directly링크를 클릭하면 소스포지(Sourceforge) 사이트로 이동하고 5초가 지나면 내려받을 수 있습니다.



내려받은 프로그램을 실행하면 여러가지 설치과정이 진행됩니다. 체크할 곳에 체크하고 무조건 next만 클릭하면 됩니다. 



위 과정도 마찬가지입니다. 마지막 단계에서 Launch Wampserver 2 now에 체크하고 Finish 버튼을 클릭하면 WAMP서버가 실행됩니다.


2. 데이터베이스 만들기



시스템 트레이 아이콘을 클릭하면 아이콘이 녹색으로 돼있어야 정상입니다. 아닌 경우 이곳을 클릭해서 해결합니다. 시스템트레이 아이콘을 클릭하고 WAMP 서버아이콘-phpMyAdmin을 차례대로 클릭하면 아래와 같은 화면이 웹브라우저에 나타납니다.



데이터베이스 탭을 클릭하고 입력란에 wordpress라고 입력한 다음 우측에서 Create 버튼을 클릭합니다. 데이터베이스 비밀번호도 설정하여야하지만 내컴퓨터의 서버환경에서는 비밀번호를 설정하지 않아도 되므로 그대로 진행합니다. 비밀번호 설정 방법은 이곳을 참고하세요.


3. 워드프레스 설치하기


워드프레스 프로그램을 내려받아야하는데 일부 글자가 영어로 나타납니다. 또한 워드프레스 기본테마가 Twenty Twelve(2012)로 업그레이드됐지만 현재 최신판을 받으면 이 테마가 포함돼있지 않아서 언어파일 수정한 것과 기본테마를 포함시켜 다시 압축파일을 만들었습니다. 그리고 환경설정 파일인 wp-config-sample.php를 한글로 번역해서 삽입했습니다. 워드프레스 한글 공식 사이트에서 받으려면 이곳을 클릭하면 됩니다.


wordpress-3.4.2-ko_KR.zip

 

워드프레스 한글 파일을 내려받아서 압축을 풀고 폴더로 들어가면 wordpress 폴더가 있습니다. 이 폴더를 선택하고 Ctrl+C키를 누르면 복사가 됩니다. 설치는 WAMP 서버의 www 폴더에 해야하므로 아래의 경로로 이동해서 Ctrl+V키를 눌러 붙여넣습니다.


C:\wamp\www



wordpress 폴더를 더블클릭해서 들어갑니다.



wp-config-sample.php 파일을 오른쪽 마우스 클릭하고 컨텍스트 메뉴에서 편집을 선택하면 메모장에 파일의 내용이 열립니다.



데이터베이스 이름에는 이전에 만든 데이터베이스 이름(wordpress)을 입력합니다. 사용자명은 WAMP 서버의 데이터베이스는 기본적으로 사용자 이름이 root로 돼 있으니 root를 입력합니다. 비밀번호는 설정이 안돼있으니 비밀번호라는 글자를 제거하고 Ctrl+S키를 눌러 저장합니다.



편집한 파일을 오른쪽 마우스 버튼을 클릭하고 메뉴에서 이름 바꾸기를 선택한 다음 -sample을 지우고 엔터키를 누릅니다.



웹브라우저의 주소창에 localhost/wordpress를 입력하고 엔터키를 치면 위와같은 화면이 나타납니다. 사이트제목과 사용자명을 입력합니다. 사용자명은 사이트의 운영자 아이디이고 데이터베이스 사용자명인 root와 다릅니다. 같은 비밀번호를 두번 입력하고 이메일 주소를 입력, 프라이버시에 체크하고  워드프레스 설치하기 버튼을 클릭합니다.



설치가 완료됐습니다. 로그인 버튼을 클릭합니다.




화면에서 위에서 입력한 아이디와 비밀번호를 입력합니다.



워드프레스 첫화면이 나타납니다.


다음글은 사이트에서 사용할 테마를 설치하고 테마의 사용법을 알아보겠습니다. 이 테마는 유료테마였는지 상당히 고급스럽습니다. 애니메이션 배너도 있고 모바일용 테마라서 화면 크기에 따라서 변화된 사이트가 나옵니다.