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

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

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

사이트 이미지
웹사이트

회원관리 사이트

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

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

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

사이트 이미지
쇼핑몰

해외 쇼핑몰

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

사이트 이미지
쇼핑몰

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

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

포트폴리오 보기

블로그 인기글

커스텀 디자인

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

Brizy Pro

페이지 빌더

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

Elementor Pro

페이지 빌더

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

Advanced Custom Field Pro

사용자 정의 필드

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

Pods

사용자 정의 콘텐츠 타입

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

블로그

WAMP 서버가 초보자분들이 사용 시 에러도 나고 어려운 점이 있으니 오토셋을 사용하세요. 아래의 링크에 사용법이 있습니다.

http://martian36.tistory.com/1256 



워드프레스는 해외에서 사용자가 가장 많은 컨텐트 메니지먼트 시스템(Content Management System, CMS)으로 사용하기 쉽고 플러그인을 설치하면 블로그뿐만 아니라 인터넷 쇼핑몰까지 만들 수 있는 프로그램입니다. 대부분의 블로그 프로그램이 웹프로그래밍 언어인 php로 만들어졌듯이 워드프레스도 php언어로 만들어졌습니다.

이전 글 에서 드루팔을 이용해서 웹디자인 개발을 하기 위해서 Acquia Drupal을 설치하여 웹서버환경을 만들었듯이 워드프레스도 웹서버환경을 만들면 호스팅 서버에 업로드하지 않고도 내 컴퓨터에서 디자인 작업을 할 수 있습니다. 드루팔에서는 DAMP 스택을 사용했지만 워드프레스는 다양한 다른 스택을 사용하여 웹서버환경을 만들 수 있습니다. 대표적인 스택이 XAMPP이지만 여기서는 WAMP를 사용합니다. 맥버전은 MAMP를 사용하면 됩니다. 스택이란 웹서버환경을 만들기 위해서는 웹서버 프로그램인 아파치(Aphache)와 데이터베이스 프로그램인 마이씨퀄(MySQL), 웹 프로그래밍 언어인 PHP를 사용하는데 첫자를 따서 AMP라고 합니다. 윈도우용은 WAMP이고 맥용은 MAMP입니다. 모두가 오픈소스 프로그램을 사용하므로 스택도 오픈소스라서 무료로 다운 받아 사용할 수 있습니다. 

이곳 을 클릭하면 WAMP를 다운받을 수 있는 사이트로 이동하고 이곳 을 클릭하면 MAMP를 다운 받을 수 있는 사이트로 이동합니다. 저는 윈도우를 사용하므로 WAMP 스택을 다운 받았습니다.

 
사이트로 이동하여 메뉴에서 다운로드 버튼을 클릭하면 다운로드페이지로 이동합니다. 32비트 버전과 64비트 버전이 있으니 자신의 컴퓨터 사양에 따라 다운 받으면 됩니다. 64비트 컴퓨터라도 32비트용을 사용할 수 있습니다.


다운받은 파일을 더블클릭하면 아파치 버전과 MySQL, PHP 버전 정보가 나오고 추가로 설치되는 마이씨퀄을 그래픽 인터페이스에서 사용할 수 있도록 해주는 프로그램인 phpMyAdmin 프로그램 버전 정보가 나옵니다. 다음 버튼을 클릭합니다. 라이센스 사용 동의입니다. 동의함에 체크하고 다음 버튼을 클릭합니다. 설치되는 기본 폴더는 C드라이브의 wamp폴더입니다. 다른 곳에 설치하고자 하면 브라우즈 버튼을 클릭하여 폴더를 설정하면 됩니다. 다음버튼을 클릭하면 바로가기 아이콘을 만들 수 있는 창이 나옵니다. 원하는 곳에 체크하고 다음을 클릭합니다.

 

설정한 내용이 나옵니다. 다음버튼을 클릭하면 설치가 시작됩니다. 다 설치가 되면 SMTP서버를 설정할 수 있는 창이 나옵니다. 그대로 두고 메일주소를 입력하고 다음을 클릭하면 최종적으로 설치된 프로그램 목록이 나옵니다. 프로그램 시작하기에 체크하고 Finish버튼을 클릭하면 프로그램이 시작되고 시스템 트레이에 아이콘이 만들어집니다. 


시스템 트레이 아이콘을 클릭하면 WAMP 서버 아이콘이 나옵니다. 처음에는 빨간색이었다가 오렌지색으로 바뀌고 모든 프로그램이 정상적으로 시작되면 녹색으로 바뀝니다. 시작되는 프로그램중에 이미 다른 스택에서 사용중이었다면 정상적으로 시작이 안되므로 모두 종료하고 작업표시줄에서 우클릭하여 작업관리자 시작을 선택한 다음 프로세스에서 실행되고 있는 프로그램(httpd.exe, mysqld.exe 등)을 종료하고 다시 시작해야합니다.

2의 아이콘을 클릭하면 3의 패널이 나옵니다. Localhost를 클릭하면 웹페이지에 WAMP 서버의 정보가 나오고 하단에서 이 프로그램을 사용해서 작업중인 프로젝트를 볼 수 있으며, 이를 클릭하면 해당 프로젝트가 웹페이지에 나오게 됩니다. 5를 클릭하면 데이터베이스 프로그램인 MySQL의 그래픽 버전인 phpMyadmin을 볼 수 있습니다. 6을 클릭하면 프로젝트 폴더로 이동하게 되며 이곳이 워드프레스나 드루팔, XE엔진 등 CMS 파일 폴더를 붙여넣고 프로젝트를 진행할 수가 있는 폴더입니다. 세부 메뉴를 보려면 각 프로그램을 클릭하면 나오게 됩니다. 각각의 프로그램을 개별적으로 중지시키거나 재시작할 수 있습니다. 10에서는 전체를 중지하거나 재시작할 수 있습니다.


시스템 트레이의 WAMP아이콘이 주황색으로 되어있는 경우 아파치 서버 프로그램이나 데이터베이스가 다른 프로그램에 의해서 이미 실행되고 있는 경우가 대부분입니다. WAMP서버 아이콘을 우클릭해서 나오는 메뉴에서 Exit를 선택해서 종료한 다음, 프로그램 아이콘들이 모여있는 작업표시줄에서 우클릭하여 작업관리자 시작을 클릭하면 위와같은 창이 나옵니다. 1의 프로세스탭을 클릭하고 2와 3의 httpd.exe(아파치), mysql.exe(데이터베이스)의 프로그램을 하나씩 선택해서 우클릭하면 메뉴가 나옵니다. 프로세스끝내기를 선택해서 종료한 다음 WAMP서버를 다시 시작해보세요.

위와같이 해도 안될 경우 아파치 서버가 사용해야할 port 80이 다른 프로그램에서 사용하고 있는 경우가 있으므로 이를 아래와 같이 8080으로 변경해주면 됩니다. 


WAMP서버 아이콘을 클릭하고 2,3의 순서대로 클릭하면 메모장이 나옵니다. Ctrl+F키를 눌러 검색어로 Listen 80을 찾은 다음 4의 80을 8080으로 변경한 후 Ctrl+S키를 누르고 메모장을 닫은 다음 WAMP서버를 재가동하세요.


드루팔은 언어파일을 별도로 설치해야 하지만 워드프레스는 다른 프로그램과는 달리 한국어 버전이 따로 있습니다. 이곳 을 클릭하면 다운로드 사이트로 이동합니다. 영어버전은 이곳 을 클릭하면 됩니다. 


다운받은 파일을 압축을 풀고 폴더를 클릭해서 들어가면 wordpress폴더가 나옵니다. 이곳에 모든 프로그램이 들어있습니다. 이 폴더를 선택하고 Ctrl+C키를 눌러 복사합니다. C:\wamp폴더로 이동하면 2와 같이 폴더와 파일이 보입니다. 블로그 프로그램은 3의 www폴더에 설치를 해서 실행합니다. 3을 더블클릭해서 들어가서 Ctrl+V키를 눌러 붙여넣기합니다. 여기서 폴더의 이름을 변경하면 다음단계에서 주소입력시 해당 폴더 이름을 입력해야합니다.


웹브라우저를 열고 주소창에 localhost/wordpress를 입력하고 엔터키를 치면 위와같은 창이 나옵니다. 설정파일 만들기를 클릭하면 워드프레스 폴더에 있는 wp-config-sample.php파일을 근거로 해서 같은 폴더에 wp-config.php파일이 만들어집니다. 이 설정파일은 php프로그램이 데이터베이스와 연결하기 위해서 데이터베이스 이름과 비밀번호, 데이터베이스 접속 아이디를 만드는 과정으로 다음에서 진행됩니다. 


설치하기 전에 5가지의 내용이 필요하다고 합니다. 데이터베이스는 미리 만들어야하므로 시스템트레이에서 WAMP아이콘을 클릭하여 phpMyadmin을 선택하면 웹브라우저에 다음과 같은 화면이 나옵니다.


1의 데이터베이스탭을 클릭하고 2의 란에 원하는 데이터베이스 이름을 입력합니다. 3을 클릭하여 utf8_general_ci를 선택하고 Create버튼을 클릭하면 좌측에 데이터베이스가 만들어집니다. 다시 설치화면으로 가서 Let's go 버튼을 클릭합니다. 


위에서 만든 데이터베이스 이름을 입력합니다. 데이터베이스의 최고 사용자이름은 기본적으로 root로 되어있고 비밀번호는 없습니다. root로 입력하고 비밀번호는 아무것도 나오지 않게 합니다. 나중에 국내 CMS 프로그램인 XE나 다른 프로그램을 사용하려면 비밀번호를 만들어야하는데 워드프레스는 비밀번호가 없어도 사용이 가능하므로 그냥 넘어갑니다. XE엔진을 설치할때 필요하기 때문에 워드프레스를 다 설치하고 난 다음에 변경하도록 합니다. 나머지는 그대로 두고 Submit 버튼을 클릭하면 wp-config.php파일이 만들어집니다.


Run the install버튼을 클릭하면 설치가 시작됩니다.


사이트 제목과 사용자이름을 입력합니다. 여기서 사용자명은 데이터베이스 사용자명과 다릅니다. 웹사이트에 로그인하기 위한 사용자 이름과 비밀번호를 입력합니다. 이메일주소도 입력하고 설치하기 버튼을 클릭합니다.


설치가 완료되고 로그인 버튼을 클릭해서 사용자명과 비밀번호를 입력하여 로그인하면 다음과 같은 워드프레스 관리자 화면이 나옵니다.


데이터베이스와 phpMyadmin, 워드프레스의 비밀번호 설정


그러면 데이터베이스의 비밀번호를 설정하는 방법을 알아봅니다. 비밀번호 변경은 3곳을 해줘야합니다. 첫번째로 MySQL 데이터베이스, 두번째로 데이터베이스를 그래픽화면으로 보여주는 phpMyadmin, 세번째로 워드프레스 프로그램이 데이터베이스와 연결할 수 있도록 환경설정파일을 변경합니다.


윈도우 시작버튼을 클릭하고 하단의 찾기에서 cmd를 입력하고 엔터키를 누르면 도스 명령어 입력창이 나옵니다. 도스 명령어의 cd는 change directory를 의미합니다. cd 다음에 mysql.exe가 있는 경로를 입력하고 엔터치면 경로가 바뀝니다. 그다음 순서로 2처럼 mysql 명령어를 입력하고 엔터칩니다. 현재는 비밀번호가 없으니 사용자아이디인 root만 입력하면 데이터베이스에 로그인됩니다. 3처럼 명령어를 입력하는데 4의 newpass부분은 새로운 비밀번호를 입력하고 엔터치면 비밀번호가 설정됩니다. 3의 밑줄부분은 다음과 같습니다. 4번의 비밀번호 입력 부분의 괄호는 각진 괄호로 보이지만 아래처럼 일반 괄호입니다.

SET PASSWORD FOR root@localhost=PASSWORD('새로운 비밀번호');  


두번째로 C:\wamp\apps\phpmyadmin3.4.5 폴더에 보면 config.inc.php 파일이 있습니다(WAMP2.4 버전은 이 과정이 필요 없습니다). 텍스트에디터에 열면 이것도 WAMP 서버 설치시 기본적으로 비밀번호가 비어있는 상태로 설치됩니다. 같은 비밀번호를 따옴표 사이에 입력하고 저장합니다.

여기까지 하면 MySQL 데이터베이스의 비밀번호는 변경이 됐습니다. XE엔진을 설치할때 데이터베이스의 비밀번호를 확인하므로 설치가 가능해집니다. 하지만 워드프레스는 비밀번호가 없이 설정이 되어있기 때문에 워드프레스가 열려있는 웹브라우저에서 Ctrl+R키를 누르면 화면이 리프레시되면서 데이터베이스와 연결할 수 없다고 나옵니다. 처음 설치시 wp-config.php파일이 비밀번호가 없이 설정해서 만들어졌기 때문입니다. 이 파일을 열어서 비밀번호를 데이터베이스와 같은 비밀번호로 만들어주면 됩니다.

 
워드프레스 프로그램이 설치되어있는 C:\wamp\www\wordpress 폴더로 이동하면 wp-config.php 파일이 오늘날짜로 만들어져 있습니다. 이것을 텍스트 에디터에 열면 25번째 줄에 비밀번호가 없습니다. 이곳의 따옴표 사이에 데이터베이스에서 설정한 비밀번호를 입력하고 저장해야 지금부터는 워드프레스 프로그램이 데이터베이스와 연결할 수 있는 상태가 되는 것입니다. 이것만 설정해서는 안되고 시스템트레이에서 WAMP서버의 아이콘을 클릭해서 Restart All Services를 클릭하여 재시작하고 웹브라우저도 껐다가 다시 열어야합니다. 웹브라우저를 재시동하지 않으면 phpMyadmin 화면에서 좌측에 이미 만들어진 데이터베이스만 나타나고 메인화면에는 계속해서 비밀번호가 틀리다고 나오게 됩니다. 시스템 트레이에서 WAMP 서버가 초록색 불이 들어오면 아이콘을 클릭하고 패널에서 phpMyadmin을 선택해서 데이터베이스 화면이 잘 나오는지 확인하세요. 그리고 같은 패널에서 Localhost를 선택한 다음 하단에서 Your Project란에서 진행중인 프로젝트를 클릭해서 워드프레스 화면이 나오는지 확인합니다. 

그리고 WAMP서버에서 도스 콘솔창을 사용하려면 시스템 트레이에서 WAMP 서버 아이콘을 클릭하고 MySQL을 클릭-MySql Console을 선택하면 됩니다. 이를 선택하면 비밀번호만 입력하는 창이 나옵니다. 비밀번호를 입력하면 도스 콘솔창에서 데이터베이스와 연결됩니다. 윈도우 시작메뉴에서 cmd 명령어를 입력해서 도스창을 띄웠을때는 경로를 mysql.exe파일이 있는 폴더로 변경하고 mysql -u root -p 비밀번호 mysql 처럼 이제는 비밀번호를 입력해야 데이터베이스에 로그인됩니다.

고유주소 기능을 시험하려면 wamp 서버에서 rewrite 모듈을 활성화 해야 합니다.



wamp 서버 아이콘 ->Apache -> Apache modules -> rewrtie_module을 클릭한 다음 wamp 서버를 재가동(Restart All Services)합니다.