Home
스킨 워드프레스 테마

워드프레스 스킨(테마) 만들기 가이드

hwaya
|
6월 02, 2025

워드프레스에서 "스킨"은 일반적으로 "테마(Theme)"를 의미합니다. 테마는 사이트의 디자인과 레이아웃을 결정하는 핵심 요소입니다. 아래는 워드프레스 테마를 직접 만드는 기본적인 단계와 팁입니다.

1. 기본 폴더와 파일 구조 만들기

  1. 워드프레스가 설치된 서버의 /wp-content/themes/ 폴더로 이동합니다.
  2. 새 폴더를 생성하고 원하는 테마 이름(예: mytheme)으로 지정합니다.
  3. 필수 파일 2개를 만듭니다:
    • style.css (테마 정보 및 스타일시트)
    • index.php (기본 템플릿 파일)

style.css 예시

/*
Theme Name: MyTheme
Theme URI: http://example.com/
Author: 내 이름
Author URI: http://example.com/
Description: 나만의 워드프레스 테마
Version: 1.0
*/
 

index.php 예시

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <title><?php bloginfo('name'); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
    <h1><?php bloginfo('name'); ?></h1>
    <p><?php bloginfo('description'); ?></p>

    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title('<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>게시물이 없습니다.</p>';
    endif;
    ?>
</body>
</html>

2. 추가 파일 만들기

더 나은 구조와 기능을 위해 다음 파일들을 추가로 만듭니다.

  • header.php : 헤더 영역
  • footer.php : 푸터 영역
  • functions.php : 테마 기능 추가
  • sidebar.php : 사이드바
  • single.php : 단일 포스트 템플릿
  • page.php : 페이지 템플릿
  • screenshot.png : 테마 미리보기 이미지 (880x660px 권장)

3. functions.php에서 기본 기능 추가

예시:

<?php
function mytheme_setup() {
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    register_nav_menu('main-menu', '메인 메뉴');
}
add_action('after_setup_theme', 'mytheme_setup');
?>

4. 테마 활성화 및 테스트

  1. 워드프레스 관리자에서 외모 > 테마로 이동합니다.
  2. 만든 테마를 선택하고 활성화합니다.
  3. 사이트를 방문하여 정상 작동하는지 확인합니다.

5. 커스터마이징과 고급 기능

  • CSS와 JS 파일을 추가해 디자인을 개선할 수 있습니다.
  • get_header(), get_footer(), get_sidebar() 함수로 템플릿을 분리해 관리합니다.
  • 워드프레스 테마 개발 공식 문서에서 더 많은 정보를 확인하세요.

추가 팁

  • 개발할 때는 자식 테마(Child Theme)로 시작하면 업데이트 시 커스텀 코드가 안전합니다.
  • 무료/유료 테마를 참고하면 구조를 쉽게 이해할 수 있습니다.
  • GitHub 등 버전 관리 시스템을 활용하면 협업 및 백업에 유리합니다.

궁금한 점이나 특정 기능 구현이 필요하다면 언제든 질문해 주세요!