트위터 부트스트랩(Twitter Bootstrap)은 웹사이트를 만들 때 흔히 사용하는 대표적인 UI 프레임워크 중 하나입니다. 간단한 몇몇 관례만 익히면 그리드(grid) 기반의 레이아웃에서부터 메뉴나 버튼 같은 UI 컴포넌트들까지 간단하게 다룰 수 있게 해주기 때문에 별다른 웹 기술이나 UI에 대한 전문 지식이 없더라도 손쉽게 제법 근사한 UI를 구성할 수 있습니다.
그래서인지 워드프레스 테마들 중에도 이 트위터 부트스트랩을 기반으로 한 테마들이 많이 있습니다. 워드프레스 테마 디렉터리에서 ‘bootstrap’이라는 단어로 검색해 보면 얼마나 많은 테마들이 부트스트랩에 기반하는지 알 수 있습니다. 여기다가 플러그인 디렉터리에 등록되어 있지 않은 커스텀 테마나 프리미엄 테마들까지 더하면 아마도 훨씬 더 많은 테마들이 이 부트스트랩 UI 프레임워크에 기반하고 있다 할 것입니다.
그림. 플러그인 디렉터리 bootstrap 테마 검색
워드프레스 테마에 부트스트랩(Bootstrap)을 적용하는 방법은 간단합니다. 부트스트랩이 적용된 테마 중 하나를 골라 설치하면 그만입니다. 나머지는 테마가 다 알아서 해 줄 것이기에 사용자로서 더 할 일은 없습니다. 이걸로 끝입니다.
기존 테마에 부트스트랩 적용하기
그런데 만약 지금 내가 사용하는 테마가 있는데(물론 부트스트랩 기반은 아닙니다), 이 테마는 그대로 유지하면서 부트스트랩의 몇몇 UI만 내 테마에 적용하고 싶다면 어떻게 할까요? 혹은 내 테마와 부트스트랩을 병행하여 사용하고 싶다면요?
이럴 땐 내 테마에 부트스트랩을 적용하면 됩니다. 물론 테마 자체에서 제공하는 스타일과 부트스트랩에서 제공하는 스타일이 상호 충돌을 일으켜 부트스트랩 UI를 100% 활용할 수 없는 경우도 있겠지만, 약간의 스타일 조정 작업만 거치면 대체로 병용 가능한 경우가 많습니다.
그러려면 우선 내 사이트에 트위터 부트스트랩을 설치해야 합니다. 워드프레스에 트위터 부트스트랩을 설치하는 데는 여러 방법들이 있습니다. 물론 트위터 부트스트랩 역시 CSS와 자바스크립트 파일로 구성되어 있기 때문에 통상적인 CSS/자바스크립트 추가 방식을 따르면 됩니다. 즉 header.php 파일을 직접 수정하여 부트스트랩 스크립트를 추가해도 되고(물론 권장하는 방법은 아닙니다), 테마의 functions.php 파일에서 wp_enqueue_style 함수를 호출하는 방식으로도 처리할 수 있으며, 워드프레스 테마에 트위터 부트스트랩을 추가해주는 WordPress Twitter Bootstrap CSS 같은 플러그인을 사용해도 됩니다.
여기서는 WP Enqueue라는 플러그인을 먼저 설치한 다음, 이 플러그인의 설정을 통해 부트스트랩을 설치하는 다소 까다로운 방법을 사용해 보기로 하겠습니다. WP Enqueue는 CSS나 자바스크립트 파일들을 워드프레스에 쉽게 추가할 수 있도록 해주는 플러그인입니다. 이 방식을 쓰면 굳이 functions.php 파일을 건드리지 않고도 UI를 확장할 수 있는 잇점과 함께 부트스트랩의 버전이 업데이트될 경우에도 그 업데이트된 내용을 테마에 쉽게 반영할 수 있다는 장점이 있습니다.
그림. WP Enqueue 플러그인
WP Enqueue 플러그인을 설치하면 워드프레스 관리자의 “설정” 메뉴 아래에 “WP Enqueue”라는 하위 메뉴가 생기는데, 이 곳에서 트위터 부트스트랩 파일들을 등록해 주면 됩니다.
등록에 앞서 우선 트위터 부트스트랩을 다운로드 받아 내 테마에 설치해 보겠습니다. WP Enqueue 플러그인은 테마 디렉터리 내에 있는 CSS 파일과 자바스크립트 파일들만 불러 올 수 있기 때문에 먼저 부트스트랩 파일을 다운로드하여 내 테마 디렉터리 내에 설치하는 작업이 선행되어야 합니다.
부트스트랩 파일은 트위터 부트스트랩 사이트로 가서 다운로드(Download) 버튼을 눌러 다운로드 받으면 됩니다. 부트스트랩은 3가지 유형의 다운로드를 제공하는데 여기서는 맨 좌측에 있는 빌드된 부트스트랩 버전을 다운로드합니다. 참고로 이 글을 쓰는 시점에서 부트스트랩 최신 버전은 v3.3.7 입니다.
그림. 부트스트랩 다운로드
다운로드가 완료되면, 다운로드 받은 부트스트랩 파일의 압축을 풀어 디렉터리 채로 워드프레스 테마의 루트 디렉터리 아래에 복사해 넣습니다. 디렉터리명은 간단하게 ‘bootstrap’으로 변경하겠습니다.
이제 다시 “설정 > WP Enqueue” 메뉴로 돌아가서 다음 그림과 같이 방금 설치한 부트스트랩 파일의 위치를 플러그인에 등록해 주면 됩니다. 트위터 부트스트랩은 CSS와 자바스크립트 그리고 폰트(font) 파일로 구성되는데, 여기서는 간단하게 CSS만 사용할 것이기에 “Add style”로 CSS 파일만 추가했습니다. 만약 자바스크립트도 사용할 거면 같은 방식으로 “Add script”를 통해 자바스크립트 파일도 추가하면 됩니다. 또한 여기서는 스타일의 추가 위치를 ‘head’로 두어 테마 속 모든 곳에서 부트스트랩을 사용할 수 있도록 했지만, 만약 필요하다면 home이나 post 등 특정 위치에서만 사용하게끔 할 수도 있습니다.
그림. WP Enqueue 설정
부트스트랩 사용하기
여기까지 테마에 부트스트랩을 적용하는 작업이 끝났습니다. 사실 테마에 부트스트랩을 적용하는 일은 아주 간단한 일이지만 여기서는 WP Enqueue 플러그인 사용법도 익힐 겸 부러 조금 복잡하게 돌아온 면이 있습니다. 어쨌든, 이제 테마 속 어디에서건 트위터 부트스트랩의 기능을 사용할 수 있게 되었습니다.
부트스트랩을 설치했다면, 테마 속에서 부트스트랩을 사용하는 것은 간단합니다. 부트스트랩에서 제공하는 태그를 그대로 테마 속 페이지나 포스트 편집기에 붙여 넣고 필요한 콘텐츠를 추가해 주면 그만입니다. 예를 들어 페이지에 부트스트랩의 Alert 창을 추가하려면 다음과 같이 페이지 편집기에서 부트스트랩 HTML 코드를 추가하는 식입니다. (이 때는 편집기의 편집 모드를 ‘텍스트’로 맞춰 놓고 작업하면 좀 더 편리합니다)
그림. 부트스트랩 Alert 추가하기
미리보기 하면 다음과 같이 부트스트랩이 테마에 적용된 것을 확인할 수 있을 것입니다.
그림. 부트스트랩 Alert이 적용된 페이지
여기서는 간단하게 부트스트랩의 Alert 컴포넌트만 예로 들었지만 나머지 다른 부트스트랩 UI들도 같은 방식으로 테마 내에서 적용가능합니다.
그 밖의 방법들
지금까지는 워드프레스 테마에 트위터 부트스트랩을 적용하는 기본적인 방법만을 소개했지만 그 밖에도 테마 내에서 부트스트랩을 사용할 수 있는 다양한 도구와 방법들이 있습니다. 몇 가지만 추가로 간략하게 소개합니다.
Bootstrap 숏코드 : 앞서는 페이지나 포스트 편집기 속에서 직접 부트스트랩의 HTML 코드를 추가하는 방법을 사용했지만, 숏코드(shortcodes) 방식을 사용하여 좀 더 편리하게 UI를 추가할 수도 있습니다.
Bootstrap 기반 페이지 빌더 : 페이지 빌더들 중에는 부트스트랩을 기반으로 한 빌더들도 있기 때문에 빌더 방식을 선호하시는 분들은 검토하면 좋을 듯 싶습니다.
Bootstrap 파일을 CDN으로부터 불러오기 : 이 글에서는 부트스트랩 파일을 내 테마 디렉터리 아래에 두고 불러오는 방식을 썼지만 CDN에서 직접 불러오는 방식으로 사용할 수도 있습니다.
0 thoughts on “워드프레스 테마에 Bootstrap 적용하기”