보통 사이트를 만들면 헤더와 푸터는 어떤 페이지를 가든 비슷한 경우가 많다. 그 말은 헤더와 푸터는 사이트 전반적으로 사용되는 레이아웃 요소라는 것이다. 이 글에서는 헤더와 푸터를 만들고 어떻게 적용하는지 작성한다.
헤더와 푸터에는 어떤 정보들을 가져오는 것이 좋을까?
일단은 관리자 페이지에서 설정한 사이트 정보들이 있을 것이고, 당연히 사이트마다 다르겠지만, 공통적으로 가져오는 데이터들이 있을 것이다.
헤더에 포함하면 좋은 정보
사이트 탐색 및 사용자 편의성을 위한 요소 중심
- 로고 및 사이트 제목 – the_custom_logo(), bloginfo(‘name’)
- 활용 메인 내비게이션 메뉴 – wp_nav_menu()를 활용해 주요 페이지 링크 제공
- 검색창 – get_search_form()을 활용해 사이트 검색 기능 추가
- 회원 관련 정보 – 로그인/로그아웃 버튼, 마이페이지 링크 등
- 알림 및 배너 – 중요 공지, 프로모션 배너 추가
- 언어 선택 옵션 – 다국어 지원을 위한 WPML 또는 Polylang 위젯
푸터에 포함하면 좋은 정보
- 저작권 정보 – © 연도를 포함한 사이트 저작권 문구
- 푸터 메뉴 – wp_nav_menu()를 활용해 이용약관, 개인정보처리방침, 고객센터 등 연결
- 소셜 미디어 링크 – Facebook, Twitter, Instagram 등의 아이콘 및 링크
- 연락처 정보 – 이메일, 전화번호, 회사 주소 등
- 푸터 위젯 영역 – 최근 글, 인기 글, 뉴스레터 구독 폼 등 추가 가능
헤더, 푸터 파일 만들기
헤더와 푸터를 만드는 것은 테마 파일에 단순히 header.php, footer.php파일을 만들면 되는 것이다.
헤더 예시 코드
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="site-header">
<div class="container">
<div class="logo">
<a href="<?php echo home_url(); ?>">
<?php
if (has_custom_logo()) {
the_custom_logo(); // 사용자 지정 로고 표시
} else {
bloginfo('name'); // 로고가 없을 경우 사이트 제목 표시
}
?>
</a>
</div>
<nav class="main-navigation">
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'menu_class' => 'nav-menu'
));
?>
</nav>
</div>
</header>푸터 예시 코드
<footer class="site-footer">
<div class="container">
<p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.</p>
<nav class="footer-navigation">
<?php
wp_nav_menu(array(
'theme_location' => 'footer',
'menu_class' => 'footer-menu'
));
?>
</nav>
<div class="social-links">
<a href="https://facebook.com" target="_blank">Facebook</a>
<a href="https://twitter.com" target="_blank">Twitter</a>
</div>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>헤더, 푸터 파일 적용하기
만든 헤더와 푸터를 테마의 각 페이지(index.php, single.php, page.php 등)에서 아래와 같이 불러올 수 있다.
<?php get_header(); ?>
<main>
<h1>여기에 콘텐츠 작성</h1>
</main>
<?php get_footer(); ?>워드프레스에서 제공하는 정보들 가져오기 및 유용한 링크
사이트 정보 관련
| 설명 | 함수명 | 예시 |
|---|---|---|
| 사이트 제목 가져오기 | bloginfo(‘name’) | <?php bloginfo(‘name’); ?> |
| 사이트 설명 가져오기 | bloginfo(‘description’) | <?php bloginfo(‘description’); ?> |
| 사이트 기본 URL 가져오기 | bloginfo(‘url’) | <?php bloginfo(‘url’); ?> |
| 홈 URL 가져오기 | get_home_url() | <?php bloginfo(‘description’); ?> |
| 현재 테마의 디렉토리 URL | get_template_directory_uri() | <?php echo get_template_directory_uri(); ?> |
| 현재 테마의 스타일시트 디렉토리 | get_stylesheet_directory_uri() | <?php get_stylesheet_directory_uri(); ?> |
테마 관련
| 설명 | 함수명 | 예시 |
|---|---|---|
| 테마 및 플러그인이 추가한 메타 정보, 스타일, 스크립트 로드 | wp_head() | <head> 내부에 삽입 |
| 푸터에서 추가적인 스크립트 및 기능 로드 | wp_footer() | </body> 바로 위에 삽입 |
| 현재 페이지가 메인 페이지인지 확인 | is_front_page() | if(is_front_page()) {…} |
| 블로그 메인 페이지 여부 확인 | is_home() | if(is_home()) {…} |
| 현재 포스트 또는 페이지의 ID 가져오기 | get_the_ID() | <?php echo get_the_ID(); ?> |
내비게이션 및 메뉴
| 설명 | 함수명 | 예시 |
|---|---|---|
| 등록된 메뉴 표시 | wp_nav_menu() | <?php wp_nav_menu(array(‘theme_location’ => ‘primary’)); ?> |
| 특정 메뉴가 등록되었는지 확인 | has_nav_menu(‘primary’) | if(has_nav_menu(‘primary’)) {…} |
사용자 로그인 관련
| 설명 | 함수명 | 예시 |
|---|---|---|
| 현재 사용자가 로그인 했는지 확인 | is_user_logged_in() | if(is_user_logged_in()) {…} |
| 로그인 페이지 URL 가져오기 | wp_login_url() | <?php echo wp_login_url(); ?> |
| 로그아웃 URL 가져오기 | wp_logout_url() | <?php echo wp_logout_url(); ?> |
| 회원가입 URL 가져오기 | wp_register_url() | <?php echo wp_registration_url(); ?> |
기타 유용한 함수
| 설명 | 함수명 | 예시 |
|---|---|---|
| 현재 연도 출력 | date(‘Y’) | © <?php echo date(‘Y’); ?> |
| 기본 검색 폼 표시 | get_search_form() | <?php get_search_form(); ?> |
| 푸터 위젯 영역 표시 | dynamic_sidebar(‘footer-1’) | <?php dynamic_sidebar(‘footer-1’); ?> |
워드프레스 테마 개발 함수 목록: https://developer.wordpress.org/reference/functions/