워드프레스 테마 만들기 | 기본 구조 만들기 > 레이아웃

일반적인 블로그 형태인 2단 레이아웃으로 만들겠습니다. 상단에 제목, 중단에 본문과 오른쪽 사이드바, 하단에 Copyright가 있는 모양입니다.

index.php 파일의 <body <?php body_class(); ?>> 밑에 다음의 코드를 추가합니다.

<div id="container">
  <div id="header">
    <h1>Site Title</h1>
  </div>
  <div id="main">
    <div id="content">
      <h2>Content</h2>
    </div>
    <div id="sidebar">
      <h2>Menu</h2>
    </div>
  </div>
  <div id="footer">
    <h3>Copyright</h3>
  </div>
</div>

style.css 파일에 다음의 코드를 추가합니다.

#container {width: 920px; margin: 0 auto; padding: 20px; border: 1px solid #bcbcbc}
#main:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#content {width: 600px; float: left;}
#sidebar {width: 300px; float: right;}

이제 사이트로 가면 다음과 같이 나옵니다.

Source Code Download : making-wordpress-theme-v1-chapter-2-2.zip

워드프레스 프리미엄 테마 사이트

  • Elegant Themes - 80여개의 테마를 한꺼번에 $69에 판매하는 경제적인 테마 사이트
  • Theme Forest - 3,500여개의 테마가 거래되는 세계 최대 워드프레스 테마 오픈 마켓

Book navigation