정적 HTML 사이트를 워드프레스 커스텀 테마로 이전하기 ③ 헤더·푸터 분리와 관리자 수정 기능 만들기

지난 글에서는 워드프레스 커스텀 테마의 기본 파일을 만들고, 워드프레스가 테마를 정상적으로 인식하는 것까지 확인했다.

이번에는 정적 HTML로 만들어진 메인 페이지를 워드프레스 테마로 옮기면서 다음 작업을 진행했다.

기존 HTML의 헤더·본문·푸터 분리
원본 CSS와 이미지 연결
워드프레스 메뉴 기능 연동
로고와 사이트 정보 관리자 연동
진료시간, 연락처, 바로가기 등 변경 가능성이 높은 정보의 관리자 설정 기능 추가

1. 기존 HTML 구조부터 나누기

원본 index.html에는 헤더, 메인 콘텐츠, 푸터가 하나의 파일에 모두 들어 있었다.

워드프레스에서는 공통 영역을 별도의 파일로 나누는 것이 관리하기 편하다.

header.php: 로고, 상단 메뉴, 모바일 메뉴
front-page.php: 메인 페이지 콘텐츠
footer.php: 하단 정보, 바로가기, 고정 버튼
functions.php: CSS 연결, 메뉴 등록, 테마 기능 설정

페이지가 많아도 공통 헤더와 푸터는 한 번만 만들면 된다. 이후 디자인을 수정할 때도 모든 HTML 파일을 일일이 고칠 필요 없이 header.php 또는 footer.php만 수정하면 전체 페이지에 반영된다.

2. 워드프레스에 필요한 기본 함수 추가하기

기존 HTML의 <head> 내용을 그대로 복사하는 대신 워드프레스에 필요한 기본 구조를 넣었다.

<?php wp_head(); ?>

</body> 태그 앞에는 다음 함수를 넣었다.

<?php wp_footer(); ?>

이 함수가 있어야 워드프레스와 플러그인이 필요한 CSS, 자바스크립트, 메타 정보를 정상적으로 출력할 수 있다.

body 태그에도 워드프레스용 함수를 적용했다.

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

3. SEO 태그는 원본에서 바로 복사하지 않았다

원본 HTML의 <head>에는 다음과 같은 정보가 포함되어 있었다.

페이지 제목
메타 설명
canonical URL
구조화 데이터
검색 노출 차단용 noindex

이 내용을 테마에 그대로 넣으면 이후 SEO 플러그인에서 생성하는 정보와 중복될 수 있다. 특히 제작 중인 원본에 들어 있던 noindex가 그대로 운영 사이트에 반영되면 검색 결과에서 사이트가 제외될 수도 있다.

따라서 이번 단계에서는 디자인 출력에 필요한 내용만 옮기고, SEO 관련 정보는 개별 페이지 제작 후 SEO 플러그인에서 설정하기로 했다.

4. `_astro` 폴더와 속성은 그대로 유지하기

이번 원본 파일은 Astro로 제작되어 CSS와 이미지가 _astro 폴더 안에 들어 있었다.

폴더 이름을 보기 편하게 바꿀 수도 있지만, 기존 HTML과 CSS에서 _astro 경로를 여러 번 사용하고 있기 때문에 이름을 바꾸면 관련 경로도 모두 수정해야 한다.

불필요한 오류를 줄이기 위해 _astro 폴더명은 그대로 유지했다.

HTML 태그에 붙어 있던 다음과 같은 속성도 삭제하지 않았다.

data-astro-cid-xxxx

Astro가 생성한 CSS는 이 속성을 기준으로 특정 요소에 스타일을 적용하는 경우가 있다. 코드가 지저분해 보인다고 삭제하면 디자인이 갑자기 깨질 수 있다.

5. CSS 파일을 워드프레스 방식으로 연결하기

원본 HTML에서 사용하던 CSS를 functions.php에서 불러오도록 변경했다.

wp_enqueue_style(
    'custom-theme-main',
    get_template_directory_uri() . '/_astro/index.css',
    array(),
    filemtime(get_template_directory() . '/_astro/index.css')
);

원본 HTML의 <style> 안에 직접 들어 있던 메인 페이지 전용 CSS는 front-page.css로 분리했다.

CSS를 연결할 때는 원본 HTML에 적용되어 있던 순서도 유지해야 한다. 여러 CSS 파일에서 같은 요소를 설정하고 있다면 연결 순서에 따라 최종 디자인이 달라질 수 있기 때문이다.

filemtime()도 함께 사용했다. CSS 파일을 수정하면 파일의 수정 시간을 버전으로 사용해 브라우저 캐시 때문에 변경사항이 늦게 보이는 문제를 줄일 수 있다.

6. 이미지와 내부 링크 경로 수정하기

정적 HTML에서는 이미지 경로가 다음처럼 작성되어 있었다.

<img src="/_astro/logo.svg" alt="">

워드프레스 테마에서는 설치 경로가 달라질 수 있으므로 테마 폴더 주소를 기준으로 불러오도록 변경했다.

<img src="<?php echo esc_url(
    get_template_directory_uri() . '/_astro/logo.svg'
); ?>" alt="">

사이트 내부 페이지 링크도 고정 주소 대신 home_url()을 사용했다.

<a href="<?php echo esc_url(home_url('/about/')); ?>">

이렇게 하면 테스트 주소에서 실제 도메인으로 사이트를 이전하더라도 링크를 다시 수정할 필요가 줄어든다.

7. 상단 메뉴를 관리자에서 수정할 수 있게 만들기

처음에는 원본 HTML의 메뉴를 그대로 넣어 화면부터 확인했다. 하지만 메뉴 이름이나 주소가 바뀔 때마다 header.php를 수정해야 하는 문제가 있었다.

이를 해결하기 위해 functions.php에 워드프레스 메뉴 위치를 등록했다.

register_nav_menus(array(
    'primary' => '상단 메뉴',
    'footer'  => '푸터 메뉴',
));

이후 관리자 화면의 메뉴 기능에서 다음 작업을 할 수 있게 됐다.

메뉴 이름 변경
메뉴 링크 변경
메뉴 순서 변경
새로운 메뉴 추가
필요 없는 메뉴 삭제
하위 메뉴 구성

워드프레스 메뉴를 아직 지정하지 않은 경우에는 원본 메뉴가 표시되도록 기본 메뉴도 남겨두었다. 덕분에 설정 도중 메뉴가 갑자기 사라지는 것을 방지할 수 있었다.

8. 로고도 관리자에서 변경 가능하게 만들기

로고 역시 파일에 고정하지 않고 워드프레스의 사용자 정의 로고 기능을 등록했다.

add_theme_support('custom-logo');

관리자에서 로고를 등록하면 해당 이미지가 출력되고, 등록된 로고가 없으면 기존 HTML에서 사용하던 로고가 표시되도록 처리했다.

클라이언트가 나중에 로고를 교체하더라도 PHP 파일을 직접 수정하지 않아도 된다.

9. 변경 가능성이 높은 정보를 별도 설정으로 만들기

사이트를 운영하다 보면 디자인보다 내용이 더 자주 바뀐다.

예를 들면 다음과 같다.

연락처
운영시간
평일·주말 구분
휴무 안내
주소와 위치 정보
하단 안내 문구
상담 버튼 이름
외부 예약 링크
블로그 링크
지도 링크

이 내용을 모두 footer.php에 고정하면 수정 요청이 올 때마다 FTP로 파일을 열어야 한다.

그래서 워드프레스 관리자에 별도의 사이트 설정 메뉴를 만들었다.

사이트 설정에서는 연락처, 운영시간, 안내 문구, 외부 링크, 버튼 노출 여부 등을 변경할 수 있다.

반복되는 정보는 다음과 같은 형태로 입력하도록 구성했다.

평일|09:00 ~ 18:00
주말|09:00 ~ 13:00
휴무|공휴일

왼쪽에는 항목명, 오른쪽에는 내용을 입력하고 | 기호로 구분한다.

이 방식은 토요일과 일요일을 각각 표시하다가 나중에 주말이라는 하나의 항목으로 합치는 경우에도 PHP 파일을 수정할 필요가 없다는 장점이 있다.

10. 푸터 바로가기는 사이트 설정이 아닌 메뉴에서 관리하기

푸터의 바로가기 목록도 나중에 이름이나 순서가 바뀔 가능성이 높다.

처음에는 사이트 설정에 입력 항목을 만들까 고민했지만, 바로가기는 워드프레스의 메뉴 기능을 이용하는 편이 더 적합했다.

관리자에서 푸터 메뉴를 만들면 다음 내용을 자유롭게 바꿀 수 있다.

표시되는 이름
연결 주소
메뉴 순서
메뉴 추가 및 삭제

푸터 메뉴를 지정하기 전에는 기존 HTML의 바로가기 목록이 표시되고, 푸터 메뉴를 지정하면 관리자에서 만든 메뉴가 대신 출력되도록 했다.

11. 관리자가 수정해야 하는 영역 정리하기

관리자가 워드프레스 관리자 화면에서 직접 수정할 수 있도록 만든 영역은 다음과 같다.

로고 이미지
상단 메뉴 이름과 링크
상단 메뉴 순서
하위 메뉴 구성
푸터 바로가기 이름과 링크
푸터 바로가기 순서
연락처
운영시간
휴무일 안내
주소와 위치 정보
상담 버튼 문구
예약 링크
블로그 링크
지도 링크
하단 안내 문구
외부 링크와 버튼의 표시 여부

반대로 다음과 같은 항목은 테마 파일에서 관리한다.

헤더와 푸터의 전체 레이아웃
메인 페이지의 HTML 구조
반응형 디자인
색상, 여백, 글꼴 등 CSS 스타일
애니메이션
특수한 JavaScript 기능
SEO 플러그인과 연동되는 메타 정보

자주 변경되는 텍스트와 링크는 관리자에서 수정할 수 있도록 만들고, 사이트의 구조와 디자인은 테마 파일에서 관리하는 방식으로 구분했다. 이렇게 하면 운영자는 PHP 파일을 직접 수정하지 않고도 필요한 내용을 변경할 수 있으며, 개발자는 전체 레이아웃과 디자인을 안정적으로 유지할 수 있다.