WP홈페이지 제작 - Bootstrap 적용

부트스트랩을 테마 디렉토리에 업로드를 했다고 그냥 적용 되는 것이 아니기 때문에 부트스트랩을 등록해 주는 과정이 필요합니다. 부트스트랩이 설치된 디렉토리 및 css 파일, js 파일 등을 테마의 함수 파일에 넣어야 합니다.

테마의 함수는 기본적으로 테마 루트 디렉토리에 있는 "functions.php" 에서 정의, 등록합니다.
이는 어디까지나 기본값이 그렇다는 것이고 테마마다 조금씩 달리할 수도 있는데 상용 테마의 경우 functions.php 를 일종의 다른 함수 파일을 불러오는 역할만 맡겨버리고 실제의 함수들은 용도별로 여러 파일로 나눠 프로그래밍하는 경우가 많습니다.

여기서는 직접 functions.php 가장 아래에 부트스트랩을 불러오는 코드를 넣겠습니다.

<소스내용>

 
/*---------------------------------------------------------------------
 * 커스터마이징
 *---------------------------------------------------------------------
 */

/* 
 * 부트스트랩 등록 & 커스텀 스타일 시트 등록
 */

function aca_styles() {
	wp_enqueue_style('bootstrap-stylesheet', get_stylesheet_directory_uri() . '/css/bootstrap.css');
	wp_enqueue_script('bootstrap-script', get_stylesheet_directory_uri() . '/js/bootstrap.js', array('jquery'));
	wp_enqueue_style('custom-stylesheet', get_stylesheet_directory_uri() . '/custom.css');
}
add_action('wp_enqueue_scripts', 'aca_styles');

 

위의 소스를 functions.php 에 넣게 되면 부트스트랩을 위한 스타일시트와 자바스크립트 그리고 사용자 정의 스타일시트를 테마에 적용한다는 뜻입니다.

탐색기에서 마우스 오른쪽 버튼을 클릭하여 <새로 만들기> - <텍스트 문서>를 선택합니다. 그리고 만들어진 파일의 이름을 "custom.css"로 변경하고 이를 FTP를 사용하거나 Theme Editor 를 사용하여 테마의 루트 디렉토리에 업로드합니다.

 

 

위의 과정을 통해 부트스트랩의 스타일시트가 aca 테마에 적용되었습니다.

 

이전과 별 차이가 없군요. 우선 적용이 제대로 되었는지 사용자 정의 스타일시트를 수정해 보겠습니다.
테마 에디터에서 custom.css 파일을 클릭하고, 편집창에 구글 폰트 라이브러리에서 나눔고딕 폰트를 불러오는 코드를 넣습니다.

<소스내용>

/* 나눔폰트 */
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

/* 나눔폰트적용 */
body {
	font-family: 'Nanum Gothic','Dotum';
}

 

나눔고딕 폰트가 적용된 것으로 추가한 코드가 제대로 동작하고 있는 것을 확인할 수 있습니다.