admin웹사이트를 만들다 보면 “제공되는 기본 테마 디자인이 마음에 안 드는데, 내가 직접 커스텀할 수는 없을까?”라는 고민을 하게 됩니다.
워드프레스 7.x 버전에서도 여전히 수많은 인기 블로그와 기업 사이트가 클래식 테마(PHP/CSS 기반) 방식을 사용하고 있습니다. 관리자 화면 좌측 메뉴에 모양 > 테마 파일 편집기나 사용자 정의가 보이는 환경이라면 바로 이 가이드가 정답입니다.
복잡한 개발 지식 없이도 안전하게 내 입맛대로 테마를 수정하고, 디자인 디테일을 완성하는 실전 가이드를 단계별로 알아봅시다!
1. 클래식 테마의 구조: 어떤 파일이 작동하고 있을까?
테마를 수정하기 전에 각 파일이 무슨 역할을 하는지 아주 기본만 알아두면 작업이 훨씬 쉬워집니다.
클래식 워드프레스 테마는 쉽게 말해 “HTML 조각들과 디자인 옷(CSS)”의 결합입니다.
style.css(스타일시트): 사이트의 폰트, 색상, 여백, 레이아웃 크기를 결정하는 디자인 파일입니다.functions.php(테마 기능): 테마의 엔진 역할을 하며, 외부 폰트나 스크립트를 불러오고 새로운 기능을 추가합니다.header.php/footer.php: 모든 페이지의 상단(로고, 메뉴)과 하단(저작권, 사업자 정보)에 공통으로 나타나는 파일입니다.index.php/single.php: 메인 목록 화면과 포스트 상세 페이지를 그려주는 템플릿 파일입니다.
2. [STEP 1] 작업 전 필수! 사이트 백업하기
클래식 테마 수정 시 코드 하나, 세미콜론(;) 하나만 실수로 지워도 사이트 전체가 백색 화면(White Screen)으로 바뀔 수 있습니다. 따라서 수정 전 백업은 선택이 아닌 필수입니다.
초보자용 백업 진행 방법
- 워드프레스 관리자 메뉴에서 [플러그인] > [새 플러그인 추가]로 이동합니다.
UpdraftPlus를 검색하여 설치 후 활성화합니다.- [설정] > [UpdraftPlus 백업] 메뉴에서 [지금 백업] 버튼을 눌러 안전하게 백업본을 생성합니다.
3. [STEP 2] 코드 수정 없이 안전하게 디자인 바꾸기 (사용자 정의 활용)
모양 > 테마 파일 편집기에서 직접 코드를 고치는 것은 매우 위험합니다. 대신 워드프레스가 공식 제공하는 사용자 정의 메뉴를 활용하는 것이 훨씬 안전합니다.
- 좌측 메뉴에서 [모양] > [사용자 정의]를 클릭합니다.
- 사이트 아이덴티티: 로고 이미지 업로드, 사이트 제목 및 파비콘(Favicon) 등록
- 색상 및 헤더: 메인 포인트 컬러 지정 및 상단 헤더 스타일 조정
- 추가 CSS: 원하는 디자인 코드를 입력하고 실시간으로 오른쪽 미리보기 화면을 보면서 안전하게 테스트합니다.
CSS
/* 추가 CSS 메뉴에 입력하는 초보자용 예시 코드 */
/* 버튼에 마우스 올렸을 때 부드럽게 떠오르는 효과 */
.button, btn {
transition: all 0.3s ease;
}
.button:hover, btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
4. [STEP 3] 상단 메뉴와 사이드바 위젯 구성하기
클래식 테마에서는 메뉴와 사이드바(위젯)를 전용 관리 메뉴에서 훨씬 직관적으로 세팅할 수 있습니다.
1) 상단 내비게이션 메뉴 세팅
- [모양] > [메뉴] 접속
- 메뉴 이름을 입력하고 [메뉴 생성] 클릭
- 좌측에서 주요 페이지나 카테고리를 체크한 뒤 ‘메뉴에 추가’ 누르기
- 드래그 앤 드롭으로 순서를 바꾼 뒤 ‘주 메뉴(Primary Menu)’ 위치에 체크하고 저장
2) 사이드바 및 푸터 위젯 배치
- [모양] > [위젯] 접속
- 최근 글, Popular Posts, 검색창, 카테고리 목록 블록을 ‘사이드바’ 영역에 드래그하여 원하는 순서로 배치
5. [STEP 4] 실시간 모바일 반응형 및 SEO 기본 세팅
방문자 대부분이 스마트폰으로 접속하므로, 모바일 화면 반응형 점검과 검색엔진 수집 세팅을 마쳐야 합니다.
| 세팅 항목 | 설정 위치 및 방법 | 기대 효과 |
| 모바일 반응형 점검 | 사용자 정의 화면 하단 스마트폰 아이콘 클릭 | 모바일 화면에서 메뉴나 이미지가 깨지지 않는지 확인 |
| 고유주소(Permalink) | [설정] > [고유주소] > ‘글 이름(Post name)’ 선택 | 구글 SEO 평가에 최적화된 URL 구조 완성 |
| 검색엔진 차단 해제 | [설정] > [읽기] > ‘검색엔진 차단’ 체크 해제 | 구글, 네이버 등 크롤러의 수집 허용 |
6. [STEP 5] 만약 사이트가 먹통이 되었을 때의 대처법
style.css나 functions.php 파일을 직접 수정하다가 화면이 하얗게 변하거나 접속이 불가능해져도 당황할 필요 없습니다.
- 웹 호스팅 관리자 페이지의 ‘파일 관리자’ 또는 FTP 프로그램에 접속합니다.
wp-content/themes/내테마이름/폴더로 이동합니다.- 방금 고쳤던
functions.php나style.css파일을 열어 문제가 된 코드를 지우거나, 미리 다운로드받아둔 원본 파일로 덮어쓰기 하면 10초 만에 복구됩니다.
이제 진짜 나만의 워드프레스 사이트를 완성해보세요!
어렵게 느껴졌던 워드프레스 클래식 테마 커스텀도 백업을 해두고 사용자 정의 메뉴부터 차근차근 접근하면 생각보다 손쉽게 나만의 맞춤 디자인을 구현할 수 있습니다.
오늘 안내해 드린 백업 세팅부터 시작해 보세요. 직접 수정한 색상과 메뉴, 스타일이 내 웹사이트에 예쁘게 적용되는 즐거움을 꼭 경험해보시길 바랍니다!
