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

일반적인 블로그 형태인 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
Category: 

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

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

Comments

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

 

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

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

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

잘 보고있습니다

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

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

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

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

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

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

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

워드프레스 자체에서 사이드바의 위치를 바꾸는 기능은 없나요? 코딩으로 해야하나요?

워드프레스 자체에는 없지만, 테마에 그런 기능을 넣을 수는 있습니다.

유료 테마의 경우 레이아웃을 선택할 수 있는 기능을 포함한 것이 많고, 사이드바를 원하는 만큼 생성하여 포스트별로 다른 사이드바를 출력시키는 테마도 있습니다.

모바일 페이지는 어떻게 구성할수 있나요?

보통 반응형웹디자인을 합니다.

간단한 예제는 http://www.cmsfactory.net/node/10362에 있습니다.

Bootstrap를 이용하기도 합니다. http://www.cmsfactory.net/node/10700

안녕하세요. 좋은 내용 잘 보고 있습니다.

궁금한게 생겨 여쭤봅니다.

#main:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

이 pseudo 구문은 왜 필요한건가요?

빼서 적용해보니 뭔가 레이아웃이 틀어지긴하던데 어떤 기능을 하는지 궁금하네요.

 

#main이 #container와 #sidebar를 제대로 감싸도록 만드는 역할을 합니다.

CSS에 다음을 추가하시고...

#main { border: 1px solid #cccccc; background-color: #cccccc; }

pseudo 구문이 있을 때와 없을 때를 비교해보세요.

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