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

Category: 

일반적인 블로그 형태인 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여개의 테마가 거래되는 세계 최대 워드프레스 테마 오픈 마켓

Comments

잘봤습니다! 근데 질문이 있는데

 

위에대로 따라하였는데 결과창처럼 안나오고 site title 위에 '>>' 이게 뜨는데 이유가 뭘까요?

아마 여는 태그와 닫는 태그의 쌍이 맞지 않은 거 같습니다.

본문에 첨부한 소스코드 다운 받아서 비교해보세요.

Add new comment

(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.

Guest

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Book navigation

E-Books

Find us on Facebook