[워드프레스] 게시글의 모든 이미지에 lightbox 속성 추가하기

워드프레스에서는 다양한 라이트박스(Lightbox) 플로그인을 사용하여 이미지를 클릭할 경우 라이트박스 형식으로 표시할 수 있습니다. 일부 테마에서는 라이트박스 기능을 기본으로 탑재되어 나오기도 합니다. 그런 경우가 아니면 Responsive Lightbox by dFactory 등의 플러그인을 설치하여 사용할 수 있습니다.

보통 Lightbox 플러그인을 설치하면 자동으로 글 내의 그림을 클릭할 경우 라이트박스 형식으로 표시합니다. 하지만 플러그인에 따라 수동으로 rel="lightbox"와 같은 코드를 삽입해야 하는 경우가 있습니다. 혹은 WordPress용이 아닌 js 파일을 Enqueue하여 사용하는 경우에도 수동으로 특정 코드를 이미지 태그에 삽입해야 하는 경우가 있습니다.

이런 경우 다음과 같은 코드를 함수 파일에 추가하면 워드프레스 게시글 내의 모든 이미지에 rel="lightbox" 속성이 추가됩니다.

function add_lightbox_rel($content) {
global $post;
$pattern ="/<a(.*?)href=('|")(.*?).(bmp|gif|jpeg|jpg|png)('|")(.*?)>/i";
$replacement = '<a$1href=$2$3.$4$5 rel="lightbox" title="'.$post->post_title.'"$6>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'add_lightbox_rel');

만약 사용하는 플러그인에서 이미지에 다른 코드를 삽입해야 하는 경우에는 rel="lightbox" 부분을 해당 플러그인에서 요구하는 코드로 바꾸면 됩니다.

참고로 라이트박스 기능을 Kboard에 적용하려는 경우 썸네일 이미지 태그 내에 rel="lightbox"(혹은 플러그인에서 요구하는 코드)를 추가하면 됩니다. 이 페이지의 케이보드 갤러리에서 확대경을 클릭하면 이미지가 라이트박스 형태로 표시되도록 속성 코드가 이미지 태그에 추가되었습니다.

참고:

• 간단한 라이트박스(팝업) Javascript 소스
• 워드프레스에서 Fancybox를 사용하여 외부 URL 페이지를 라이트박스로 열기