여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. 워드프레스 테마 제작 - 02편 - header.php, footer.php 만들기
워드프레스 테마 제작 – 02편 – header.php, footer.php 만들기
6개월전 작성
5개월전 수정

워드프레스 테마 파일 중 header.php footer.php 파일을 만들어보자.워드프레스 header.php footer.php
 워드프레스 header.php footer.php

 

header.php 파일 만들기

헤더 파일에에는 <html> 시작부터 본문 내용 나오기 전까지 입력 한다.

여기서 </main></body></html>는 사용하지 않는다.

header.php 예시
<!doctype html>

<html <?php language_attributes(); ?>>
	<head>
		<meta charset="<?php bloginfo( 'charset' ); ?>" />

		<title><?php bloginfo( 'name' ); ?></title>
		
		<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
		<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
		<?php wp_head(); ?>
	</head>

	<body>
		<div class="container">
			<header>
				여기는 header 입니다.
			</header>
			<main>
사용된 코드 설명
<?php language_attributes(); ?>
:
html lang 속성을 지정하는 php 코드. 웹접근성 준수. 요소의 언어를 정의한다. 또한 시각 장애인이 이 페이지를 볼 때 스크린 리더와 같은 보조수단을 이용해 사이트를 이용할 때 html lang 속성을 사용한다.
<meta charset=”” />
:
html 파일의 인코딩을 알려주는 태그. 인코딩을 지정하지 않으면 브라우져 설정에따라 자동으로 인코딩을 해주는데 정확하지 않은 경우도 많다. 한글이 깨지지 않고 잘 보이기를 원한다면 meta 태그에서 charset 설정을 꼭 해주는게 좋다.
<?php bloginfo( ‘charset’ ); ?>
:
워드프레스에서 설정한 charset 속성을 불러오는 코드.
<title></title>
:
웹 브라우져에 표기될 타이틀을 설정하는 태그.
bloginfo( ‘pingback_url’ );
:
워드프레스에서 설정한 pingback url 불러오는 코드.
is_singular()
:
모든 글 유형에 대해 체크할 때 사용하는 함수. 싱글 포스트만 체크하고 싶을 땐 is_single or is_singular(post) 사용한다.
get_option(‘thread_comments’)
:
옵션이름 ‘thread_comments’ 기반으로 옵션값 구하는 함수.
wp_enqueue_script( ‘comment-reply’ );
:
comment-reply 스크립트 불러오는 함수.
<?php bloginfo( ‘name’ ); ?>
:
워드프레스에서 설정한 블로그 제목 불러오는 태그.
<?php wp_head(); ?>
:
head 태그 안에 스크립트,스타일시트,데이터 출력. 워드프레스로 만들어진 파일에 꼭 넣어야한다.
<div class=”container”>
:
헤더, 메인, 푸터를 다 div.container로 묶는 태그.

footer.php 파일 만들기

푸터 파일에는 </main>부터 </html>까지 입력한다.

여기서 <html>,<head></head><body><header><main> 태그는 사용하지 않는다.

footer.php 예시
			</main>

			<footer>
				여기는 푸터 입니다.
				<?php wp_footer(); ?>
			</footer>
		</div>
	</body>
</html>
사용된 코드 설명
<?php wp_footer(); ?>
:
스크립트,스타일시트,데이터 출력. wp_header와 차이점은 body 태그를 닫기 바로 전에 넣어야한다. 워드프레스로 만들어진 파일에 꼭 넣어야한다.

 

index.php에 적용

메인 템플릿에 header.php와 footer.php를 적용하는 방법을 알아보자.

 

기존 index.php
<html>
	<head>
		<meta charset="utf-8">
		<title>Test Theme</title>
	</head>

	<body>
		Test Theme 만들기
	</body>
</html>

이걸 수정해서 header.php, footer.php를 적용 시킨다.

수정된 index.php
<?php get_header(); ?>
	Test Theme 만들기
<?php get_footer(); ?>

이런식으로 header와 footer를 불러와서 간단하게 변경할 수 있다.

사용된 코드 설명
<?php get_header(); ?>
:
헤더 템플릿을 불러오는 코드.
<?php get_footer(); ?>
:
푸터 템플릿을 불러오는 코드.

 

적용된 화면

FTP 이용해서 서버에 index.php, header.php, footer.php 업로드 후 확인하자.

워드프레스 테마 만들기 - 2편

문제 없이 출력 잘 되는것 확인된다.

참고

 

관련 포스트
Mingg`s Diary
밍구
공부 목적 블로그