초보자도 쉽게 따라하는 워드프레스 헤더 제작 가이드 - Zucchini's 기술블로그Zucchini's 기술블로그

헤더란 무엇인가? 워드프레스 테마의 첫 걸음

헤더는 웹사이트의 가장 상단에 위치하여 로고, 네비게이션 메뉴, 검색 창 등 중요한 요소를 포함하는 공간입니다. 이 섹션에서는 헤더의 개념과 워드프레스 테마에서의 역할을 소개합니다. 또한, header.php 파일의 위치와 구조를 설명합니다.

아래의 이미지를 보시면, 테마 폴더 하위에 header.php가 포함되어있는 것을 볼 수 있습니다. 테마의 헤더를 만들기 위해서는 테마 폴더를 생성한 후, 아래의 이미지와 같이 header.php 파일을 만들어야 합니다.

파일을 다 만들었다면, 이 header.php 파일이 어떤 정보를 가지고 있는지를 알아야 합니다.

header.php 파일은 head와 header 라는 총 2개의 영역에 대한 정보가 담겨있습니다. 이 영역들을 코드로 표현하자면, 아래와 같이 head 태그와 header 태그의 영역을 의미합니다.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head> 첫번째 영역 </head>
<body>
  <header> 두번째 영역 </header>

워드프레스 헤더의 첫 번째 구성 요소: <head>

이 영역에는 블로그의 이름, 설명, 썸네일 등이 표시됩니다. 이 정보는 검색엔진 최적화에 중요한 역할을 합니다. 그렇기 때문에 꼭 공들여서 작성을 하셔야 합니다!

하지만, 워드프레스에서 기본적으로 제공하는 함수를 사용하여 이러한 정보드를 입력할 수 있습니다. 매우 편리하죠? 아래처럼 워드프레스에서 제공해주는 함수만 사용한다면, 작성한 글에 맞게 제목과 설명을 알아서 넣어줍니다.

<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    <?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>
  </title>
  <?php wp_head(); ?>
</head>

워드프레스 헤더의 두 번째 구성 요소: <header>

이 영역에서는 로고, 네비게이션, 메뉴 버튼 등의 요소가 포함됩니다. 이번 포스팅에서는 가장 기본적인 요소인 로고/네비게이션/메뉴버튼을 넣는 방법을 설명하겠습니다.

우선 HTML요소로 세 가지 요소를 넣는 방법은 다음과 같이 매우 쉽습니다!

그대로 따라서 작성해주시면 완성입니다!

<header>
  <!-- 로고 -->
  <img src="/logo.png" >

  <!-- 네비게이션 -->
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

  <!-- 메뉴버튼 -->
  <button>
    <img src="/menu.png" >
  </button>
</header>

워드프레스 헤더 파일 사용하기

이렇게 완성된 헤더를 실제 페이지에서 사용하는 방법을 알아보겠습니다.

워드프레스에서는 홈페이지를 나타내는 home.php 파일과 글의 내용을 나타내는 single.php 파일이 있습니다. 물론 header.php와 마찬가지로 직접 생성을 해 주셔야 합니다.

생성만 해 주신다면, 워드프레스가 알아서 홈페이지와 글 상세 페이지 주소에 맞게 해당 파일을 보여주도록 설정이 되어있으므로 따로 할 일은 없습니다.

theme/home.php

theme/single.php

두 파일을 생성했다면, 위에서 만든 헤더를 [홈페이지]와 [글 상세 페이지] 상단에 표시를 해 주어야 합니다. 이렇게 특정 페이지에 헤더를 불러오기 쉽도록 워드프레스에서는 get_header() 함수를 제공하고 있습니다.

이 함수를 통해서 [홈페이지]와 [글 상세 페이지]에 어떻게 헤더를 나타낼 수 있는지 알아보겠습니다.

<?php get_header(); ?>

이렇게, 헤더를 나타내고 싶은 파일의 맨 위에 <?php get_header(); ?> 를 추가해 주는 것으로 header.php 내용이 들어오게 됩니다.

우리가 추가하고 싶은 페이지는 home.php, single.php 파일이므로 그 파일의 상단에 각각 <?php get_header(); ?> 를 추가해 주면 됩니다.

// home.php
<?php get_header(); ?>

// single.php
<?php get_header(); ?>

CSS를 활용하여 나만의 헤더 만들기

헤더를 꾸미기 위해서는 먼저 style.css 파일을 만들어야 합니다. 여기서 style.css 파일이란 위에서 만든 파일들과 마찬가지로 워드프레스 테마의 기본 파일중 하나 입니다.

위에서 한 작업과 동일하게 프로젝트 폴더에 style.css 파일을 만들어 줍니다.

theme/style.css

style.css 파일을 생성했다면, 헤더 파일과 마찬가지로 이 파일을 사용하기 위해 불러오는 과정이 필요합니다. style.css 파일도 워드프레스 테마의 기본 파일이기 때문에 당연히 불러오는 함수를 제공하고 있습니다.

하지만, 이 파일은 조금 전 헤더와는 다르게 각각의 페이지에 따로 불러오는 것이 아니라, 헤더에 직접 넣어서 헤더가 보여지는 모든 페이지에 사용할 수 있도록 해야합니다.

그 이유는 이 style.css 파일에는 모든 페이지의 스타일 코드가 작성될 예정이기 때문입니다.

header.php 파일을 열고, 아래 코드 한 줄을 추가해 줍니다.

<link rel=”stylesheet” href=”<?php echo get_stylesheet_uri(); ?>”>

<head>
  ...
  <!-- 스타일 파일 추가 style.css -->
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
</head>

헤더의 구성 요소에 CSS 적용하기

헤더의 각 HTML 요소마다 class 속성에 적절한 이름을 넣어줍니다.

<header class="header">
  <img class="header__image" src="/logo.png" >
  <ul class="header__navigation">
    <li class="header__navigation__item">
      <a class="header__navigation__item__link" href="#">
        Home
      </a>
    </li>
    <li class="header__navigation__item">
      <a class="header__navigation__item__link" href="#">
        About
      </a>
    </li>
    <li class="header__navigation__item">
      <a class="header__navigation__item__link" href="#">
        Contact
      </a>
    </li>
  </ul>
  <button class="header__menu">
    <img class="header__menu__icon" src="/menu.png" >
  </button>
</header>

이제 class 이름에 맞춰서 style.css 파일에 꾸미기 위한 내용을 작성합니다. 저는 가로정렬과 세로정렬 및 폰트사이즈 정도만 수정했습니다.

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 40px;
  height: 80px;
}
.header__image {
}
.header__navigation {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.header__navigation__item {
  list-style: none;
  margin-right: 60px;
}
.header__navigation__item:last-child {
  margin-right: 0;
}
.header__navigation__item__link {
  text-decoration: none;
  color: black;
  font-size: 20px;
}
.header__menu {
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.header__menu__icon {
}

뭔가 깔끔하고 보기 좋은 헤더가 완성되었습니다!

최종 코드 정리: 전체 헤더 코드 한 눈에 보기

theme/header.php

<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    <?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>
  </title>
  <?php wp_head(); ?>
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
</head>
<body>
  <header class="header">
    <img class="header__image" src="/logo.png" >
    <ul class="header__navigation">
      <li class="header__navigation__item">
        <a class="header__navigation__item__link" href="#">
          Home
        </a>
      </li>
      <li class="header__navigation__item">
        <a class="header__navigation__item__link" href="#">
          About
        </a>
      </li>
      <li class="header__navigation__item">
        <a class="header__navigation__item__link" href="#">
          Contact
        </a>
      </li>
    </ul>
    <button class="header__menu">
      <img class="header__menu__icon" src="/menu.png" >
    </button>
  </header>

theme/home.php

<?php get_header(); ?>

theme/single.php

<?php get_header(); ?>

theme/style.css

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 40px;
  height: 80px;
}
.header__image {
}
.header__navigation {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.header__navigation__item {
  list-style: none;
  margin-right: 60px;
}
.header__navigation__item:last-child {
  margin-right: 0;
}
.header__navigation__item__link {
  text-decoration: none;
  color: black;
  font-size: 20px;
}
.header__menu {
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.header__menu__icon {
}

Post Views: 66