워드프레스 테마 만들기: html5, header.php, sidebar.php

in #kr7 years ago

기본 구조

W3의 html5 가이드의 설명을 참고하여 기본적인 구조를 만들었습니다.

초기 index.php의 형태는 아래와 같습니다.

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  (html comment removed:  페이지 속성 )
  </head>
  <body>
    <nav>네비게이션</nav>
    <main>
      <article>본문</article>
      <footer>바닥글</footer>
    </main>
    <aside>사이드 메뉴</aside>
  </body>
</html>

header.php

여러 템플릿에서 공통으로 사용하거나 분류가 필요한 부분을 따로 작성해서 불러올 수 있습니다. 아래와 같이 header.php를 만들어 내용을 채워넣습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>타이틀</title>
  <?php wp_head() ?>
</head>
<body>
  <nav>네비게이션</nav>

워드프레스 내장함수인 wp_head()는 플러그인 등이 <head>태그 안에 어떤 요소를 추가하는 경우, 그 요소가 들어갈 위치를 알려주는 역할을 합니다.

index.php의 내용은 이렇게 바뀝니다.

<?php get_header() ?>
<main>
  <article>본문</article>
  <footer>바닥글</footer>
</main>
<aside>사이드 메뉴</aside>
</body>
</html>

워드프레스 내장함수인 get_header()header.php를 불러오는 역할을 하게 됩니다.

footer.php

사이드바가 바닥글 위에 위치하는 테마도 많습니다. 저는 본문과 바닥글이 <main> 태그에 같이 묶여야 할 필요가 있어서 사이드바를 아래로 정했습니다.

<footer>바닥글</footer>

footer.php를 새로 만들어 위의 내용을 주가하였습니다.

index.php

<?php get_header() ?>
<main>
  <article>본문</article>
  <?php get_footer() ?>
</main>
<aside>사이드 메뉴</aside>
</body>
</html>

워드프레스 내장함수인 get_footer()footer.php를 불러오는 역할을 하게 됩니다.

sideber.php

사이드 메뉴 템플릿 조각입니다.

<aside>사이드 메뉴</aside>
<?php wp_footer() ?>
</body>
</html>

wp_footer()wp_head()와 마찬가지로 플러그인 등이 모든 컨텐츠를 불러온 이후에 불러와야 하는 요소가 있는 경우에 추가할 위치를 알려주는 역할을 합니다.

index.php

<?php get_header() ?>
<main>
  <article>본문</article>
  <?php get_footer() ?>
</main>
<?php get_sidebar() ?>

최종 결과

index.php

<?php get_header() ?>
<main>
  <article>본문</article>
  <?php get_footer() ?>
</main>
<?php get_sidebar() ?>

header.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>타이틀</title>
  <?php wp_head() ?>
</head>
<body>
  <nav>네비게이션</nav>

footer.php

<footer>바닥글</footer>

sidebar.php

<aside>사이드 메뉴</aside>
<?php wp_footer() ?>
</body>
</html>