WP홈페이지 제작 - Bootstrap

_S로 만들어진 aca 테마를 워드프레스에서 등록을 하고 활성화 합니다. 그리고 화면 좌측 상단의 [홈 아이콘을]을 [ctrl+ 클릭]하여 새 탭에서 페이지를 열어보면 아무런 디자인도 입혀지지 않은 정말 깨끗한 화면이 출력됩니다. 왜냐하면 아직 레이아웃에 맞춰서 정렬이 되어있지 않기 때문입니다. 거기에다가 내용도 입력된 것이 없고, 메뉴도 정해지지 않았고... 등등 아직 갈 길이 멉니다.

_S 테마 기본 모양

 

이제 레이아웃을 설계해야 합니다. 우선은 첫페이지를 디자인 하는데, 심플하게 사이드바는 없이 그냥 상단 네비게이션, 중단 최근포스트, 하단 푸터 & 카피라이트 를 세로로 쭈욱 나열하는 모양으로 하겠습니다. 그리고 상단 네비게이션과 중단 최근 포스트 사이에 이미지 슬라이더를 넣을 것입니다.

네비게이션
이미지 슬라이더
최근 포스트	최근 포스트	최근 포스트
하단 푸터 & 카피라이트

워드프레스 홈페이지의 가장 큰 장점 중에 하나로 소개되어지는 것이 무엇일까요?
바로 "반응형(Responsive) 홈페이지"라는 것입니다. 반응형 홈페이지가 뭐지? 라는 분...은 설마 없으시겠죠.
바로 컴퓨터 모니터, 스마트 폰, 스마트 패드 등의 여러 기기 및 화면을 체크해서 가장 컨텐츠를 보기 편한 형태로 레이아웃을 재정렬 하는 기능입니다. 정확하게는 워드프레스가 지원한다기 보다 HTML5와 CSS3 등을 사용하여 미디어 쿼리를 적용하여 코딩된 "테마"가 이 기능을 구현하는 것이죠. 몇 년전까지만 해도 "반응형"이라는 말 조차 없었습니다.

반응형 레이아웃

 

_S로 aca 테마를 반응형으로 만들기 위해서는 마찬가지로 일일이 직접 미디어 쿼리를 작성하고 코딩을 해야 하는데 이 일이 상당한 시간과 노력을 필요로 합니다. 그렇기 때문에 웹개발자들은 빠르고 편한 개발을 위해서 어떤 틀을 만들어 내었고, 그 중 가장 대표적인 것이 바로 부트스트랩(Bootstrap) 입니다.
부트스트랩은 트위터의 웹개발자들이 만들었고, 전 세계적으로 많이 사용되고 있습니다. 이런 일련의 개발틀을 "프레임워크(Framework)"라고 합니다. 이 프레임 워크를 사용해서 반응형 테마를 구현할 수 있습니다.

부트스트랩 홈페이지에서 부트스트랩 2.3.2 버전을 다운 받습니다.
http://getbootstrap.com/2.3.2/

부트스트랩 2.3.2

 

최신 버전은 3.1.1 인데 (2014년 4월 기준) 왜 구버전을 사용하냐면 최신버전은 모바일 홈페이지 제작 쪽에 좀 더 특화되어 있기 때문입니다.
(라기 보단 2.3.2 버전 보다 사용이 좀 복잡해져서...랄까요;;;)

그냥 [Download Bootstrap]을 클릭해도 되고, 상단의 Costomize 항목을 통해서 여러 옵션을 수정해서 다운로드 해도 됩니다. 여기서는 기본값으로 그냥 받을 것이므로 2.3.2 메인페이지에서 다운로드 받습니다.

"bootstrap.zip" 파일이 다운로드 되면 적당한 곳에 압축을 풉니다. css, img, js 세 개의 폴더와 내부의 파일들이 생성되는데 이들을 FTP를 사용해 테마가 설치된 곳에 업로드 합니다.

부트스트랩 파일

관리자에서 외모 - Theme Editor 로 들어가서 확인해보면 몇 개의 디렉토리가 새로 생성된 것을 볼 수 있습니다.
주의할 점은 워드프레스 기본 편집기에서는 제대로 확인이 되지 않기 때문에 편집 플러그인 WP Editor 를 먼저 설치해야 합니다. 워드프레스로 홈페이지 제작을 하기 위해서 꼭 필요한 플러그인 입니다.

WP Editor
http://wordpress.org/plugins/wp-editor/

WP Editor가 설치되어 있다면 테마를 구성하고 있는 파일들과 디렉토리들을 볼 수 있고, 간단하게 나마 파일도 업로드 할 수 있습니다. 파일 업로드 기능은 테마의 루트 및 서브 디렉토리에 새로 파일을 올리는 정도의 기능만 지원합니다. 아쉽게도 덮어쓰기는 지원하지 않습니다.