워드프레스 Body 클래스에 카테고리 ID 추가하기

워드프레스에서 특정 카테고리 글들의 스타일을 다르게 지정하고 싶은 경우 Body 클래스에 카테고리 ID를 추가하면 카테고리별로 스타일을 다르게 지정할 수 있습니다. 이 글에서는 워드프레스 Body 클래스에 카테고리 ID 추가하는 방법에 대해 살펴봅니다.

워드프레스 Body 클래스에 카테고리 ID 추가하는 방법

워드프레스 Body 클래스에 카테고리 ID 추가하기

워드프레스의 body_class 함수는 현재 열람하고 있는 페이지의 유형에 대한 정보를 담고 있는 다양한 클래스를 추가하는 유용한 기능을 합니다. 기본적으로 body 태그에는 포스트의 현재 카테고리(또는 카테고리들)에 대한 클래스를 포함하지 않습니다.

다음 코드를 사용하여 body 및 post 클래스에 카테고리 ID를 추가할 수 있습니다.

// Add Category Id to WordPress Body and Post Class
function category_id_class($classes) {
      global $post;
      foreach((get_the_category($post->ID)) as $category)
         $classes [] = 'cat-' . $category->cat_ID . '-id';           
      return $classes;
   }
   add_filter('post_class', 'category_id_class');
   add_filter('body_class', 'category_id_class');

카테고리 'nice' 이름을 body 클래스에 추가하고 싶은 경우에는 다음과 같은 코드를 사용할 수 있습니다.

// Add Category Name to the body class
add_filter('body_class','add_category_to_single');
  function add_category_to_single($classes) {
    if (is_single() ) {
      global $post;
      foreach((get_the_category($post->ID)) as $category) {
        // add category slug to the $classes array
        $classes[] = $category->category_nicename;
      }
    }
    // return the $classes array
    return $classes;
  }

비-라틴 문자를 사용하는 언어(한국어 등)에서는 카테고리 이름을 body 클래스에 추가하면 카테고리명에 한글 등이 포함되면 깨져 보이기 때문에 스타일 작업을 위해 body 클래스에 카테고리 구분을 위한 요소를 추가하고 싶은 경우 카테고리 이름보다는 카테고리 ID를 추가하는 것이 더 편할 것입니다.

위의 코드를 차일드 테마(하위 테마, 자식 테마) 내의 함수 파일에 추가하시기 바랍니다. 그래야 추후 테마 업데이트 시 수정/추가 사항이 초기화되지 않고 유지됩니다.

참고로 요즘은 일부 테마와 페이지 빌더는 테마 파일을 직접 수정하는 대신 워드프레스 관리자 페이지(대시보드) 내에서 사이트의 모든 요소를 커스텀할 수 있도록 진화하고 있습니다. 예를 들어, 아바다 테마의 Layouts 기능이나 엘리멘터 페이지 빌더의 테마 빌더를 사용하면 테마 파일을 수정하지 않고도 특정 카테고리의 템플릿이나 특정 카테고리에 속한 글들의 싱글 포스트 템플릿을 만드는 것이 가능합니다.

참고


댓글 남기기

* 이메일 주소는 공개되지 않습니다.