현재 사용하고 있는 테마의 배경을 글의 태그나 카테고리에 따라 다르게 보여지도록 할 수 있는 방법이다. 예를들어, 글의 카테고리가 "워드프레스"라면 본문의 배경에 워드프레스 로고 이미지가 보이고, "요리"라면 요리사진이 배경이미지로 보여지게 하는식이다. 이렇게 하려면, body의 class에 글에 사용된 태그 아이디와 카테고리 이름(이 글에선 카테고리의 slug)이 추가되어야 하는데 아래 코드를 사용하면 간단하다.

사용하고 있는 테마의 function.php를 열어서 맨 하단에 아래를 추가한다.


// body class에 현재 글에 사용된 tag-번호 부여하기
function add_tags_to_body_class( $classes ) {
if( ( is_page() || is_single() )
&& $tags = get_the_tags( get_queried_object_id() ) ){
foreach( $tags as $tag ) {
$classes[] = 'tag-' . $tag->term_id;
}
}
return $classes;
}
add_filter( 'body_class', 'add_tags_to_body_class' );

// body class에 현재 글에 사용된 category-번호 부여하기
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = 'category-' . $category->slug;
return $classes;
}

add_filter('body_class', 'category_id_class');

주목해야 할건 $classes[] = 'tag-' . $tag->term_id; 이다.

$classes[] = $tag->name; 로 쓰면 태그 이름만 나온다.
$classes[] = $tag->term_id; 로 쓰면 태그 아이디만 나온다.
중간에  'tag-' . 를 넣어주면, tag-어쩌구 이렇게 표시된다.

카테고리도 이와같이 응용해서 쓰면되는데, 문제는 한글 선택자를 잘못쓰면 나중에 글씨가 깨지는 오류가 생길것 같아서 못쓰겠다ㅡㅡ; 테스트 해보니 당장 오류가 나진 않는데, 그냥 안전하게 차라리 tag id나 category slug을 사용해서 tag-숫자, category-slug(카테고리 slug는 보통 영어로 지으므로) 식으로 class 선택자를 쓰는게 나을듯 하다. 뭐 조금 불편하지만...

그리고 여러개의 태그나 카테고리 사용시에는 우선순위를 생각하고 정해야 한다. css를 작성할때 태그를 우선으로 보여지게 할지, 아니면 카테고리를 우선으로 할지. 우선으로 할 class에 !important;를 쓰거나 css하단에 위치하도록 해야할것이다.

반응형