워드프레스 강좌 #1. 개발환경 준비, 설치, 환경설정

웹사이트를 개발하기 위해 호스팅 서버에서 바로 코딩을 할 수도 있지만, 이번 강좌에서는 자신의 PC에서 코딩을 마친 후에 호스팅 서버에 업로드하는 방식으로 진행하겠습니다.

개발환경 준비 #1. xampp

이 블로그에 있는 다음 포스팅을 참고하여 xampp 환경을 구축합니다.

윈도우에서 xampp 환경 구축

이번 강좌를 위해서는 portable xampp 환경에서 가상호스트로 nam 이라는 계정을 127.0.0.2에 연결하겠습니다.
계정 이름을 반드시 nam 으로 할 필요도 없고, 웹 주소를 반드시 127.0.0.2로 할 필요도 없습니다.
계정 이름은 알파벳과 숫자로 이루어지면 되고, 웹 주소는 127.x.x.x (x는 0 이상 255 이하의 숫자)로 하면 됩니다.
이번 강좌에서는, 웹브라우저에서 http://127.0.0.2/ 에 접속하면 x:/home/nam/public_html 폴더로 연결된다고 가정하고 진행하겠습니다.

개발환경 준비 #2. 에디터, FTP 클라이언트

워드프레스를 사용한 웹사이트 개발은 대개 웹브라우저와 에디터, FTP 클라이언트를 통해 이루어집니다.
웹브라우저에서는 관리자로 로그인하여 외모, 플러그인, 페이지 등을 설정하게 됩니다.
에디터에서는 테마 내의 .php, .css 파일을 수정하거나 외부 커스텀 페이지을 생성하게 됩니다.
FTP 클라이언트는 당장 사용하지는 않지만 개발을 마치고 호스팅을 위한 파일을 업로드하기 위해 필요합니다.

웹브라우저: 익스플로러, 크롬 등 현재 사용 중인 최신 브라우저가 있으므로 따로 설치할 필요가 없습니다.

에디터: FTP 원격 편집이 가능한 에디트플러스(Editplus)를 추천합니다.
아래에 링크된 에디트플러스 공식 웹사이트의 다운로드 메뉴에서 30일 평가판을 다운받을 수 있습니다.

에디트플러스

평가판이라고 하더라도 기능의 제한은 없으므로 사용하는 데에는 불편함이 없습니다.
정식 라이센스는 부가세를 포함하여 30,000원 정도에 구입할 수 있습니다.

에디트플러스의 설치가 끝난 뒤에는 인코딩 설정을 해줘야 합니다.
에디트플러스 인코딩 기본값은 ANSI(euc-kr)인데 워드프레스에서는 UTF-8이라는 인코딩을 사용합니다.
따라서 이 설정을 하지 않을 경우에는 소스가 깨져서 출력될 수 있습니다.

에디트플러스를 실행하고 메뉴 > 도구 > 기본 설정을 클릭합니다.
기본 설정 창에서 왼쪽 항목 중에서 파일을 클릭합니다.
기본 인코딩을 UTF-8로 설정합니다.

FTP 클라이언트: 무료인데다 용량이 적고 기능이 다양한 파일질라(FileZilla)를 추천합니다.
아래에 링크된 파일질라 공식 웹사이트에서 FileZilla Client를 다운받아 설치합니다.

파일질라

당분간은 파일질라를 사용할 일이 없습니다.
모든 코딩 작업이 끝난 이후에 호스팅 서버에 업로드할 때에 사용하게 될 것입니다.

워드프레스 설치 #1. 다운로드

아래에 링크된 워드프레스 웹사이트에서 최신 워드프레스를 다운받습니다.
윈도우 환경의 경우에는 .zip 파일을 다운받는 것이 편리합니다.
2012년 11월말 현재 최신 버전은 3.4.2입니다.

워드프레스

다운로드 페이지에서 한국어 버전이 제공된다고 안내해 주지만, 한국어 버전보다는 영어 버전을 설치해야 합니다.
워드프레스의 최신 버전은 항상 영어 버전이고, 영어 버전을 설치한 이후에도 이후의 강좌에서 설명할 방식대로 쉽게 한글화를 할 수 있기 때문입니다.

워드프레스 설치 #2. 압축 해제

다운받은 워드프레스 파일의 압축을 해제하면 wordpress라는 폴더가 생깁니다.
이 폴더 안에 있는 파일들을 nam 계정 내의 폴더로 옮기면 설치가 됩니다.
즉, xampp이 설치된 계정의 public_html폴더 안에 wp라는 폴더를 만들고 wordpress 폴더 내의 파일들을 이동시킵니다.
portable 버전의 xampp를 x: 드라이브에 설치한 경우를 예를 들면, 이동 작업이 끝난 뒤의 wp-config-sample.php 파일의 경로는 다음과 같이 되어야 합니다.

x:/home/nam/public_html/wp/wp-config-sample.php

이 때에 public_html 내의 wp라는 폴더 이름은 제가 임의로 설정한 것으로, wordpress나 2012와 같이 자신이 사용하고 싶은 다른 폴더 이름을 사용해도 됩니다.
public_html 폴더의 바로 아래에 바로 워드프레스를 설치하지 않고 하나의 하위폴더를 만드는 이유는 보안적인 측면과 유지 관리의 측면에 있습니다.

웹으로 접속할 때 wp 경로가 보이는 것이 꺼려질 수 있지만, 뒷 부분에서 설명할 몇 가지 간단한 설정을 통해 wp 경로가 없는 것처럼 보이게 할 수 있습니다.

워드프레스 설치 #3. 데이터베이스 설정

워드프레스가 작동하기 위해서는 데이터베이스가 꼭 필요합니다.
데이터베이스를 사용하기 위해서는 데이터베이스 계정(ID/PW)과 그 계정에게 할당된 데이터베이스가 필요합니다.

xampp를 설치하면 기본적으로 root 계정이 있고 별다른 데이터베이스는 없는 상태입니다.
그러나 워드프레스를 사용하기 위한 데이터베이스 계정으로 root 계정을 사용하는 것은 좋지 않습니다.
따라서 다음과 같은 순서대로 워드프레스에서 사용할 데이터베이스 계정과 데이터베이스를 생성합니다.

1. 웹브라우저에서 http://127.0.0.1/phpmyadmin/ 접속

2. ID: root / PW: (앞에서 설정한 암호) 입력하여 로그인

3. 우측 상단의 메뉴들 중에서 `Users` 클릭

4. 중간에 있는 `Add user` 클릭

5. 새 계정에 관한 정보 입력
사용자명에 데이터베이스 계정의 ID 입력(예: wp)
호스트는 선택상자에서 local 선택
암호는 데이터베이스 계정의 PW 입력
Database for user 칸에서 선택
오른쪽 아래에서 `Add user` 버튼 클릭

데이터베이스가 생성된 후에 왼쪽 메뉴를 보면 데이터베이스 목록에서 wp가 추가된를 확인할 수 있습니다.

마지막으로 다음 순서대로 인코딩을 UTF-8로 설정해야 합니다.

1. 좌측의 데이터베이스 목록에서 wp를 클릭

2. 우측의 상단 메뉴에서 Operations를 클릭

3. Collation에서 utf8_general_ci를 선택하고 Go 버튼을 클릭

워드프레스 설치 #4. wp-config.php 파일 생성

이제 웹브라우저에서 http://127.0.0.2/wp/ 를 입력해서 워드프레스에 접속해 봅시다.
그러면 다음과 같이 wp-config.php 파일이 없다는 안내문을 볼 수 있습니다.

Create a Configuration File 버튼을 눌러서 설치를 시작합니다.

그러면 다음과 같은 화면이 나옵니다.
Let’s go 버튼을 눌러서 진행합니다.

데이터베이스 계정에 관한 정보를 입력하는 화면입니다.
앞에서 생성한 데이터베이스 계정의 정보를 입력합니다.

옵션을 선택했기 때문에 여기에서 Database Name과 User Name은 동일하게 wp가 될 것입니다.
앞에서 호스트에서 local을 선택했기 때문에 여기에서 Database Host는 localhost가 됩니다.
입력을 마친 후에 Submit 버튼을 누르면 설치가 완료됩니다.

데이터베이스 계정에 관한 정보를 정확하게 입력하지 않았을 경우에는 Submit 버튼을 누르면 다음과 같은 화면이 출력됩니다.

뒤로 가서 ID, PW, 데이터베이스 이름 등을 제대로 입력했는지 확인해야 합니다.

데이터베이스 계정에 관한 정보가 정확하게 입력된 경우에는 다음과 같은 화면이 출력되고 워드프레스 설치 폴더 내에 wp-config.php 파일이 생성됩니다.

그러나 아직 데이터베이스 안에 테이블이 생성된 상태는 아니기 때문에 Run the install 버튼을 클릭해서 설치를 시작해야 합니다.

다음과 같이 환영 화면과 함께 관리자 계정에 관한 정보를 입력하게 됩니다.

Site Title에는 웹사이트의 제목을 입력합니다.

Username에는 이 웹사이트에 로그인할 때에 사용할 아이디를 입력합니다.
앞에서 데이터베이스 계정을 생성할 때에 사용한 ID/PW와는 완전히 상관이 없습니다.
이 아이디는 관리자 계정이 되기 때문에 admin과 같이 누구나 알기 쉬운 아이디를 입력하면 보안에 위험이 있으므로 자신만이 알 수 있는 아이디를 사용하는 것이 좋습니다.

나머지는 적당하게 입력하고 Install WordPress 버튼을 클릭하면 데이터베이스 내에 테이블을 생성하고 설치가 완료됩니다.
그러면 다음과 같은 화면을 볼 수 있습니다.

앞 단계에서 입력한 Username을 확인할 수 있습니다.
Password는 노출되지 않습니다.

Log In 버튼을 클릭하면 다음과 같은 로그인 창이 나옵니다.

아이디와 비밀번호를 입력하고 로그인하면 다음과 같은 관리 화면으로 접속됩니다.

여기까지 진행했다면 워드프레스 설치는 끝난 것입니다.

워드프레스 환경설정 #1. 기본 설정

다른 워드프레스 설정을 하기 전에 몇 가지 기본 설정을 해야 합니다.

1. Settings > General

Timezone을 GTC+9(한국 표준시각)으로 설정합니다.

2. Settings > Permalinks

Common Settings에서 본인이 원하는 주소 표시 방식을 선택합니다.
이 때에 Default가 아닌 나머지 옵션 중에서 하나를 선택하면 /wp 폴더 내에 .htaccess 파일이 생성된 것을 확인할 수 있습니다.
Default 설정을 유지할 경우에 .htaccess 파일이 생성되지 않는데, 별 문제는 없습니다.

3. Users > Your profile

Nickname을 아이디가 아닌 다른 값으로 바꾸어 줍니다.
에서 위에서 설정한 닉네임을 선택합니다.

워드프레스 환경설정 #2. /wp 경로 감추기

앞에서는 보안을 위해서 /wp라는 하위 폴더 안에 워드프레스를 설치했습니다.
그러나 사용자들이 접속할 때에 매번 /wp 폴더로 접속하는 것은 불편하고, 보기에도 좋지 않습니다.
이를 해결하기 위해서는 .htaccess 파일을 사용하면 됩니다.

1. public_html/wp/index.php 파일 복사

public_html/wp/index.php 파일을 public_html/index.php 로 복사합니다.
그런 뒤에 에디트플러스로 public_html/index.php 파일을 열어 수정합니다.

require('./wp-blog-header.php');

라고 된 부분을

require('./wp/wp-blog-header.php');

으로 바꾸어 줍니다.

2. public_html/wp/.htaccess 파일 복사

public_html/wp/.htaccess 파일을 public_html/.htaccess 로 복사합니다.
그런 뒤에 에디트플러스로 public_html/.htaccess 파일을 열어 수정합니다.
이 .htaccess 파일이 없는 경우에는 복사하지 않아도 됩니다.

RewriteBase /wp/

라고 된 부분을

RewriteBase /

으로 바꾸어 주고

RewriteRule . /wp/index.php [L]

라고 된 부분을

RewriteRule . /index.php [L]

으로 바꾸어 줍니다.
만약에 이런 내용이 없는 경우에는 수정할 필요 없이 그대로 두면 됩니다.

웹브라우저에서 http://127.0.0.2/ 으로 접속해 보아 http://127.0.0.2/wp/ 로 접속한 것과 같은 화면이 나온다면 성공입니다.

마지막으로 워드프레스 설정 화면에서 Settings > General >

여기까지 하고 저장하면 http://127.0.0.2/ 로 접속하면 제대로 접속되고, http://127.0.0.2/wp/ 로 접속하면 페이지를 찾을 수 없다는 화면을 볼 수 있어야 정상입니다.

다음 강좌에서는 영문 워드프레스를 한글화하는 방법을 다루겠습니다.

관련 포스트

“워드프레스 강좌 #1. 개발환경 준비, 설치, 환경설정”에 대한 18개의 댓글

  1. 좋은 정보 감사합니다. 큰 도움이 되고 있습니다. ^^

    근데, 저같은 경우 설명해주신대로 하면
    마지막 부분에서 127.0.0.2로 접속하면 화면이 나오구, /wp로 접속해도 계속 화면이 나오는데요.
    말씀하신대로면 /wp로 접속하면 페이지가 안떠야 정상인 것 같은데요.

    제가 무엇을 잘못 한거지 조언해주시면 합니다. ^^”

  2. Error establishing a database connection

    This either means that the username and password information in your wp-config.php file is incorrect or we can’t contact the database server at localhost. This could mean your host’s database server is down.
    •Are you sure you have the correct username and password?
    •Are you sure that you have typed the correct hostname?
    •Are you sure that the database server is running?

    If you’re unsure what these terms mean you should probably contact your host. If you still need help you can always visit the WordPress Support Forums.

    서브밋 눌르면 이게뜨네요

    1. 본문에 쓴 것처럼 데이터베이스 계정에 관한 정보를 정확하게 입력하지 않았을 경우에 나타나는 현상입니다.
      1) submit 이전에 DB의 아이디와 비밀번호를 제대로 입력했는지
      2) DB의 호스트명을 제대로 입력했는지
      3) mysql이 현재 작동중인지
      이렇게 3가지를 확인해보시면 그 중에서 잘못된 부분이 있을 겁니다.

  3. DB연결에서 막혔었는데
    이 글보고 해결하고 갑니다!
    친절한 설명 감사해요 ㅠㅠ

  4. 기존에 제로 or 그누보드를 설치하여 운영중인 사이트가 있는데요 이 호스팅에 워드프레스를 새로 설치하려고 합니다
    그런데 wp-admin/install.php 이 파일을 실행시키면
    Parse error: parse error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /경로/www/wordpress/wp-includes/locale.php on line 21
    Fatal error: Cannot instantiate non-existent class: pomo_filereader in /경로/www/wordpress/wp-includes/pomo/mo.php on line 24
    위와 같은 에러가 납니다.
    이 홈페이지를 관리하는 업체가 있었던 상황이고, 한 서버에 여러 디렉토리를 나눈 후 각각 도메인을 붙여 홈페이지를 운영하고 있는것 같은데요 이 호스팅에 추가로 워드프레스 설치가 가능할까요? 답변 부탁드립니다 감사합니다

  5. 안녕하세요. 작품 포트폴리오 전시용 사이트 제작 생각 중인데요,
    굳이 이렇게 어렵게 비전문가가 코딩을 일일이 해가면서 해야하나요?
    워드프레스 사이트 자체에서 모두 해결볼수 없는걸까요?ㅠ_ㅠ
    비전문가는 광광 웁니다.

답글 남기기

이메일 주소를 발행하지 않을 것입니다.