세상에는 수많은 워드프레스 테마가 있지만, 때로는 내 웹사이트만의 독특한 개성과 기능을 담아내기 위해 직접 테마를 만들고 싶다는 생각을 하게 됩니다. ‘나만의 공간’을 내 손으로 설계하고 구축하는 일은 분명 매력적이죠. 이 글에서는 워드프레스 테마 제작의 가장 첫 단계인 기본 뼈대 구성부터 웹사이트의 필수 요소인 네비게이션 메뉴 구현까지, 그 과정을 정리해보겠습니다.
1단계: 테마의 첫인상 – 기본 뼈대 세우기
모든 시작은 기초 공사부터! 워드프레스 테마도 마찬가지입니다.
테마 폴더 생성: wp-content/themes/ 디렉토리 안에 나만의 테마 폴더를 만듭니다. (예: nimf-theme)
필수 파일 생성:
style.css: 테마의 정보를 담는 명함과 같습니다. 파일 상단에 주석(/* ... */)으로 테마 이름, 제작자, 버전, 설명, 그리고 중요한 Text Domain (예: nimf-theme)을 반드시 기입해야 워드프레스가 테마로 인식합니다. 이 파일은 테마의 주 스타일시트 역할도 합니다.
/*
Theme Name: Nimf Theme
Text Domain: nimf-theme
Version: 1.0
... (기타 정보) ...
*/
/* CSS 규칙은 이 아래에 작성 */Code language: CSS (css)index.php: 워드프레스가 특정 페이지에 맞는 템플릿 파일을 찾지 못했을 때 사용하는 기본 템플릿입니다. 일단 비워두거나 기본적인 헤더/푸터 호출만 넣어둡니다.
기본 구조 파일 생성:
header.php: 사이트 상단에 공통으로 들어갈 내용입니다.<!DOCTYPE html>,<html <?php language_attributes(); ?>>,<head>,<?php wp_head(); ?>,<body>,<body <?php body_class(); ?>>등의 기본 구조를 갖춥니다.footer.php: 사이트 하단 공통 영역입니다.<?php wp_footer(); ?>함수 호출과</body>,</html>닫는 태그가 필수입니다.index.php(및 다른 템플릿 파일)에서<?php get_header(); ?>와<?php get_footer(); ?>를 사용하여 이 파일들을 불러옵니다.
2단계: 테마에 생명 불어넣기 – functions.php 설정
functions.php 파일은 테마의 핵심 기능을 담당합니다. 여기서 가장 먼저 할 일은 우리가 만든 style.css 파일을 워드프레스가 제대로 불러올 수 있도록 등록(enqueue)하는 것입니다. 또한 네비게이션 메뉴를 사용하기 위한 위치를 등록합니다.
<?php
// functions.php
/**
* 테마 스크립트와 스타일 로드
*/
function nimf_theme_scripts() {
// 메인 스타일시트 로드
wp_enqueue_style( 'nimf-theme-style', get_stylesheet_uri(), array(), '1.0' );
// 네비게이션 메뉴용 JavaScript 로드 (7단계에서 생성, nav.js로 가정)
wp_enqueue_script(
'nimf-theme-navigation', // 핸들 이름
get_template_directory_uri() . '/js/nav.js', // 변경된 파일 경로 사용 예시
array(),
'1.0',
true
);
}
add_action( 'wp_enqueue_scripts', 'nimf_theme_scripts' );
/**
* 테마 기본 설정
*/
function nimf_theme_setup() {
// 네비게이션 메뉴 위치 등록
register_nav_menus( array(
'primary-menu' => esc_html__( 'Primary Menu', 'nimf-theme' ), // 'primary-menu' 키, 'nimf-theme' Text Domain
) );
// 기타 테마 지원 기능 추가 (예: 특성 이미지, 로고 등)
// add_theme_support( 'post-thumbnails' );
// add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'nimf_theme_setup' );
// 사이드바 등록 등 기타 필요한 함수들...
// function nimf_theme_widgets_init() { ... }
// add_action( 'widgets_init', 'nimf_theme_widgets_init' );
?>Code language: PHP (php)위 코드에서는 wp_enqueue_style 함수로 style.css를 로드하고, register_nav_menus 함수를 사용하여 ‘Primary Menu’라는 이름의 메뉴 위치를 'primary-menu'라는 키(key)로 등록했습니다.
3단계: 길잡이 만들기 – 헤더에 메뉴 표시하기
이제 등록한 메뉴 위치에 실제 메뉴가 표시되도록 header.php 파일을 수정합니다. 네비게이션 영역(<nav>)을 만들고 wp_nav_menu() 함수를 사용합니다. 모바일용 토글 버튼도 함께 추가합니다.
<?php // header.php 일부 ?>
<header id="masthead" class="site-header">
<div class="site-branding container">
<?php
// 사이트 제목 또는 로고 표시 로직
if ( has_custom_logo() ) {
the_custom_logo();
} elseif ( is_front_page() && is_home() ) {
?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php
} else {
?>
<div class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></div>
<?php // P 대신 DIV 사용한 버전
}
?>
</div><nav id="site-nav" class="main-nav container"> <?php // ID와 Class 이름 예시 (이전 논의 반영) ?>
<button class="menu-toggle" aria-controls="primary-menu-ul" aria-expanded="false"><?php esc_html_e( 'Menu', 'nimf-theme' ); // Text Domain: nimf-theme ?></button>
<?php
wp_nav_menu( array(
'theme_location' => 'primary-menu', // functions.php에서 등록한 키 'primary-menu' 사용
'menu_id' => 'primary-menu-ul', // 출력될 ul 태그의 ID
'fallback_cb' => false,
) );
?>
</nav></header>Code language: PHP (php)4단계: 메뉴 내용 채우기 – 워드프레스 관리자 설정
이제 워드프레스 관리자 화면에서 메뉴에 표시할 실제 링크들을 구성합니다.
- 관리자 메뉴 > 모양 > 메뉴로 이동합니다.
- ‘새로운 메뉴 생성하기’를 클릭하고 메뉴 이름(예: ‘주 메뉴’)을 지정 후 ‘메뉴 생성’ 버튼을 누릅니다.
- 왼쪽에서 페이지, 사용자 정의 링크 등을 선택하여 ‘메뉴에 추가’합니다.
- 오른쪽 ‘메뉴 구조’에서 항목 순서를 드래그 앤 드롭으로 조정합니다. (들여쓰기로 하위 메뉴 생성 가능)
- 하단 ‘메뉴 설정’ > ‘메뉴 위치’에서 ‘Primary Menu’ 앞의 체크박스를 선택합니다.
- ‘메뉴 저장’ 버튼을 클릭합니다.
5단계: 보기 좋게 꾸미기 – 기본 메뉴 CSS 스타일링
style.css에 CSS를 추가하여 데스크탑 화면에서 메뉴가 보기 좋게 가로로 펼쳐지도록 만듭니다. 모바일 토글 버튼은 일단 숨깁니다.
/* style.css 에 추가 */
/* 네비게이션 컨테이너 */
.main-nav { /* 필요한 스타일 */ }
/* 데스크탑 메뉴 (ul) - 가로 배치 예시 (Flexbox) */
#primary-menu-ul {
list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-end;
}
/* 메뉴 항목 (li) */
#primary-menu-ul li { margin: 0 0 0 1.5em; }
/* 메뉴 링크 (a) */
#primary-menu-ul li a { text-decoration: none; color: #006699; }
#primary-menu-ul li a:hover, #primary-menu-ul li a:focus { text-decoration: underline; color: deeppink; }
/* 데스크탑에서는 모바일 토글 버튼 숨기기 */
.menu-toggle { display: none; }Code language: CSS (css)6단계: 작은 화면 배려 – 반응형 메뉴 CSS
미디어 쿼리를 사용하여 작은 화면에서의 스타일을 정의합니다. 토글 버튼을 보여주고, 기본 메뉴는 숨겼다가 필요시 오버레이나 드롭다운 형태로 보여줍니다.
/* style.css 에 추가 */
@media screen and (max-width: 768px) { /* 768px 이하 화면 */
/* 메뉴 토글 버튼 보이기 */
.menu-toggle { display: block; /* + 버튼 스타일 */ }
/* 기본 메뉴 목록 숨기기 */
.main-nav ul#primary-menu-ul { display: none; }
/* 토글되었을 때 메뉴 스타일 (예: 드롭다운 오버레이) */
.main-nav.toggled ul#primary-menu-ul {
display: block; position: absolute; top: 100%; left: 0; right: 0;
background-color: white; box-shadow: 0 3px 5px rgba(0,0,0,0.1); z-index: 1000;
/* ... 기타 오버레이/드롭다운 스타일 ... */
}
.main-nav.toggled ul#primary-menu-ul li { display: block; width: 100%; /* ... */ }
/* ... 오버레이/드롭다운 내부 링크 스타일 ... */
}Code language: CSS (css)7단계: 클릭으로 움직이기 – 메뉴 토글 JavaScript
마지막으로, 토글 버튼 클릭 시 메뉴가 실제로 열리고 닫히도록 JavaScript 코드를 js/nav.js 파일에 작성하고 functions.php에서 로드합니다.
js/nav.js:
( function() {
const siteNavigation = document.getElementById( 'site-nav' ); // ID 확인
if ( ! siteNavigation ) { return; }
const menuToggle = siteNavigation.querySelector( '.menu-toggle' );
if ( ! menuToggle ) { return; }
menuToggle.addEventListener( 'click', function() {
siteNavigation.classList.toggle( 'toggled' ); // .toggled 클래스 추가/제거
const isExpanded = menuToggle.getAttribute( 'aria-expanded' ) === 'true';
menuToggle.setAttribute( 'aria-expanded', ! isExpanded );
} );
}() );Code language: JavaScript (javascript)functions.php (nimf_theme_scripts 함수 내부): wp_enqueue_script 호출 확인 (2단계 코드 참고, 핸들 이름과 파일 경로 확인)
마무리
여기까지 진행하면 워드프레스 테마의 기본적인 뼈대 위에 반응형 네비게이션 메뉴까지 갖추게 됩니다! 이제 이 nimf-theme이라는 기본 틀 위에 여러분만의 디자인과 기능을 하나씩 추가하며 멋진 테마를 완성해나가시길 바랍니다. 궁금한 점이 있다면 언제든 다시 질문해주세요.
답글 남기기