WP홈페이지 제작 - Bootstrap 레이아웃 - 콘텐츠 & 사이드바

페이지 화면에 부트스트랩 레이아웃을 적용하는 것도 홈 화면에서 한 방법과 큰 차이가 없습니다. 단지 다른 점은 "사이드 바"가 있기 때문에 페이지와 사이드 바 두 개의 단으로 나뉘어진다는 것 뿐입니다. 두 개의 영역이 12개의 단에서 서로 어느만큼 차지하게 할 지는 개발자 마음이지만 여기서는 "span9"와 "span3"으로 나누겠습니다.

 

테마 편집기에서 "page.php"를 열고 아래와 같이 "span9"를 추가합니다.
<div id="primary" class="content-area span9">
[Update File]을 클릭해 저장합니다.

 

그리고 "sidebar.php"를 열고 아래와 같이 "span3"을 추가합니다.
<div id="secondary" class="widget-area span3" role="complementary">
[Update File]을 클릭해 저장합니다.

 

이제 홈페이지에서 메뉴 네비게이션의 샘플 페이지를 클릭해 적용된 모습을 확인해 봅니다.

 

 

댓글 남기기 아래쪽에 있는 "다음의 HTML 태그와 속성을 사용할 수 있습니다:"의 태그 속성이 가로로 사이드바까지 침범한 것을 고치기 위해 "custom.css"에 다음의 코드를 넣습니다.

⁄* 댓글 적용태크 줄바꿈 *⁄
code {
	white-space: normal;
}

 

 

 

포스트의 경우도 페이지와 같은 방법으로 레이아웃을 잡을 수 있습니다. 페이지와 다른 점은 단지 "single.php" 파일을 수정한다는 것 뿐입니다.

 

테마 편집기에서 "page.php"를 열고 아래와 같이 "span9"를 추가합니다.
<div id="primary" class="content-area span9">
[Update File]을 클릭해 저장합니다.

 

이제 홈 화면에서 포스트 06을 클릭해서 적용된 모습을 확인해 봅니다.