Astra Pro로 특정 페이지에 커스텀 Body 클래스 추가하는 방법

WordPress 사이트의 특정 페이지에만 고유한 CSS 스타일을 적용하고 싶으신가요?
가장 깔끔한 방법은 <body> 태그에 커스텀 클래스를 추가하는 것입니다 — 그러면 CSS로 해당 페이지를 정확하게 타겟팅할 수 있습니다.
아래 단계를 따라하면 Astra Pro의 Custom Layouts 기능을 사용해 원하는 페이지(또는 페이지 그룹)에 커스텀 body 클래스를 추가할 수 있습니다 — 코딩 지식이 없어도 됩니다.

개요

WordPress는 이미 자동으로 body에 일부 클래스를 추가합니다 (예: page-id-42). 하지만 때로는
직접 관리할 수 있는 깔끔하고 의미 있는 클래스 (예: special-page)가 필요합니다.
Astra Pro의 Custom Layouts 기능을 사용하면 특정 페이지에 작은 JavaScript 코드를 삽입해,
페이지 로드 시 body에 커스텀 클래스를 추가할 수 있습니다.

작업 흐름:

[Astra Pro → Custom Layouts] → [JavaScript 코드] → [wp_head 훅으로 삽입] → [DOMContentLoaded 시 Body 클래스 추가]

1단계. Astra Pro에서 Custom Layouts 열기

1. WordPress 관리자 대시보드에 로그인합니다.
2. 외모 → Astra Options로 이동합니다.
3. Custom Layouts 모듈을 찾아 Settings를 클릭합니다.
4. Add New를 클릭합니다.

Custom Layouts가 보이지 않는다면 먼저 활성화해야 할 수 있습니다.
외모 → Astra Options → Astra Addons로 이동해 Custom Layouts 토글을 켜주세요.

2단계. Custom Layout 설정하기

새 편집기 화면이 나타납니다. 다음과 같이 입력합니다:

1. 참고용 제목을 입력합니다 (예: Body Class - 특별 페이지).
2. 편집기에서 Code 탭을 클릭하고 아래 코드를 붙여넣습니다:

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.body.classList.add('special-page');
});
</script>

special-page를 원하는 클래스 이름으로 변경하세요.

3단계. 훅(Hook) 설정하기

아래로 스크롤해 Layout Settings 패널을 찾아 다음과 같이 설정합니다:

Layout → Hook
Action → wp_head
Priority → 10

중요: 스크립트가 <head> 안에 삽입되더라도,
document.addEventListener('DOMContentLoaded', ...)로 감쌌기 때문에
DOM이 완전히 파싱된 후에야 실행됩니다.
이렇게 하면 클래스가 추가될 때 document.body가 반드시 존재하며,
wp_footer보다 빨리 실행되어 스타일이 적용되지 않은 화면이 잠깐 보이는 현상(FOUC)도 방지할 수 있습니다.

4단계. 표시 조건 설정하기

Layout Settings 패널에서 Display On을 찾아
body 클래스를 적용할 페이지를 선택합니다.

다음과 같은 조건을 선택할 수 있습니다:

Specific Page — 이름으로 특정 페이지 하나 또는 여러 개 지정
All Pages — 사이트의 모든 페이지에 적용
Front Page — 홈페이지에만 적용
Page Template — 특정 템플릿을 사용하는 모든 페이지

하나의 Custom Layout에서 여러 페이지를 한 번에 추가할 수 있어,
페이지마다 Layout을 따로 만드는 것보다 훨씬 효율적입니다.

5단계. 게시하기

훅 설정과 표시 조건을 모두 설정했으면 오른쪽 상단의 Publish를 클릭합니다.

6단계. 적용 확인하기

Display On에서 선택한 페이지 중 하나를 방문합니다.
페이지 어디서나 마우스 오른쪽 버튼을 클릭하고 검사를 선택합니다 (또는 F12 키).
Elements 탭에서 <body> 태그를 찾습니다.
클래스 목록에 커스텀 클래스가 나타나는지 확인합니다:

<body class="home page-template-default ... special-page">

주의: 페이지 소스 보기로는 확인하지 마세요 —
소스 보기는 JavaScript 실행 전의 HTML을 보여주기 때문에 클래스가 나타나지 않습니다.
항상 검사(Inspect Element)를 사용해 JavaScript 실행 후의 실제 DOM을 확인하세요.

CSS에서 활용하기

이제 CSS에서 해당 페이지들을 정확하게 타겟팅할 수 있습니다:

/* special-page body 클래스가 있는 페이지에만 적용 */
body.special-page .site-header {
    background-color: #f0f4ff;
}

body.special-page h1 {
    font-size: 2.5rem;
    color: #1a1a2e;
}

외모 → 사용자 정의하기 → 추가 CSS 또는 차일드 테마의 스타일시트에 추가하세요.

문제 해결

클래스가 나타나지 않나요? 페이지 소스 보기가 아닌 검사(Inspect Element)로 확인하고 있는지 확인하세요.
여전히 작동하지 않나요? 브라우저 캐시와 캐싱 플러그인 캐시를 모두 지운 후 다시 로드해보세요.
Cloudflare를 사용하고 있나요? 해당 페이지의 Cloudflare 캐시도 Purge해주세요.
엉뚱한 페이지에 클래스가 붙나요? Custom Layout의 Display On 조건을 다시 확인해보세요.

마치며

이제 functions.php를 건드리거나 커스텀 페이지 템플릿을 만들지 않고도,
Astra Pro를 사용해 특정 WordPress 페이지에 커스텀 body 클래스를 추가하는 간단하고 안정적인 방법을 갖게 됐습니다.

프로세스 요약:
Custom Layouts → JavaScript 코드 → wp_head 훅 → 표시 조건 설정 → 커스텀 Body 클래스 완성 ✅

이 방법은 사이트의 나머지 부분에 영향을 주지 않으면서 특정 페이지 그룹에 고유한 스타일을 적용해야 할 때 특히 유용합니다.
깔끔하고, 정확하며, 관리하기도 쉽습니다.