워드프레스 테마 파일 중 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편 – header.php, footer.php 만들기 – 현재글
공부 목적 블로그