워드프레스 | 테마 만드는 법

정라잇 | 최근 수정일 : 23년 04월 14일

개요

워드프레스에서의 테마는 외부에서 보여지는 등 사이트에서 핵심적인 역할을 맡고 있습니다.
테마는 아래 두가지 맥락을 가지고 있어요.

외부에 보여지는 뼈대와 디자인 요소
목적에 맞게 작동되는 기능

추가 기능이 필요한 경우 플러그인을 만들거나 설치하여 사이트에 필요한 기능을 보충하게 됩니다.
테마가 어떻게 되어있는지 아는 시간을 가져보도록 하죠.

본문

웹의 기본 구성이라 할 수 있는 HTML와 CSS, JavaScript 를 떠올려봅시다.
HTML로 뼈대를 만들고, CSS로 피부를 만들어냅니다. 그리고, 자바스크립트로는 장기의 역할을 하게 되는데요, 거기에 PHP와 워드프레스 함수를 활용하여 서버와의 연동도 간편하게 할 수 있는 특징을 가지고 있는 것이 테마입니다.

우리가 기본적으로 만들어야 하는 파일들을 정리해봅시다.

style.css (필수 | 테마 식별)
index.php (필수 | 기본 페이지)
header.php
footer.php
functions.php
front-page.php
screenshot.png

우리가 만드는 테마는 부모테마인데요, 파일을 건들지 않고 코드 일부분만 바꾸고 싶을 경우 차일드 테마를 활용하면 됩니다. 자세한 정보는 [차일드 테마 만드는 방법]을 참고하시면 됩니다

먼저 폴더를 생성해야 하는데요, 폴더명은 rdg 로 하겠습니다. 그리고 위의 자료를 하나씩 만들어서 넣습니다
(시간이 없으신 분들은 자료를 다운받아주세요)

index.php

// 꼭 내용이 채워질 필요는 없음

style.css

/*
 Theme Name:   테마 이름
 Theme URI:    https://www.light-coding.com
 Description:  테마 설명
 Author:       글쓴이
 Author URI:   https://www.light-coding.com
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  
*/

워드프레스에서 정상적인 테마로 인식하기 위해서는 style.css 에서 위의 내용을 채워넣어야 해요
그대로 복사하여 사용해도 되지만 간단한 사용법은 알고 있어야 해요.

먼저 Theme Name 에는 테마에서 사용할 이름을 입력하면 됩니다. 그 외의 Description 의 경우는 테마의 간단한 설명정도만 넣어두시면 나중에 식별할 때 편해지니 추가하는 것을 권장드려요.

그 외로는 라이센스 관련 내용인데, 광범위하게 사용되는 GNU 라이센스를 넣어놨어요. 자세한 내용은 [이곳] 에 들어가서 보시면 됩니다. 자신에게 맞는 라이센스 (MIT 라이센스 등) 을 입력해 두어 라이센스의 범위를 적어두는 것이 좋습니다.

header.php

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="설명글">
    <meta property="og:title" content="타이틀">
    <meta property="og:description" content="sns 공유 시 설명글">
    <meta property="og:image" content="" />
    <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
    <link rel="profile" href="https://gmpg.org/xfn/11" />
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
    <title><?php bloginfo('name'); ?><?php wp_title('-'); bloginfo('description')?></title>
    <?php wp_head(); ?>
</head>

헤더는 외부에 노출되는데 중요한 <meta> 태그를 주의깊게 봐야 하는데요, sns에 노출되는데 중요한 역할을 하는 것이 og:title, og:description, og:image 입니다. 왼쪽부터 제목, 설명, 이미지입니다. og:image는 1200×630 픽셀을 권장합니다.

language_attributes() 는 설정 된 언어로 변환해주는 역할을 합니다.
한국어로 설정했다면 ko_KR 으로 노출됩니다

언어마다 우측에서 읽는 경우가 있는데, 이러한 설정도 하게됩니다

bloginfo() 는 관리자 설정 페이지에서 설정한 자료들을 외부에 노출시키는 등의 역할을 합니다.
wp_head()는 워드프레스에 핵심적인 스크립트와 스타일 메타태그를 추가하는 역할을 합니다. </head> 바로 앞에 배치하는 것을 권장합니다

footer.php

<footer class="site-footer">
    <p><?php bloginfo( 'name' ) ?></p>
</footer>

<?php wp_footer() ?>
</body>
</html>

워드프레스의 기본적인 기능을 넣기 위해서는 반드시 wp_footer() 라는 함수를 넣어야 합니다.
footer의 특이한 점은 </body> 와 </html> 닫기 태그가 있다는 점인데요, HTML 뼈대의 완성을 위해 있는것이니 이 부분을 이해하고 작업하는 것이 footer.php의 핵심 내용입니다

functions.php

// 앵커 적용
function enqueue_default()
{
    
    wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'enqueue_default');


// 메뉴 추가
register_nav_menus(array('header_menu' => 'Header Menu'));
register_nav_menus(array('mobile_menu' => 'Mobile Menu'));

front-page.php

<?php get_header(); ?>

<body>
// 내용

<?php get_footer(); ?>

우리는 재활용을 하기가 편해야 합니다.
헤더(header)와 푸터(footer)는 한번 만들어 놓고 자주 사용할 수 있어요. 퍼즐 조각을 맞추는 것이죠.
새로 만들어야 하는 경우에는 [다른 방법] 을 활용하면 해결할 수 있습니다.

물론 본문에 자주 들어가는 내용도 [블록화] 를 사용하시면 코드 한줄로 기능을 다시 불러오는 것이 가능합니다.

1줄을 보시면 get_header() 함수를 볼 수 있는데요, header.php 를 불러오는 함수입니다
4줄에 있는 get_footer() 함수도 마찬가지로 footer.php 파일을 불러와요.

</body> 가 없는 이유는 footer.php 파일에 들어있기 때문인데요,
HTML 구문이 중첩되면 안되기 때문에 위와 같이 코드를 작성하게 되면 테마의 기초 공사를 마치게 됩니다

screenshot.png

워드프레스 관리자 모드에서 테마를 식별하는 이미지입니다.
없어도 무방하지만, 납품을 하는 경우는 있는 편이 조금 더 신경 쓴 느낌이 들기도 하고,
식별에도 어느정도 도움이 되기 때문에 권장하는 편입니다