언더스코어스 테마에 부트스트랩3 적용하기

http://underscores.me/ 에서 언더스코어스 테마(워드프레스 스타터 테마)를 다운로드 합니다. 텍스트 입력 폼에 생성할 테마의 이름을 정해 입력을 하고 GENERATE 버튼을 클릭하면 됩니다.

언더스코어스 홈페이지

다운로드된 압축파일을 풉니다.

언더스코어스 테마 파일

http://getbootstrap.com/getting-started/#download 에서 부트스트랩 프레임워크를 다운로드 합니다.

Download Bootstrap

다운로드 된 파일의 압축을 풉니다. 압축이 풀어진 폴더를 클립보드에 복사(ctrl+c)한 후 언더스코어스 테마 폴더(직접 설정한 테마명)에 붙여넣고, 폴더명을 'bootstrap'으로 수정합니다(예: bootstrap-3.3.6-dist를 bootstrap으로 수정).

부트스트랩 압축 파일 풀기

언더스코어스 테마에 부트스트랩 폴더 붙여넣기

테마 파일 폴더에 있는 미리보기 이미지 'screenshot.png' 파일을 포토샵, 김프 등의 이미지 편집기를 사용하여 편집하고 저장합니다.

그래픽 프로그램에서 screenshot.png 파일 편집

screenshot.png 편집 완료

언더스코어스 테마 폴더에 있는 PHP 파일 중에서 functions.php 파일을 텍스트 에디터에서 엽니다.

functions.php 파일

functions.php 파일의 코드 가장 아래에 다음의 소스 코드를 붙여 넣습니다.

/**
 * Add Bootstrap3 style and script
 */
function bootstrap_styles() {
wp_enqueue_style('bootstrap-stylesheet', get_stylesheet_directory_uri() . '/bootstrap/css/bootstrap.css');
wp_enqueue_script('bootstrap-script', get_stylesheet_directory_uri() . '/bootstrap/js/bootstrap.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'bootstrap_styles');

부트스트랩 추가 소스 코드