WordPress 커스텀 바디 클래스 추가하기

WordPress, GeoDirectory, WooCommerce, Buddypress, BBpress 등에 대한 예제 포함...

WordPress 바디에 클래스 추가하기

많은 경우, 자동 생성된 클래스만으로는 충분하지 않아 커스텀 클래스를 추가해야 할 수 있습니다.

커스텀 클래스를 추가하려면 WordPress 필터를 사용합니다:

  1. body_class

아래에서 가장 많이 요청된 예제들의 스니펫을 소개합니다.

하지만 먼저 초보자들에게 바디 클래스에 대해 좀 더 설명하기 위한 간단한 소개를 드리겠습니다.

WordPress 커스텀 바디 클래스는 모든 WordPress 개발자가 조만간 다루게 될 주제입니다.

대부분의 경우 몇 줄의 코드만 있으면 충분하기 때문에, 이를 위해 플러그인을 사용하는 것은 과한 방법입니다.

그렇다면, WordPress 커스텀 Body 클래스는 어떻게 추가할까요?

WordPress에는 body_class 함수 와 body_class 필터 (훅)가 있습니다.

body_class 함수는 WordPress가 자동으로 생성한 클래스들을 웹사이트의 body 태그에 추가하기 위해 테마에서 사용됩니다.

테마의 header.php 파일에 추가하는 방법은 다음과 같습니다:

<body <?php body_class($class); ?>>

방문한 페이지에 따라 WordPress는 특정 클래스를 출력합니다.

1) 기본 "Hello World" 포스트의 body 클래스는 다음과 같습니다:

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

2) 샘플 페이지의 body 클래스는 다음과 같습니다:

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar customize-support">

3) 카테고리 아카이브 페이지의 body 클래스는 다음과 같습니다:

<body class="archive category category-uncategorized category-1 logged-in admin-bar no-sidebar hfeed customize-support">

4) 작성자 아카이브 페이지의 body 클래스는 다음과 같습니다:

<body class="archive author author-admin author-1 logged-in admin-bar no-sidebar hfeed customize-support">

5) 홈페이지의 body 클래스 (홈페이지가 있다고 가정할 경우)

<body class="home blog logged-in admin-bar no-sidebar hfeed customize-support">

위에서 제공된 5가지 예시는 관리자 사용자가 로그인한 상태에서 대부분의 기본 테마에 공통적으로 적용됩니다.

로그아웃 상태에서는 클래스가 약간 다르게 표시됩니다.

HTML의 클래스는 CSS를 통해 웹 페이지를 스타일링하는 데 사용됩니다.

다음 코드 스니펫을 functions.php 파일에 복사하면, 웹사이트 마크업에 새로운 커스텀 body 클래스가 추가됩니다.

body_class 필터를 사용할 것입니다.

WordPress 커스텀 Body 클래스 추가하기

function my_custom_body_class($classes) {<br />
// add 'my-class' to the default autogenerated classes, for this we need to modify the $classes array.<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class');

이렇게 하면 웹사이트의 모든 페이지의 body 태그에 새 클래스 "my-class"가 추가됩니다.

<body class="home blog logged-in admin-bar no-sidebar hfeed my-class customize-support">

클래스를 2개 이상 추가해야 한다면 어떻게 하나요?

WordPress 커스텀 body 클래스 2개 이상 추가하기

function my_custom_body_classes($classes) {<br />
// add 'my-class' and 'my-class-2' to the default autogenerated classes, for this we need to modify the $classes array.<br />
$classes[] = 'my-class';<br />
$classes[] = 'my-class-2';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom classes via body_class filter<br />
add_filter('body_class','my_custom_body_classes');

결과는 다음과 같습니다:

<body class="home blog logged-in admin-bar no-sidebar hfeed my-class my-class-2 customize-support">

특정 페이지에만 CSS로 커스텀 스타일을 적용하기 위해 body 클래스를 추가하고 싶다면 어떻게 하나요?

특정 페이지에 WordPress 커스텀 body 클래스 추가하기

이는 여러 가지 방법으로 수행할 수 있습니다:

1) 페이지 ID를 사용하여 커스텀 body 클래스 추가하기

function my_custom_body_class_id($classes) {<br />
// add 'my-class' only to page with ID 1.<br />
if ( is_page( '1' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_id');

ID가 2인 페이지에는 이 결과가 적용되며, 다른 모든 페이지에는 커스텀 클래스가 추가되지 않습니다.

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar my-class customize-support">

2) 페이지 슬러그를 사용하여 커스텀 body 클래스 추가하기

function my_custom_body_class_slug($classes) {<br />
// add 'my-class' only to page with slug contact-form.<br />
if ( is_page( 'contact-form' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_slug');

이렇게 하면 슬러그가 contact-form인 페이지에 커스텀 클래스 "my-class"가 추가되며, 다른 모든 페이지에는 커스텀 클래스가 추가되지 않습니다.

3) 페이지 제목을 사용하여 커스텀 body 클래스 추가하기

function my_custom_body_class_title($classes) {<br />
// add 'my-class' only to page with title Contact Form.<br />
if ( is_page( 'Contact Form' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_title');

이렇게 하면 제목이 Contact Form인 페이지에 커스텀 클래스 "my-class"가 추가되며, 다른 모든 페이지에는 커스텀 클래스가 추가되지 않습니다.

4) 페이지 템플릿을 사용하여 커스텀 body 클래스 추가하기

function my_custom_body_class_template($classes) {<br />
// add 'my-class' only to pages using my custom template.<br />
if ( is_page_template( 'my-custom-page-template' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_template');

이렇게 하면 my-custom-page-template 템플릿을 사용하는 페이지에 커스텀 클래스 "my-class"가 추가됩니다. 다른 모든 페이지에는 커스텀 클래스가 추가되지 않습니다.

카테고리 또는 태그 페이지에도 ID 또는 카테고리/태그 슬러그를 통해 커스텀 클래스를 추가할 수 있습니다.

카테고리 또는 태그 아카이브에 WordPress 커스텀 body 클래스 추가하기

1) 카테고리

function my_custom_body_class_category($classes) {<br />
// add 'my-class' only to the my-category archive.<br />
if ( is_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_category');

2) 태그

function my_custom_body_class_tag($classes) {<br />
// add 'my-class' only to the my-tag archive.<br />
if ( is_tag( 'my-tag' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_tag');

이렇게 하면 my-category 카테고리와 my-tag 태그의 아카이브 페이지에만 커스텀 body 클래스가 추가됩니다.

my-category 카테고리의 모든 게시물 단일 페이지 또는 my-tag 태그가 있는 모든 게시물 단일 페이지에 커스텀 body 클래스를 추가할 수도 있습니다.

in_catgeory 및 has_tag 함수를 사용할 것입니다.

1) 카테고리 (아카이브 페이지 및 단일 페이지 모두)

function my_custom_body_class_in_category($classes) {<br />
// add 'my-class' to the my-category archive and single posts of the category.<br />
if ( in_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_in_category');

2) 태그 (아카이브 페이지 및 단일 페이지 모두)

function my_custom_body_class_has_tag($classes) {<br />
// add 'my-class' to the my-tag archive and single posts with that tag.<br />
if ( has_tag( 'my-tag' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_has_tag');

이 마지막 두 가지 예시는 아카이브 페이지와 단일 페이지 모두에 커스텀 클래스를 추가합니다.

각 게시물에 카테고리 이름을 WordPress 커스텀 body 클래스로 추가하기

각 게시물에 카테고리의 슬러그 이름을 커스텀 body 클래스로 추가하려면 다음 코드 스니펫이 필요합니다: 

function my_custom_body_class_category_in_single($classes) {<br />
     if (is_single() || is_category()) {<br />
       global $post;<br />
       foreach((get_the_category($post->ID)) as $category) {<br />
         $classes[] = $category->category_nicename;<br />
       }<br />
     }<br />
     return $classes;<br />
   }<br />
add_filter('body_class','my_custom_body_class_category_in_single');

예를 들어, "여행" 카테고리의 게시물을 방문하는 경우 위 스니펫은 body 클래스 Travel을 추가하므로 각 카테고리의 게시물을 서로 다르게 스타일링할 수 있습니다.

모바일 기기에서 방문할 때 WordPress 커스텀 body 클래스 추가하기

다음을 사용하면 쉽게 할 수 있습니다. wp_is_mobile 함수. 

function my_custom_body_class_mobile( $classes ) {<br />
    if ( wp_is_mobile() ) {<br />
        $classes[] = 'mobile';<br />
    }<br />
    return $classes;<br />
}<br />
add_filter( 'body_class', 'my_custom_body_class_mobile' );

커스텀 body 클래스는 플러그인이 생성한 1개 또는 모든 페이지에도 추가할 수 있습니다 (플러그인에 따라 다름).

GeoDirectory

GeoDirectory는 자체 커스텀 body 클래스를 추가합니다. 예를 들어 모든 GeoDirectory 페이지에는 body 클래스 geodir-page가 추가됩니다.

고급 검색 및/또는 커스텀 포스트 타입 애드온이 설치된 경우 다음 클래스들이: geodir_advance_search 및 geodir_custom_posts 각각 추가됩니다.

GD 홈 페이지 예시:

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

리스팅 페이지(커스텀 포스트 타입 또는 카테고리 아카이브)에서는 각 커스텀 포스트 타입마다 다른 클래스를 확인할 수 있습니다.

예를 들어 Places에서는 다음과 같은 클래스가 있습니다. post-type-archive-gd_place.

리스팅 상세 페이지에서도 사용된 각 Custom Post Type에 따라 다른 클래스를 확인할 수 있습니다. 예를 들어 Places에서는 다음과 같습니다: single-gd_place.

하지만 경우에 따라 다른 커스텀 바디 클래스가 필요할 수도 있습니다. 몇 가지 예를 살펴보겠습니다:

1) 위치 페이지에 커스텀 바디 클래스 추가

// add extra class via body_class filter<br />
add_filter('body_class', 'gd_location_custom_body_class');</p>
<p>function gd_location_custom_body_class($classes)<br />
{<br />
if (geodir_is_page('location')) {<br />
$classes[] = 'gd-location';<br />
}<br />
// return the modified $classes array<br />
return $classes;<br />
}

동일한 조건부 태그 

geodir_is_page()
는 모든 GeoDirectory 페이지에 사용할 수 있습니다. 예를 들어 미리보기 페이지의 경우:

2) 리스팅 미리보기 페이지에 커스텀 바디 클래스 추가

// add extra class via body_class filter<br />
add_filter('body_class', 'gd_preview_custom_body_class');</p>
<p>function gd_preview_custom_body_class($classes)<br />
{<br />
if (geodir_is_page('preview')) {<br />
$classes[] = 'gd-preview';<br />
}<br />
// return the modified $classes array<br />
return $classes;<br />
}

3) 커스텀 바디 클래스를 가격 패키지별 상세 페이지에 추가

 // add extra custom class via body_class filter<br />
add_filter('body_class','gd_price_custom_body_class');<br />
function gd_price_custom_body_class($classes) {<br />
global $post;<br />
if ( $post->package_id == 1) {<br />
$classes[] = 'price-1';<br />
}<br />
elseif ( $post->package_id == 2) {<br />
$classes[] = 'price-2';<br />
}<br />
else {}<br />
// return the modified $classes array<br />
return $classes;<br />
}

4) 커스텀 바디 클래스를 검색된 CPT별 검색 페이지에 추가

add_filter('body_class','gd_search_cpt_custom_body_class');</p>
<p>function gd_search_cpt_custom_body_class($classes) {<br />
if (isset($_GET['stype']) == 'gd_place') {<br />
$classes[] = 'search_gd_place';<br />
}<br />
return $classes;<br />
}

WooCommerce

1) 모든 WooCommerce 페이지에 커스텀 바디 클래스 추가

function my_custom_body_class_woo($classes) {<br />
// add 'my-class' to all woocom pages.<br />
if ( is_woocommerce() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo');

2) 쇼핑 페이지에만 커스텀 바디 클래스 추가

function my_custom_body_class_woo_shop($classes) {<br />
// add 'my-class' only to the shop page.<br />
if ( is_shop() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_shop');

3) 상품 카테고리 페이지에 커스텀 바디 클래스 추가

function my_custom_body_class_woo_cat($classes) {<br />
// add 'my-class' only to the product category archives.<br />
if ( is_product_category() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_cat');

4) 특정 상품 카테고리 페이지에 커스텀 바디 클래스 추가

function my_custom_body_class_woo_cat_a($classes) {<br />
// add 'my-class' only to a specific product category archive.<br />
if ( is_product_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_cat_a');

5) 상품 페이지에 커스텀 바디 클래스 추가

function my_custom_body_class_woo_prod($classes) {<br />
// add 'my-class' to product pages.<br />
if ( is_product() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_prod');

6) 특정 상품 페이지에 커스텀 body 클래스 추가하기

function my_custom_body_class_woo_prod_a($classes) {<br />
// add 'my-class' only to the my-product single page.<br />
if ( is_product( 'my-product' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_prod_a');

다음과 같이 WooCommerce 조건부 태그는 다양하게 제공됩니다:

  • 태그 아카이브를 위한 is_product_tag()
  • 장바구니 페이지를 위한 is_cart()
  • 결제 페이지를 위한 is_checkout()
  • 고객 계정 페이지를 위한 is_account_page()

전체 목록은 여기에서 확인할 수 있습니다: https://docs.woothemes.com/document/conditional-tags/

다른 플러그인에서 생성한 페이지에 WordPress 커스텀 body 클래스 추가하기

조건부 태그를 제공하는 모든 플러그인에서 동일하게 적용할 수 있습니다.

예를 들어, bbPress의 조건부 태그는 여기에서 확인할 수 있습니다: https://codex.bbpress.org/bbpress-conditional-tags/

예시가 필요하신가요?

1) 모든 bbPress 페이지에 커스텀 body 태그를 추가하려면 다음이 필요합니다:

function my_custom_body_class_bbpress($classes) {<br />
// add 'my-class' only to bbpress page.<br />
if ( is_bbpress() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_bbpress');

BuddyPress의 조건부 태그와 대부분의 인기 플러그인에 대한 조건부 태그도 찾아볼 수 있습니다.

Body 클래스 제거하기

필터를 통해 추가할 수 있는 것처럼 제거도 가능합니다:

function remove_body_class( $classes ) {</p>
<p>foreach ( $classes as $key =&amp;amp;gt; $value ) {<br />
if ( $value == 'my-class' ) unset( $classes[ $key ] );<br />
}</p>
<p>return $classes;</p>
<p>}<br />
add_filter( 'body_class', 'remove_body_class' );

WordPress 웹사이트에서 body 클래스를 추가하거나 제거하는 데 어려움을 겪고 계신가요? 아래 댓글에 구체적인 예시를 요청해 주시면 최대한 답변해 드리겠습니다!

GeoDirectory의 강력한 기능을 활용하세요!

지금 바로 온라인 비즈니스를 시작하세요

오늘 가입하세요!

뉴스레터 - 최신 소식을 받아보세요!

최신 뉴스, 팁, 독점 콘텐츠를 받은 편지함으로 직접 받아보세요.

Paolo 작성

AyeCode LTD의 공동 창업자이자 마케팅 총괄인 Paolo Tajani는 AyeCode LTD, 비즈니스 파트너 Stiofan과 함께 GeoDirectory, UsersWP, GetPaid 등 주요 WordPress 플러그인을 개발하고 있습니다. 2008년 WordPress와 인연을 맺은 Paolo는 2011년 Stiofan O'Connor와 손을 잡았습니다. 두 사람은 함께 다양한 성공적인 테마와 플러그인을 기획·마케팅하며, 현재 100,000개 이상의 웹사이트에서 활발히 사용되고 있습니다.

20% 할인 혜택
서두르세요! 만료되기 전에 20% 할인을 받으세요. 20% 할인 받기