안녕하세요. 린치핀소프트 한광희입니다.

 

이번 포스트는 테마나 플러그인 개발에 유용한 필터 훅(Filter Hook)인 “body_class” 에 대해 소개합니다.

 

body_class 는 동명의 함수와 필터 훅이 존재합니다. 함수인 body_class()인 경우 현재 페이지의 body 태그에 보통 추가하여 사용하며 body 태그의 클래스를 추가해줄 때 사용합니다.

워드프레스는 기본적으로 body 태그에 현재 페이지의 포스트의 종류, 페이지의 ID, 페이지의 템플릿 종류와 로그인, admin-bar의 여부등 각  테마와 플러그인에 따라 추가정보를 “클래스(Class)”로 추가 하고 있습니다.

이 Body 태그의 클래스(class) 정보는 클라이언트 사이드의 CSS,JS에서 디자인과 로직등을 반영하는데 있어 기초적인 정보를 제공 할 수 있습니다.

 

screenshot-newtab 2016-01-17 20-44-03

<body 태그의 클래스 예시>

즉, body 태그의 클래스에 자신이 원하는 클래스명을 추가 함으로써 클라이언트 사이드인 CSS , JS(자바스크립트) 에서 해당 페이지의 특정한 로직과 디자인을 추가하거나 제어 하는데 훨씬 수월하게 접근 할 수 있습니다.

 

이때 body 태그에 추가되는 클래스(Class)를 편집할 수 있는 필터 훅이 지금 소개하는 “body_class” 훅 입니다,

<?php

if($pageStatus == 'submit')
{
  add_filter('body_class','custom_body_class');
}
function custom_body_class($classes){
   $classes[] = 'jury_paper_status_submited';
return $classes;
}

?>

기본적으로 body_class 필터 훅은 필터 훅을 추가하는 함수인 add_filter() 함수를 이용하여 추가하면 콜백 함수를 하나 지정하여야 합니다.

위 소스코드에서는 custom_body_class() 라는 함수를 콜백함수로 지정하고 있으며 해당 콜백함수는 함수 매개변수로서 $classes 가 지정되어 있습니다.

콜백함수를 지정 할때 중요한 점은 당연하지만 지정하는 콜백함수가 다른 함수명과 충돌하지 않아야 하며, 콜백 함수는 꼭 배열(array)을 반환해야 합니다.

 

위 소스코드에서 매개변수 $classes 는 body 태그에 추가될 class에 대한 정보를 배열(Array)로 가지고 있습니다. 그러니 이 배열을 조작하여 클래스를 추가하거나 기존 클래스를 삭제 할수 있습니다. 위 코드에서는 $classes []  = ‘jury_page_status_submited’ 라는 코드를 기입하여 body 태그의 클래스로 “jury_page_status_submited” 라는 클래스명을 추가하고 있습니다.

반대로 php의 unset() 함수를 이용하여 $classes 의 특정원소를 삭제하면 해당 원소가 body 태그의 클래스로 추가되는 것을 방지 할수 있습니다.

 

screenshot-newtab 2016-01-17 20-44-03

 

위의 함수를 추가하고 워드프레스 사이트를 접근하면 위의 스크린샷 처럼 “jury_paper_status_submited” 라는 클래스명이 body 태그의 클래스에 추가된 것을 확인 할 수 있습니다.

 

모든 웹 페이지는 보통 하나의 body 태그를 포함하기 때문에, 워드프레스의 PHP 로직에서 해당 페이지에 대한 구분이나 특정정보를 JS/CSS에서 구분시키도록 할때 “body_class” 훅을 사용함으로써 간단히 정보를 전달 할수 있습니다.

이 외에도 클라이언트 사이드의 JS(자바스크립트)에 직접적으로 자바스크립트 객체를 전달 할 수 있는데, 이때는 wp localize script() 함수를 이용하여 PHP 배열을 자바스크립트이 객체로 전달 할 수 있습니다.