워드프레스 테마 만들기 – 5 , 설치 및 CSS 업로드


워드프레스 테마 만들기에서 여러가지 프로그램을 설치하고, 웹호스팅까지 준비되었다면 바로 제작을 진행하셔도 되지만, 그렇지 않다면 먼저 아래 목록을 보시고 필히 확인 하시기 바랍니다.

  • JAVA 설치
  • Aptana Studio 설치
  • 웹호스팅 신청 또는 로컬 PC 에 웹서버 설치
    • 웹호스팅 신청 사이트 (아이디, 비밀번호)
    • FTP 계정 (아이디, 비밀번호)
    • 데이터베이스 (데이터베이스 이름, 아이디, 비밀번호)

위 내용중 웹호스팅 관련하여 신청하실때는 아이디와 비밀번호가 동일한 경우도 있지만, 3가지 모두 다른 경우도 있으니 입력을 하면서 필히 메장에 기록해 두셔야 합니다.

먼저 워드프레스 사이트 접속하셔서 워드프레스 파일을 다운로드 받아 zip 파일을 압축해제하여 FTP 프로그램을 이용하여 업로드 합니다.

웹호스팅 회사마다 홈페이지 기본 폴더가 다르며 보통은 www 또는 public_html 폴더를 홈페이지 폴더로 설정합니다.

https://wordpress.org/download/

tar.gz 파일은 서버에서 직접 다운로드 받아 압축을 해제하는데 유용하며, zip 파일은 PC 에 내려받아 압축을 해제한 다음 업로드 하는것에 유용합니다.

기본적으로 압축해제시 폴더명이 wordpress 로 되어 나옵니다. 업로드후 폴더명을 변경해도 되지만, 미리 변경하여 올리면 편리합니다. wordpress 를 호스팅 회사에서 정하는 홈페이지 폴더명 www 로 변경하고 FTP 프로그램으로 웹호스팅 서버에 접속을 합니다.

이미 만들어진 www 폴더명을 www_bak 라고 변경한후 압축해제한 워드프레스 www 폴더를 전체 업로드 합니다.

워드프레스 설치에 대한 내용은 아래 내용을 참고 하시면 도움이 됩니다.

워드프레스 설치

위 포스팅 내용을 보고 워드프레스 설치를 하셨다면, 다음은 부트스트랩에서 필요한 css 파일과 js 파일을 다운로드 합니다.

https://getbootstrap.com/docs/4.0/getting-started/download/

다운로드 받은 파일은 다음과 같이 압축을 해제 합니다.

Aptana Studio 원격 접속까지 하셨다면 먼저 테마 폴더 아래에 테마폴더를 하나 만들어서 부트스트랩에 다운로드한 css 파일과 js 파일을 업로드합니다.

테마폴더은 demo2018 로 정했으며 전체적인 경로는 다음과 같습니다.

/wp-content/themes/demo2018/bootstrap/css/bootstrap.css
/wp-content/themes/demo2018/bootstrap/css/bootstrap.min.css
/wp-content/themes/demo2018/bootstrap/js/bootstrap.js
/wp-content/themes/demo2018/bootstrap/js/bootstrap.min.js

위 폴더 구성에 맞게 테마 폴더 아래 폴더를 만들고 해당 파일을 업로드 합니다.

이후 테마에 해당하는 파일을 임시적으로 만들어 둡니다.

/wp-content/themes/demo2018/style.css
/wp-content/themes/demo2018/index.php
/wp-content/themes/demo2018/functions.php

위 3개의 파일이 있으면 간단하게 하나의 독립적인 테마 파일로 인식합니다.

현재 테마에 대한 설명은 style.css 파일 헤드에 기록하여 워드프레스 내에서 테마 정보를 인식하도록 작성 합니다.

/*
Theme Name: Demo 2018
Theme URI: https://www.wordpresslab.co.kr
Author: DK Kim
Author URI: https://www.wordpresslab.co.kr
Description: 워드프레스를 이용하여 테마 만들기 데모입니다.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: demo2018
*/

위 내용처럼 입력하고 워드프레스 관리자 페이지에 접속해 보시면 다음과 같이 Demo 2018 이라는 테마가 있을겁니다.

해당 테마를 Active 하시면 사용자 화면에서도 Demo 2018 테마를 보실수 있습니다. 물론 지금은 아무런 내용이 없기 때문에 아무것도 나오지 않지만 조금씩 내용을 채워 나가면서 워드프레스 테마의 원리와 제작 방법에 대해 알아 보도록 하겠습니다.