워드프레스 테마 만들기 | 기본 구조 만들기 > index.php 기본 구성

HTML 문서의 기본 구성은 다음과 같습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body>
  </body>
</html>

이를 기초로 index.php를 구성해보겠습니다.

lang

html 요소의 lang 속성값이 워드프레스에서 설정한 언어가 되도록 다음과 같이 바꿉니다.

<html <?php language_attributes(); ?>>

charset

charset 속성값이 워드프레스에서 설정한 값이 되도록 다음과 같이 바꿉니다.

<meta charset="<?php bloginfo('charset'); ?>">

title

현재 보여주는 페이지에 맞는 제목을 나타내기 위해 다음과 같이 바꿉니다.

<title><?php bloginfo('name'); ?> <?php wp_title('|'); ?></title>

bloginfo('name')은 사이트 제목을 불러옵니다. wp_title('|')은 첫페이지에서는 아무것도 나타내지 않고, 포스트라면 포스트 제목, 카테고리 글 목록이라면 카테고리 이름을 보여주는 등 상황에 맞는 제목을 출력합니다. 그리고 사이트 제목과의 구분은 |로 합니다. wp_title에 대한 자세한 정보는 다음의 링크에 있습니다.

link

style.css와 연결하기 위해 다음의 코드를 추가합니다.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

body

워드프레스는 웹페이지의 성격과 상황에 맞게 class 값들을 생성합니다. 이를 출력하기 위해 다음과 같이 바꿉니다.

<body <?php body_class(); ?>>

예를 들어 관리자로 로그인한 후 사이트의 첫화면으로 가면 다음과 같은 class 값들이 생성됩니다.

<body class="home blog logged-in admin-bar customize-support">

이를 이용하여 상황에 따라 모양이 다르게 되도록 디자인할 수 있습니다.

wp_head, wp_footer

wp_head()와 wp_footer()는 워드프레스의 특수한 기능을 사용하기 위해 필요합니다. 예를 들어 위 코드를 넣어야 워드프레스 사이트에 로그인했을 때 상단에 툴바가 나옵니다.

wp_head()는 </head> 위에, wp_footer()는 </body> 위에 넣습니다.

index.php

위의 모든 내용을 반영한 index.php의 내용은 다음과 같습니다.

<!doctype html>
<html <?php language_attributes(); ?>>
  <head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <title><?php bloginfo('name'); ?> <?php wp_title('|'); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
  <?php wp_footer(); ?>
  </body>
</html>

Created on 2013-12-29 16:20 | Updated on 2015-07-17 15:15