워드프레스 테마 만들기 | 기본 구조 만들기

워드프레스 테마를 만들 때 필수 파일은 style.css와 index.php입니다. 이 두 파일이 없으면 테마가 제대로 작동하지 않습니다.

functions.php는 필수 파일은 아니지만, 결국엔 사용할 수 밖에 없습니다.

index.php 기본 구조 만들기

index.php에 다음의 코드를 넣습니다. HTML 문서를 만들기 위한 가장 기본적인 요소들입니다.

<!doctype html>
<html <?php language_attributes(); ?>>
  <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
    <?php wp_footer(); ?>
  </body>
</html>

php 코드는 HTML 코드로 변형되어 출력됩니다.

<?php language_attributes(); ?>은 HTML 문서의 언어입니다. 워드프레스 언어를 한국어로 설정했다면 다음처럼 출력됩니다.

<html lang="ko-KR">

<?php bloginfo( 'charset' ); ?>은 문자 인코딩 방식입니다. 특별한 경우가 아니라면 utf-8이 출력됩니다.

<meta charset="UTF-8">

<?php body_class(); ?>에는 상황에 맞는 클래스 값들입니다. 로그인하지 않은 상태에서의 첫페이지라면

<body class="home blog">

를 출력하고, 로그인한 상태에서의 첫페이지라면

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

을 출력합니다.

웹브라우저에서 소스 보기를 하면 입력하지 않은 코드들이 많이 보이는데, 그 코드들은 <?php wp_head(); ?>와 <?php wp_footer(); ?>가 만듭니다.

<?php wp_head(); ?><?php wp_footer(); ?>가 있어야 워드프레스나 플러그인이 제대로 작동합니다. 생략하면 안됩니다.

functions.php 기본 구조

functions.php 기본 구조는 다음과 같습니다.

<?php
// Setup
  function cmsfactory_setup() {
    // A
  }
  add_action( 'after_setup_theme', 'cmsfactory_setup' );
// Styles & Scripts
  function cmsfactory_scripts() {
    // B
  }
  add_action( 'wp_enqueue_scripts', 'cmsfactory_scripts' );
  • php 닫는 태그, 즉 ?>는 넣지 않습니다.
  • cmsfactory_setup이나 cmsfactory_scripts는 함수 이름으로, 다른 이름으로 바꾸어도 됩니다.
  • add_action은 특정 액션(action)에 특정 함수를 훅(hook)하는 함수입니다.
 

타이틀 추가하기

A 부분에 다음 코드를 추가합니다.

add_theme_support( 'title-tag' );

HTML 문서에 다음과 비슷한 내용을 가진 <title> 요소가 추가됩니다.

<title>WordPress &#8211; 다른 워드프레스 사이트</title>

피드(feed) 링크 추가하기

A 부분에 다음 코드를 추가합니다.

add_theme_support( 'automatic-feed-links' );

HTML 문서에 다음과 비슷한 코드가 추가됩니다.

<link rel="alternate" type="application/rss+xml" title="WordPress &raquo; 피드" href="http://making-wordpress-theme.cmsfactory.net/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="WordPress &raquo; 댓글 피드" href="http://making-wordpress-theme.cmsfactory.net/?feed=comments-rss2" />

스타일 추가하기

style.css를 연결하려면 B 부분에 다음 코드를 추가합니다.

wp_enqueue_style( 'cmsfactory', get_theme_file_uri( '/style.css' ) );

테마 폴더에 있는 style.css 파일을 연결시키라는 뜻입니다. cmsfactory는 다른 것으로 바꿔도 됩니다. id 값으로 사용되므로, 중복되지 않도록 정합니다.

HTML 문서에 다음과 비슷한 코드가 추가됩니다.

<link rel='stylesheet' id='cmsfactory-css' href='http://making-wordpress-theme.cmsfactory.net/wp-content/themes/cmsfactory/style.css?ver=4.8.2' type='text/css' media='all' />

테마 루트 폴더에 있는 style.css를 연결하는 거라면 다음과 같이 해도 됩니다.

wp_enqueue_style( 'cmsfactory', get_stylesheet_uri() );

만약 css라는 폴더를 만들고, 그 폴더 안의 abc.css 파일을 연결시키고 싶다면 다음과 같이 합니다.

wp_enqueue_style( 'cmsfactory', get_theme_file_uri( '/css/abc.css' ) );

참고

지금까지 만든 테마 파일

/functions.php

<?php
// Setup
  function cmsfactory_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'automatic-feed-links' );
  }
  add_action( 'after_setup_theme', 'cmsfactory_setup' );
// Styles & Scripts
  function cmsfactory_scripts() {
    wp_enqueue_style( 'cmsfactory', get_theme_file_uri( '/style.css' ) );
  }
  add_action( 'wp_enqueue_scripts', 'cmsfactory_scripts' );

/index.php

<!doctype html>
<html <?php language_attributes(); ?>>
  <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
    <?php wp_footer(); ?>
  </body>
</html>

/style.css

/*
  Theme Name: CMS FACTORY
  Author: JB
  Version: 1.0
*/

Created on 2017-10-16 14:26 | Updated on 2017-11-20 13:13

이 글을 공유하기

Kakao

워드프레스 프리미엄 테마 사이트