이전 글에서는 워드프레스의 고유주소를 설정하고, 호스팅 설치 과정에서 기본으로 추가된 플러그인을 정리했다.
이번에는 정적 HTML 파일을 워드프레스에서 사용할 수 있도록 커스텀 테마의 기본 구조를 만들었다.
GeneratePress 대신 커스텀 테마를 선택한 이유
워드프레스 사이트를 제작할 때는 GeneratePress 같은 범용 테마를 설치한 뒤 블록 에디터나 페이지 빌더를 이용해 화면을 구성할 수도 있다.
하지만 이번 작업은 디자인과 퍼블리싱이 완료된 HTML, CSS, JavaScript 파일을 워드프레스로 이전하는 것이 목적이었다.
GeneratePress를 사용하면 기존 화면을 워드프레스 블록으로 다시 만들어야 하고, 테마에서 기본으로 제공하는 레이아웃과 CSS가 기존 코드에 영향을 줄 수도 있다.
따라서 기존 HTML 구조와 디자인을 최대한 유지할 수 있도록 별도의 커스텀 테마를 직접 만들기로 했다.
커스텀 테마도 일반 워드프레스 테마와 동일하게 메뉴, 페이지, 게시글, 플러그인, SEO 설정 등의 기능을 사용할 수 있다.
SEO와 AEO는 테마 종류와 별개다
GeneratePress를 사용하지 않는다고 해서 SEO나 AEO 작업을 할 수 없는 것은 아니다.
테마에서는 다음과 같은 기술적인 요소를 관리한다.
- 시맨틱 HTML 구조
- H1, H2, H3 제목 순서
- 모바일 반응형
- 페이지 표시 속도
- 이미지 대체 텍스트
- CSS 및 JavaScript 로딩 방식
페이지별 제목, 설명, canonical, 사이트맵, robots 설정 등은 추후 SEO 플러그인을 이용해 관리할 수 있다.
FAQ, 질문에 대한 직접적인 답변, 구조화 데이터 등의 AEO 요소도 커스텀 테마에서 동일하게 적용할 수 있다.
커스텀 테마 폴더 만들기
프로젝트명이나 업종이 드러나지 않도록 테마 폴더명은 단순하게 custom-theme으로 정했다.
custom-theme/
├── style.css
├── functions.php
├── header.php
├── footer.php
└── index.php
우선 워드프레스가 테마로 인식하고 실행할 수 있도록 다섯 개의 기본 파일을 생성했다.
style.css 만들기
style.css는 워드프레스가 테마의 이름과 정보를 확인하는 파일이다.
파일 상단에 테마 정보를 주석으로 작성해야 관리자 화면의 테마 목록에 표시된다.
/*
Theme Name: Custom Theme
Description: 정적 HTML 사이트를 워드프레스로 이전하기 위한 커스텀 테마
Version: 1.0.0
Text Domain: custom-theme
*/아직 기존 사이트의 CSS는 연결하지 않고, 테마 인식에 필요한 정보만 작성했다.
functions.php 만들기
functions.php는 테마에서 사용할 워드프레스 기능과 CSS, JavaScript 등을 등록하는 파일이다.
<?php
function custom_theme_setup() {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
add_theme_support('html5', [
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption',
'style',
'script',
]);
register_nav_menus([
'primary' => '메인 메뉴',
]);
}
add_action('after_setup_theme', 'custom_theme_setup');
function custom_theme_assets() {
wp_enqueue_style(
'custom-theme-style',
get_stylesheet_uri(),
[],
wp_get_theme()->get('Version')
);
}
add_action('wp_enqueue_scripts', 'custom_theme_assets');현재 코드에는 다음 기능이 들어 있다.
- 워드프레스가 페이지 제목을 관리하도록 설정
- 대표 이미지 기능 활성화
- HTML5 마크업 지원
- 메인 메뉴 위치 등록
- 테마의
style.css연결
기존 정적 사이트의 CSS와 JavaScript는 이후 작업에서 이 파일을 통해 추가할 예정이다.
header.php 만들기
header.php에는 모든 페이지에서 공통으로 사용하는 문서 시작 부분과 헤더 영역을 작성한다.
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<header id="site-header">
<p>임시 헤더</p>
</header>wp_head()는 워드프레스와 플러그인이 CSS, JavaScript, SEO 태그 등을 <head> 영역에 출력할 수 있도록 하는 필수 코드다.
body_class()는 현재 페이지 상태에 맞는 클래스를 <body>에 자동으로 추가하고, wp_body_open()은 플러그인이 <body> 시작 부분에 필요한 코드를 삽입할 수 있도록 한다.
실제 헤더 디자인을 옮기기 전이므로 현재는 ‘임시 헤더’ 문구만 넣었다.
footer.php 만들기
footer.php에는 모든 페이지에서 공통으로 사용하는 푸터와 HTML 종료 태그를 작성한다.
<footer id="site-footer">
<p>임시 푸터</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>wp_footer()는 워드프레스와 플러그인이 필요한 JavaScript를 페이지 하단에 출력할 수 있도록 하는 필수 코드다.
index.php 만들기
index.php는 워드프레스가 사용할 적절한 템플릿을 찾지 못했을 때 실행하는 기본 템플릿이다.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : ?>
<?php the_post(); ?>
<article id="post-<?php the_ID(); ?>">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</article>
<?php endwhile; ?>
<?php else : ?>
<p>표시할 콘텐츠가 없습니다.</p>
<?php endif; ?>
</main>
<?php get_footer(); ?>get_header()와 get_footer()를 사용하면 각각 header.php와 footer.php를 불러올 수 있다.
워드프레스 루프를 이용해 현재 페이지나 게시글의 제목과 본문을 출력하도록 기본 구조를 만들었다.
FTP에 커스텀 테마 업로드하기
파일을 모두 만든 뒤 custom-theme 폴더 전체를 워드프레스의 테마 경로에 업로드했다.
/wp-content/themes/custom-theme/워드프레스 관리자에서 다음 메뉴로 이동하면 새로 만든 테마를 확인할 수 있다.
모양(구 버전에서는 외모) → 테마 → Custom Theme
테마를 ‘활성화’한 뒤 홈페이지에서 임시 헤더, 콘텐츠, 임시 푸터가 출력되면 기본 테마가 정상적으로 작동하는 것이다.
아직 기존 CSS와 HTML을 옮기지 않았기 때문에 디자인 없이 기본 문구만 표시되는 것이 정상이다.
사용하지 않는 기본 테마 정리하기
커스텀 테마를 활성화한 뒤 사용하지 않는 워드프레스 기본 테마도 정리했다.
기본 테마를 모두 삭제하기보다는 커스텀 테마에 오류가 발생했을 때 사용할 수 있도록 최신 기본 테마 하나를 남겨두는 것이 좋다.
최종적으로 다음 파일과 폴더만 유지했다.
themes/
├── custom-theme/
├── twentytwentyfive/
└── index.phpcustom-theme: 실제로 사용할 커스텀 테마twentytwentyfive: 오류 발생 시 사용할 비상용 기본 테마index.php: 테마 폴더의 디렉터리 목록 노출을 방지하는 파일
오래된 twentytwentyfour, twentytwentythree 테마는 삭제했다.
특히 themes 폴더 안의 index.php는 테마가 아니므로, 불필요한 파일이라고 생각해 삭제하지 않도록 주의해야 한다.
커스텀 테마 기본 구조 완성
여기까지 진행하면 워드프레스가 인식할 수 있는 커스텀 테마의 기본 틀이 완성된다.
현재는 디자인이 없는 상태지만, 다음 작업부터 기존 정적 HTML의 공통 헤더와 푸터를 각각 header.php, footer.php로 옮기고 CSS와 JavaScript 경로를 워드프레스 테마에 맞게 수정할 예정이다.
답글 남기기