워드프레스 테마 만들기: html5, header.php, sidebar.php
기본 구조
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>