워드프레스 테마를 처음 바꾸려고 할 때 검색하면 제일 먼저 나오는 게 functions.php 수정이다. 그 파일을 열었다가 PHP 코드가 가득한 걸 보고 바로 닫았다. 잘못 건드렸다가 흰 화면이 떴다는 경험담을 너무 많이 읽어서 손이 안 갔다. 시계를 처음 뜯어보는 사람한테 태엽부터 분해하라고 하는 것 같은 느낌이었다.
그런데 돌아보면 functions.php를 맨 처음 알려주는 글들이 좀 무책임하다는 생각도 든다. 진입장벽이 낮은 방법이 분명히 존재하는데, 왜 가장 위험한 방법을 먼저 알려주는 걸까. 워드프레스 안에는 코드의 깊은 곳까지 들어가지 않아도 원하는 결과를 낼 수 있는 방법이 생각보다 많이 준비되어 있다. 내가 실제로 써본 방법들을 현실적인 순서로 정리했다.
추가 CSS 입력창, 제일 먼저 써봐야 한다
워드프레스 대시보드에서 외모 > 사용자 정의하기를 열면 맨 아래에 추가 CSS 메뉴가 있다. 이 입력창에 CSS를 넣으면 테마 파일을 직접 건드리지 않고도 스타일이 적용된다. 업데이트해도 날아가지 않고, 저장 전에 미리보기로 확인할 수 있다. 처음 접근했을 때 이걸 왜 이제 알았냐 싶었다. 제일 안전하고 제일 간단한 방법이다.
단점은 코드량이 많아지면 이 한 칸 안에서 관리하기가 답답해진다는 것이다. 스크롤이 길어지고, 검색도 안 되고, 코드 강조도 없다. 처음 시작할 때는 최적이지만 블로그가 커질수록 한계가 온다. 그때 다음 방법으로 넘어가면 된다.
자식 테마, 업데이트가 무서울 때의 정답
부모 테마 파일을 직접 건드리면 테마 업데이트할 때 수정한 내용이 전부 날아간다. 게임 세이브 파일을 덮어씌우는 것처럼. 자식 테마는 그 문제를 해결한다. 부모 테마를 그대로 두고, 내가 바꾸고 싶은 부분만 자식 테마에서 덮어쓰는 구조다.
처음엔 자식 테마라는 개념 자체가 낯설었다. 그런데 원리를 이해하고 나면 오히려 이게 더 안전하다는 게 보인다. 부모 테마는 건드리지 않고 내 커스터마이징만 별도 공간에 쌓아두는 것이다. 나중에 정리하거나 원복하기도 쉽다. functions.php 없이 자식 테마의 style.css만으로도 상당한 커스터마이징이 가능하다는 점도 나중에야 알았다.
주의할 점 하나. 자식 테마를 만들 때 부모 테마 폴더 이름을 정확히 지정해야 한다. 이걸 틀리면 스타일이 전혀 적용되지 않는다. 당연한 말처럼 들리지만 처음 만들어볼 때 폴더 이름 하나 때문에 한참 헤맸다. 대시보드에서 테마 세부 정보를 보면 폴더 이름을 확인할 수 있다.
플러그인으로 CSS 관리하기
자식 테마 만들기도 번거롭고, 추가 CSS 창은 너무 좁다면 CSS 전용 플러그인이 있다. Simple Custom CSS가 대표적이다. 대시보드에서 설치 후 코드 에디터처럼 구문 강조도 되고, 양이 많아도 관리하기 편하다. 메모장 대신 전용 노트앱으로 바꾸는 것처럼 작업 환경이 달라진다.
다만 플러그인이 늘어날수록 관리 포인트가 늘어난다는 점을 감수해야 한다. 플러그인도 업데이트가 필요하고, 간혹 다른 플러그인과 충돌이 생기기도 한다. CSS 하나 때문에 플러그인을 추가하는 게 아깝다고 느껴진다면 추가 CSS 창이나 자식 테마 쪽이 낫다.
특정 페이지에만 CSS를 적용하고 싶을 때
전체 블로그가 아니라 특정 페이지나 포스트에만 스타일을 적용하고 싶을 때가 있다. 랜딩 페이지나 특별한 구성의 포스트가 그런 경우다. 워드프레스 글 편집 화면에서 HTML 편집 모드로 전환하면 포스트 본문 안에 style 태그를 직접 넣을 수 있다. 건물 전체를 리모델링하는 게 아니라 특정 방 하나만 도배를 새로 하는 것과 같다.
이 방법은 편리하지만 한계가 있다. 같은 스타일을 여러 포스트에 적용하면 나중에 수정할 때 하나하나 찾아서 바꿔야 한다. 한두 개일 때는 괜찮지만 포스트가 늘어나면 관리가 불편해진다. 처음부터 범위를 고려하고 방법을 선택하는 게 낫다.
블록 에디터를 쓴다면 사이트 편집기 먼저 확인해라
블록 에디터를 쓰는 최신 테마라면 사이트 편집기에서 블록별 스타일을 GUI로 변경할 수 있다. 코드가 불편한 사람에게 가장 진입장벽이 낮은 방법이다. 다만 지원하는 테마가 한정되어 있고, 세밀한 스타일 조정보다는 전체 톤 변경에 적합하다. 가구를 직접 짜는 게 아니라 기성 가구 중에서 색상과 재질을 고르는 것에 가깝다.
블록 테마가 아닌 클래식 테마를 쓴다면 이 메뉴 자체가 보이지 않을 수 있다. 사이트 편집기가 없다고 당황할 필요 없다. 테마의 종류에 따라 사용할 수 있는 방법이 달라질 뿐이다.
인라인 style, 임시방편으로만
하나의 요소만 급하게 바꿔야 할 때, HTML 편집 모드에서 해당 태그 안에 style 속성을 직접 넣는 방법이 있다. 급하게 문서 한 곳에 수정 표시를 포스트잇으로 붙여두는 것처럼 빠르게 처리할 수 있다. 그런데 이 방법을 남발하면 나중에 유지보수가 힘들어진다. 스타일이 HTML 여기저기 흩어져서 수정이 필요할 때 어디를 봐야 하는지 알 수가 없다.
임시방편으로 쓰고 나중에 정리하는 게 좋다고 말하지만, 사실 "나중에 정리"는 잘 안 된다. 바빠서, 잊어버려서, 일단 작동하니까. 처음부터 정식 방법으로 넣는 습관을 들이는 게 장기적으로 낫다.
여섯 가지를 알고 나서 생긴 것
functions.php 건드리기가 무서워서 시작한 우회 방법 탐색이었는데, 여러 방법을 써보고 나니 오히려 이 방법들이 더 나은 상황이 많다는 걸 알게 됐다. 시계 태엽을 몰라도 시간은 볼 수 있고, 건물 구조를 몰라도 도배는 할 수 있듯이. 코드의 깊은 곳까지 들어가지 않아도 원하는 결과를 낼 수 있는 방법이 워드프레스 안에 생각보다 많이 준비되어 있었다.
지금은 상황에 따라 추가 CSS 창, 자식 테마, 인라인 style을 골라서 쓴다. 하나만 알면 모든 상황에 그것만 쓰려 하게 되는데, 여러 방법을 알고 나니 적합한 걸 고르는 판단이 생겼다. 그 판단력이 생기는 게 기술보다 더 중요한 자산이라는 걸 이번에 느꼈다.
그리고 한 가지 더. 방법을 아는 것보다 범위를 먼저 파악하는 것이 중요하다. 스타일이 전체에 적용되어야 하는지, 특정 페이지에만인지, 한 요소에만인지. 범위를 파악하고 나면 방법이 자연스럽게 결정된다.
- MDN Web Docs - CSS Custom Properties: developer.mozilla.org
- Chrome DevTools 공식 가이드: developer.chrome.com