워드프레스 CSS 커스터마이징: functions.php 없이 테마 바꾸는 현실 방법 6가지
워드프레스 테마를 처음 바꾸려고 할 때 검색하면 제일 먼저 나오는 게 functions.php 수정이다. 그 파일을 열었다가 PHP 코드가 가득한 걸 보고 바로 닫았다. 잘못 건드렸다가 흰 화면이 떴다는 경험담을 너무 많이 읽어서 손이 안 갔다. 마치 시계를 처음 뜯어보는 사람한테 태엽부터 분해하라고 하는 것 같은 느낌이었다. 사실 functions.php 없이도 CSS를 충분히 커스터마이징할 수 있다. 내가 실제로 써본 방법들을 현실적인 순서로 정리했다.
첫 번째: 워드프레스 기본 제공 추가 CSS 입력창 쓰기
워드프레스 대시보드에서 외모 > 사용자 정의하기를 열면 맨 아래에 추가 CSS 메뉴가 있다. 이 입력창에 CSS를 넣으면 테마 파일을 직접 건드리지 않고도 스타일이 적용된다. 업데이트해도 날아가지 않고, 저장 전에 미리보기로 확인할 수 있다. 처음 접근했을 때 이걸 왜 이제 알았냐 싶었다. 제일 안전하고 제일 간단한 방법이다. 단점은 코드량이 많아지면 이 한 칸 안에서 관리하기가 답답해진다는 것이다.
/* 워드프레스 추가 CSS 창에 바로 붙여 넣기 */ /* 예시: 본문 글씨 크기와 줄 간격 조정 */ .entry-content p { font-size: 17px; line-height: 1.9; } /* 예시: 포스트 제목 색상 변경 */ .entry-title { color: #2c3e50; } /* 예시: 사이드바 배경색 */ #secondary { background-color: #f8f8f8; padding: 20px; }
두 번째: 자식 테마(Child Theme) 만들어서 style.css에 추가하기
부모 테마 파일을 직접 건드리면 테마 업데이트할 때 수정한 내용이 전부 날아간다. 게임 세이브 파일을 덮어씌우는 것처럼. 자식 테마는 그 문제를 해결한다. 부모 테마를 그대로 두고, 내가 바꾸고 싶은 부분만 자식 테마에서 덮어쓰는 구조다. functions.php 없이 자식 테마의 style.css만으로도 상당한 커스터마이징이 가능하다. 자식 테마 폴더 하나와 파일 두 개만 만들면 된다.
/* 자식 테마 생성 최소 구성 */ /* 1. /wp-content/themes/내테마이름-child/ 폴더 생성 */ /* 2. style.css 파일 생성 - 아래 내용으로 */ /* Theme Name: 내테마이름 Child Template: 부모테마폴더이름 Version: 1.0 */ @import url("../부모테마폴더이름/style.css"); /* 여기서부터 커스텀 CSS 작성 */ body { background-color: #fafafa; } .site-header { border-bottom: 2px solid #333; }
/* 3. functions.php 파일 생성 - 최소한 이 내용이 있어야 부모 스타일 로드됨 */ <?php add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles'); function child_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } ?>
세 번째: 플러그인으로 CSS 관리하기 - Simple Custom CSS
자식 테마 만들기도 번거롭고, 추가 CSS 창은 너무 좁다면 CSS 전용 플러그인이 있다. Simple Custom CSS가 대표적이다. 대시보드에서 플러그인 설치 후 외모 메뉴에 Custom CSS 항목이 생기고, 그 안에서 코드를 관리할 수 있다. 코드 에디터처럼 구문 강조도 되고, 양이 많아도 관리하기 편하다. 마치 메모장 대신 전용 노트앱으로 바꾸는 것처럼 작업 환경이 달라진다. 플러그인 설치가 가능한 환경이라면 추천하는 방법이다.
/* Simple Custom CSS 플러그인 설치 후 사용 예시 */ /* 플러그인 설치: 대시보드 > 플러그인 > 새로 추가 > "Simple Custom CSS" 검색 */ /* 설치 후 외모 > Custom CSS 메뉴 열기 */ /* 예시: 댓글 영역 스타일 변경 */ #comments { border-top: 3px solid #e0e0e0; padding-top: 30px; margin-top: 40px; } /* 예시: 모바일에서 폰트 크기 조정 */ @media (max-width: 768px) { body { font-size: 15px; } h1 { font-size: 22px; } }
네 번째: 개별 포스트나 페이지에만 CSS 적용하기
전체 블로그가 아니라 특정 페이지나 포스트에만 스타일을 적용하고 싶을 때가 있다. 랜딩 페이지나 특별한 구성의 포스트가 그런 경우다. 워드프레스 글 편집 화면에서 HTML 편집 모드로 전환하면 포스트 본문 안에 style 태그를 직접 넣을 수 있다. 이렇게 넣은 스타일은 그 포스트에만 영향을 준다. 마치 건물 전체를 리모델링하는 게 아니라 특정 방 하나만 도배를 새로 하는 것과 같다.
<!-- 포스트 HTML 편집 모드에서 상단에 삽입 --> <style> /* 이 포스트에서만 적용되는 스타일 */ .special-box { background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 16px 20px; margin: 20px 0; } .highlight-text { background-color: #fff0f0; padding: 2px 6px; border-radius: 3px; font-weight: bold; } </style> <!-- 본문에서 사용 --> <div class="special-box"> 이 영역은 이 포스트에서만 특별한 배경색이 적용됩니다. </div> 이 문장에서 <span class="highlight-text">중요한 단어</span>를 강조합니다.
다섯 번째: 워드프레스 사이트 편집기(Site Editor)에서 블록 스타일 변경
블록 에디터(Gutenberg)를 쓰는 최신 테마라면 사이트 편집기에서 블록별 스타일을 GUI로 변경할 수 있다. 외모 > 편집기(또는 사이트 편집기)를 열면 헤더, 푸터, 버튼, 텍스트 등 각 블록에 색상, 폰트, 간격을 코드 없이 바꿀 수 있다. 코드가 불편한 사람에게 가장 진입장벽이 낮은 방법이다. 다만 지원하는 테마가 한정돼 있고, 세밀한 스타일 조정보다는 전체 톤 변경에 적합하다. 가구를 직접 짜는 게 아니라 기성 가구 중에서 색상과 재질을 고르는 것에 가깝다.
/* 사이트 편집기 사용 순서 (코드 없음) */ 1. 대시보드 > 외모 > 편집기 클릭 2. 화면 왼쪽 패널에서 스타일 > 편집 아이콘 클릭 3. 색상, 타이포그래피, 레이아웃 섹션에서 원하는 값 변경 4. 저장 버튼 클릭 /* 사이트 편집기에서 지정한 값은 theme.json을 통해 관리되며 테마 업데이트에 영향받지 않음 */
여섯 번째: 인라인 style 속성으로 특정 요소 즉시 바꾸기
하나의 요소만 급하게 바꿔야 할 때, CSS 파일이나 별도 입력창을 열 것도 없이 해당 태그 안에 style 속성을 직접 넣는 방법이 있다. HTML 편집 모드에서 가능하다. 지저분하고 유지보수가 어렵지만, 빠르게 한 곳만 바꿔야 할 때 현실적으로 쓰게 된다. 급하게 문서 한 곳에 수정 표시를 포스트잇으로 붙여두는 것처럼. 장기적으로 쌓이면 나중에 관리가 힘들어지기 때문에 임시방편으로만 쓰고 나중에 정리하는 게 좋다.
<!-- 인라인 스타일로 즉시 적용하는 예시 --> <p style="color: #e74c3c; font-weight: bold; font-size: 18px;"> 이 문단은 붉은색 굵은 글씨로 표시됩니다. </p> <div style="background-color: #ecf0f1; padding: 20px; border-radius: 6px; margin: 20px 0;"> 배경색이 있는 구분 영역 </div> <img src="이미지URL" style="border: 3px solid #333; border-radius: 8px; max-width: 100%;" alt="이미지설명">
느낀점
functions.php 건드리기가 무서워서 시작한 우회 방법 탐색이었는데, 6가지를 쓰고 보니 오히려 이 방법들이 더 나은 상황이 많다는 걸 알게 됐다. 시계 태엽을 몰라도 시간은 볼 수 있고, 건물 구조를 몰라도 도배는 할 수 있듯이. 코드의 깊은 곳까지 들어가지 않아도 원하는 결과를 낼 수 있는 방법이 워드프레스 안에 생각보다 많이 준비돼 있었다. 처음엔 그걸 몰라서 무조건 어렵게만 돌아갔다. 지금은 상황에 따라 추가 CSS 창, 자식 테마, 인라인 style을 골라서 쓴다. 하나만 알면 모든 상황에 그것만 쓰려 하게 되는데, 6가지를 알고 나니 적합한 걸 고르는 판단이 생겼다. 그 판단력이 생기는 게 기술보다 더 중요한 자산이라는 걸 이번에 느꼈다.
- WordPress 공식 문서 - Child Themes: developer.wordpress.org
- MDN Web Docs - CSS Custom Properties: developer.mozilla.org
- Chrome DevTools 공식 가이드: developer.chrome.com