워드프레스 Local 환경에서 테마 개발을 하는 이유

  • 실시간 테스트 가능: 코드 수정 후 새로고침만 하면 즉시 반영됩니다.
  • 실패해도 안전: 실제 서버에 영향이 없고 언제든 초기화 가능.
  • 파일 접근이 자유롭다: 로컬 폴더에서 바로 테마 파일을 수정할 수 있음.
  • PHP, JS, CSS를 통합적으로 실험 가능: 완벽한 워드프레스 구조 그대로 동작.

워드프레스 Local 환경

Local의 워드프레스 폴더 구조

Local로 사이트를 만들면 기본 경로는 다음과 같습니다:

C:\Users\<사용자이름>\Local Sites\<사이트이름>\

이 안에는 다음과 같은 폴더가 있어요 👇

📁 app
 ┣ 📁 public           ← 워드프레스 설치 폴더 (여기서 작업)
 ┣ 📁 logs
 ┗ 📁 conf

테마 개발에 필요한 폴더는 바로 이 경로입니다:

C:\Users\<사용자이름>\Local Sites\<사이트이름>\app\public\wp-content\themes

테마 폴더 위치

워드프레스의 모든 테마는
wp-content/themes 폴더 안에 저장됩니다.

📁 wp-content
 ┣ 📁 plugins
 ┗ 📁 themes
     ┣ 📁 twentytwentyfour
     ┣ 📁 twentytwentythree
     ┗ 📁 mycustomtheme   ← 새로 만든 테마 폴더

여기에 mycustomtheme 폴더를 새로 만들어 직접 개발하면 됩니다.


새 테마 폴더 만들기

  1. 위 경로로 이동 (themes 폴더)
  2. 새 폴더 생성
    이름: mycustomtheme
  3. 그 안에 최소한의 두 파일을 추가합니다:
📁 mycustomtheme
 ┣ 📄 style.css
 ┗ 📄 index.php

style.css 내용 예시

/*
Theme Name: My Custom Theme
Theme URI: http://localhost
Author: 내이름
Author URI: http://localhost
Description: Local에서 직접 개발한 워드프레스 테마
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: mycustomtheme
*/

index.php 내용 예시

<?php get_header(); ?>
<h1>안녕하세요! 나만의 워드프레스 테마입니다.</h1>
<?php get_footer(); ?>

테마 활성화하기

  1. 브라우저에서 http://<사이트이름>.local/wp-admin 접속
  2. 로그인 후 → [외모] → [테마]
  3. 새로 만든 My Custom Theme 이 목록에 보이면 “활성화” 클릭
  4. 새로고침 시 기본 페이지가 변경됩니다.

개발 시 유용한 구조 추가

기본 구조를 확장하면 아래처럼 만듭니다:

📁 mycustomtheme
 ┣ 📄 style.css
 ┣ 📄 index.php
 ┣ 📄 functions.php
 ┣ 📁 assets
 ┃ ┣ 📁 css
 ┃ ┣ 📁 js
 ┃ ┗ 📁 images
 ┣ 📁 template-parts
 ┃ ┣ 📄 header.php
 ┃ ┣ 📄 footer.php
 ┃ ┗ 📄 sidebar.php

예시: functions.php

<?php
function mycustomtheme_scripts() {
    wp_enqueue_style('main-style', get_stylesheet_uri());
    wp_enqueue_script('main-js', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'mycustomtheme_scripts');
?>

이렇게 하면 assets/js/main.js 를 자동으로 불러올 수 있습니다.


개발할 때 사용하는 툴 추천

  • VSCode: PHP + CSS + JS 코드 자동완성 지원
  • Local Database Adminer: DB 테이블 확인 및 데이터 수정
  • Live Reload 플러그인: 수정 시 자동 새로고침

Local에서 코드가 바로 반영되지 않을 때

  1. 브라우저 캐시를 비우기
  2. 워드프레스 캐시 플러그인 비활성화
  3. Local 내에서 사이트를 재시작 (Stop → Start)
  4. CSS가 바뀌지 않으면 Ctrl + F5 강력 새로고침

Local 테마 개발의 장점 정리

항목설명
빠른 테스트서버 업로드 없이 즉시 반영
안전한 실험원본 사이트에 영향 없음
완전한 제어모든 파일 접근 가능
학습 효율PHP, CSS, JS 통합 실습 가능

마무리

Local 환경은 워드프레스 테마를 실험하고 배우기에 최적의 환경입니다.
복잡한 서버 설정이나 FTP 업로드 없이
바로 파일을 수정하고 결과를 확인할 수 있기 때문입니다.