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

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 위에 '>>' 이게 뜨는데 이유가 뭘까요?

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

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

잘 보고있습니다

근데 궁금한것이 이렇게 코드로만 해야지만이 워드프레스 테마를 만들수있는건가요?

저는 드림위버 사용할줄 아는데 드림위버로는 안되는건가요 ...? 현재 드림위버로 html 구성해놓고

현재는 제로보드로 사이트 운용중인 곳이 있는데 이 테마를 그대로 워드프레스로 옮겨다가 사용하고싶은데

그렇게는 불가능한가요? 아예 그대로 파일을 옮겨와 구동시키는건 당연히 불가능한건 알지만

그런 뜻이 아니라레이아웃이나 디자인같은것들을 그대로 가져와서 워드프레스에

적용을 시키고싶다는 뜻입니다.

드림위버로 해도 상관없습니다. 디자인 가져와서 만들어도 됩니다.

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