지난 글에서는 워드프레스에 커스텀 테마의 기본 파일을 만들고, 테마를 활성화해 임시 헤더와 푸터가 정상적으로 출력되는 것까지 확인했다.
이번에는 정적 HTML로 제작된 메인 페이지를 워드프레스 테마 구조에 맞게 나누고, 자주 변경되는 항목을 관리자에서 수정할 수 있도록 연결했다.
1. 정적 HTML을 워드프레스 파일로 분리하기
기존 HTML 파일은 헤더부터 본문, 푸터까지 하나의 파일 안에 모두 들어 있었다.
워드프레스에서는 공통 영역과 페이지별 영역을 다음과 같이 분리했다.
custom-theme/
├── _astro/
├── inc/
│ └── site-settings.php
├── favicon.svg
├── front-page.php
├── front-page.css
├── functions.php
├── header.php
├── footer.php
├── index.php
└── style.css
각 파일의 역할은 다음과 같다.
header.php: 로고와 상단 메뉴footer.php: 하단 정보, 바로가기, 퀵 메뉴front-page.php: 메인 페이지 본문front-page.css: 메인 페이지에 포함돼 있던 인라인 CSSfunctions.php: 테마 기능, CSS 연결, 메뉴 등록inc/site-settings.php: 관리자용 사이트 설정 화면_astro: 기존 사이트의 CSS와 이미지 파일index.php: 다른 템플릿이 없을 때 사용하는 기본 파일
이렇게 분리하면 헤더나 푸터를 한 번 수정했을 때 모든 페이지에 동일하게 적용된다.
2. 워드프레스 기본 함수를 HTML에 추가하기
기존 HTML을 그대로 복사하는 것만으로는 워드프레스 테마로 정상 작동하지 않는다.
header.php에는 다음과 같은 워드프레스 기본 함수가 필요하다.
<?php wp_head(); ?>
또한 <body> 태그에는 워드프레스가 클래스와 추가 코드를 삽입할 수 있도록 다음 내용을 넣었다.
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
footer.php에서는 닫는 </body> 태그 전에 다음 함수를 추가했다.
<?php wp_footer(); ?>
이 함수들이 빠지면 플러그인의 CSS나 JavaScript가 제대로 불러와지지 않거나, 관리자 툴바가 정상적으로 표시되지 않을 수 있다.
3. 기존 CSS와 이미지 경로 연결하기
기존 사이트는 Astro로 생성돼 _astro 폴더 안에 CSS와 이미지가 들어 있었다.
테마 폴더 안에서도 _astro라는 이름을 그대로 유지했다. 폴더명을 바꿀 수도 있지만, HTML과 CSS에 들어 있는 모든 경로를 함께 수정해야 하기 때문에 우선 원래 이름을 유지하는 편이 안전했다.
기존 HTML에 들어 있던 다음과 같은 절대경로는 워드프레스 테마 경로로 변경했다.
/_astro/example.webp
변경 후에는 다음처럼 테마 폴더를 기준으로 파일을 불러온다.
<?php echo esc_url(get_template_directory_uri()); ?>/_astro/example.webp
CSS 파일은 HTML에 직접 연결하지 않고 functions.php에서 불러오도록 했다.
wp_enqueue_style(
'custom-theme-main',
get_template_directory_uri() . '/_astro/example.css',
array(),
filemtime(get_template_directory() . '/_astro/example.css')
);
filemtime()을 버전값으로 사용하면 CSS 파일이 수정됐을 때 브라우저 캐시 때문에 이전 디자인이 계속 보이는 문제를 줄일 수 있다.
4. Astro의 속성은 삭제하지 않기
원본 HTML에는 다음과 같은 속성이 많이 들어 있었다.
data-astro-cid-xxxxxx
처음에는 불필요한 코드처럼 보이지만, Astro가 생성한 CSS 선택자와 연결되는 값이다.
이 속성을 삭제하면 HTML 구조는 그대로인데도 일부 색상, 여백, 글자 크기, 반응형 디자인이 깨질 수 있다. 따라서 워드프레스로 옮길 때도 원본 속성을 그대로 유지했다.
HTML을 정리한다는 이유로 자동 삭제하거나 일괄 치환하지 않는 것이 안전하다.
5. 메인 페이지 템플릿 만들기
워드프레스에서 사이트의 첫 화면은 front-page.php가 담당한다.
기존 index.html에서 헤더와 푸터를 제외한 본문 영역을 front-page.php로 옮기고, 파일 위아래에는 다음 코드를 넣었다.
<?php get_header(); ?>
<!-- 메인 페이지 내용 -->
<?php get_footer(); ?>
원본 HTML의 <style> 태그 안에 들어 있던 메인 전용 CSS는 front-page.css로 분리했다.
이후 functions.php에서 메인 페이지일 때만 해당 CSS가 로드되도록 설정했다. 다른 페이지에서 불필요한 메인 CSS까지 불러오지 않도록 하기 위해서다.
6. 로고와 상단 메뉴를 관리자에 연결하기
처음에는 원본 HTML에 들어 있던 로고와 메뉴를 그대로 출력했다.
하지만 운영 중에는 메뉴 이름이나 주소, 순서가 바뀔 수 있다. 수정할 때마다 header.php를 열어야 한다면 워드프레스를 사용하는 장점이 줄어든다.
그래서 functions.php에 워드프레스 메뉴 위치를 등록했다.
register_nav_menus(
array(
'primary' => '상단 메뉴',
'footer' => '푸터 메뉴',
)
);
이제 관리자에서 메뉴를 생성하고 상단 메뉴 위치에 지정하면, 기존의 고정 메뉴 대신 관리자에서 만든 메뉴가 출력된다.
메뉴가 아직 등록되지 않은 경우에는 사이트가 비어 보이지 않도록 원래 HTML 메뉴가 기본값으로 출력되게 했다.
로고도 워드프레스의 사용자 정의 로고 기능과 연결했다. 관리자가 로고를 등록하면 해당 로고가 표시되고, 등록하지 않으면 기존 이미지가 출력되는 방식이다.
7. 푸터 바로가기를 관리자 메뉴로 변경하기
푸터에 있는 바로가기 목록도 나중에 이름, URL, 순서가 변경될 가능성이 있다.
이 항목들은 별도의 텍스트 입력칸을 만드는 것보다 워드프레스의 메뉴 기능으로 관리하는 것이 적합했다.
관리자에서 다음 순서로 설정할 수 있다.
모양 → 메뉴로 이동- 새로운 메뉴 생성
- 페이지 또는 사용자 정의 링크 추가
- 탐색 레이블 수정
- 드래그하여 순서 변경
- 메뉴 위치를
푸터 메뉴로 지정 - 메뉴 저장
이제 푸터의 링크 이름이 바뀌거나 새로운 링크가 추가돼도 footer.php를 직접 수정할 필요가 없다.
메뉴를 지정하지 않았을 때는 원래 푸터 링크가 기본값으로 출력된다.
8. 자주 변경되는 정보를 관리자 설정으로 만들기
메뉴 외에도 운영 중 변경될 가능성이 높은 정보가 많았다.
예를 들면 다음과 같다.
- 연락처
- 운영시간
- 휴무일과 안내문구
- 주소와 교통정보
- 상담 버튼 문구
- 외부 예약 링크
- 블로그 링크
- 지도 링크
- 하단 사업자 정보
- 푸터 소개문구
이 내용을 모두 footer.php에 직접 작성하면, 간단한 문구 하나를 바꾸는 데도 FTP로 접속해서 PHP 파일을 수정해야 한다.
이를 해결하기 위해 inc/site-settings.php 파일을 만들고 관리자 왼쪽 메뉴에 사이트 설정 페이지를 추가했다.
운영시간처럼 항목의 개수가 달라질 수 있는 정보는 요일별 입력칸을 고정하지 않고 다음과 같은 형식으로 입력하도록 만들었다.
평일|09:00 - 18:00
토요일|09:00 - 13:00
일요일·공휴일|휴무
이 구조를 사용하면 토요일과 일요일을 각각 표시할 수도 있고, 나중에 주말이라는 항목 하나로 합칠 수도 있다.
평일|09:00 - 18:00
주말|휴무
각 줄의 | 앞부분은 항목명, 뒷부분은 내용으로 출력된다. 항목의 이름과 개수를 자유롭게 바꿀 수 있어 디자인을 다시 수정하지 않고도 여러 상황에 대응할 수 있다.
표시 여부가 필요한 버튼에는 체크 옵션도 추가했다. 사용하지 않는 예약이나 외부 링크는 삭제하지 않고 관리자에서 잠시 숨길 수 있다.
9. 코드에서 관리할 부분과 관리자에서 관리할 부분 구분하기
이번 작업을 하면서 모든 내용을 관리자에서 수정 가능하게 만드는 것이 반드시 좋은 것은 아니라는 점도 확인했다.
관리자에서 관리하기 적합한 항목은 다음과 같다.
- 메뉴 이름과 순서
- 페이지 연결 주소
- 연락처
- 운영시간
- 안내문구
- 외부 링크
- 로고
- 푸터 정보
반대로 파일에서 관리하는 것이 나은 항목도 있다.
- 헤더와 푸터의 전체 레이아웃
- 반응형 구조
- 애니메이션
- CSS 디자인
- HTML 구성
- 특수한 JavaScript 기능
레이아웃까지 관리자에서 자유롭게 수정하도록 만들면 페이지 빌더 수준의 기능이 필요해지고, 오히려 구조가 복잡해질 수 있다.
따라서 자주 변경되는 텍스트와 링크는 관리자에서 관리하고, 디자인과 구조는 테마 파일에서 관리하는 방식으로 나눴다.
10. SEO 관련 코드는 아직 옮기지 않았다
원본 HTML의 <head>에는 다음과 같은 정보가 포함돼 있었다.
- 페이지 제목
- 메타 설명
- canonical 주소
- Open Graph 정보
- 구조화 데이터
- 검색 차단 태그
이 코드를 그대로 header.php에 복사하면 모든 페이지에 동일한 SEO 정보가 출력되거나, 나중에 SEO 플러그인과 중복될 수 있다.
특히 개발용 HTML에 들어 있던 noindex 태그까지 복사하면 완성된 사이트가 검색엔진에 노출되지 않을 수 있다.
따라서 이번 단계에서는 디자인 출력에 필요한 코드만 옮기고, SEO와 AEO 관련 정보는 개별 페이지를 만든 후 별도로 설정하기로 했다.
11. 작업 결과
이번 단계까지 완료한 내용은 다음과 같다.
- 원본 HTML의 헤더·본문·푸터 분리
- 메인 페이지를
front-page.php로 변환 - 원본 CSS와 이미지 연결
- Astro 전용 속성 유지
- 워드프레스 필수 함수 추가
- 관리자용 상단 메뉴 등록
- 관리자용 푸터 메뉴 등록
- 사용자 정의 로고 연결
- 연락처·운영시간·외부 링크 설정 화면 추가
- 푸터와 퀵 메뉴를 관리자 설정에 연결
- SEO 중복 및
noindex복사 방지 - PC와 모바일 화면 출력 확인
이제 공통으로 사용하는 헤더와 푸터는 완성됐다. 앞으로 개별 페이지를 추가해도 동일한 헤더와 푸터가 자동으로 적용된다.
다음 단계에서는 워드프레스에 실제 페이지를 생성하고, 기존 정적 HTML의 서브페이지를 page-{slug}.php 형식의 개별 페이지 템플릿으로 변환할 예정이다.
답글 남기기