워드프레스는 Cody Lindley ThickBox jQuery 라이브러리의 수정 버전을 기본 모달(Modal) 레이어로 제공합니다. 관련 파일을 기본으로 제공한다는 뜻이므로 사용하려면 관련 스크립트를 호출(enqueue)해야 합니다. 그리고 설명하지 않지만, 모달과 팝업(Popup)은 다르다는 것을 인지할 필요가 있습니다.
워드프레스 ThickBox는 워드프레스 내비게이션 메뉴에 특정 기능의 메뉴 아이템 추가하기 글에서 추가한 메뉴를 클릭할 때 특정 정보를 담은 모달 레이어를 실행하는 예로 간략하게 알아본 때가 있습니다. 그때 사용한 코드는 다음과 같고, 테마의 functions.php 파일에 추가하였습니다.
add_filter( 'wp_nav_menu_items', 'custom_add_menu_item', 10, 2 );
function custom_add_menu_item( $items, $args ) {
if( $args->theme_location == 'primary' ){
add_thickbox(); ?>
<div id="my-content-id" style="display:none;">
<h1 style="padding-top: 30px;text-align:center">Nav Modal</h1>
<p style="padding-top: 20px;text-align:center">This is my hidden content! It will appear in ThickBox when the menu item is clicked.</p>
</div>
<?php
$items .= '<li class="menu-item"><a href="#TB_inline?width=300&height=300&inlineId=my-content-id" class="thickbox">Modal</a></li>';
}
return $items;
}워드프레스 ThickBox 사용 기본
앞의 코드는 필터를 사용하여 추가한 메뉴를 클릭할 때 모달 레이어를 실행하는 것인데, 워드프레스 ThickBox 사용의 기본 예시입니다. 메뉴 추가 목적을 제외하고 특정 요소를 클릭할 때 모달 레이어를 실행하려면 다음 코드를 원하는 곳에 추가하면 됩니다. 물론 함수(템플릿 태그)로 정의하여 사용할 수도 있으며 더 효율적입니다.
<?php add_thickbox(); ?>
<div id="my-content-id" style="display:none;">
<h1 style="padding-top: 30px;text-align:center">Modal</h1>
<p style="padding-top: 20px;text-align:center">'나는 ThickBox 모달 레이어입니다. '모달 레이어 글자를 클릭하면 나타납니다.</p>
</div>
<a href="#TB_inline?width=300&height=300&inlineId=my-content-id" class="thickbox">모달 레이어</a>먼저, ThickBox jQuery 라이브러리 사용 핵심은 링크 속성의 thickbox 클래스인데, 반드시 추가해야 모달 레이어를 실행할 수 있다는 것 기억해야 합니다.
위의 기본 사용 방식에서 주의할 내용은 #my-content-id 블록 모달 레이어에 표시할 3, 4번 줄 인라인 콘텐츠를 워드프레스 코어에 의존하지 않는 완전한 콘텐츠로 정의해야 한다는 것과 인라인 콘텐츠를 Html 요소 블록으로 정의해야 한다는 것입니다.
다음 코드를 테마의 single.php 파일 적당한 곳에 추가 및 저장하고, 사이트에서 모달 레이어를 실행하여 h1 블록 아래 글자는 나오지 않는 것을 확인하면 그 뜻을 쉽게 이해할 수 있습니다.
<?php add_thickbox(); ?>
<div id="my-content-id" style="display:none;">
<h1 style="padding-top: 30px;text-align:center">Modal</h1>
'나는 ThickBox 모달 레이어입니다. '모달 레이어 글자를 클릭하면 나타납니다.
</div>
<a href="#TB_inline?width=300&height=300&inlineId=my-content-id" class="thickbox">모달 레이어</a>
기본 사용의 인라인 콘텐츠 ThickBox 모달 레이어 실행을 위한 링크의 파라미터는 형식을 유지하여 값만 변경하여 사용하면 됩니다.
// thickbox 클래스 반드시 필요
<a href="#TB_inline?width=300&height=300&inlineId=my-content-id" class="thickbox">모달 레이어</a>ThickBox 스크립트 등록
기본 사용 예시에서는 add_thickbox 함수를 개별적으로 사용하였는데, 모달 레이어를 하나만 사용한다면 적절하며 간편한 방법입니다. 반복해서 필요하다면 워드프레스 스크립트 등록 방식을 사용하는 것이 좋습니다. 물론, 하나만 사용할 때도 앞에서 사용한 add_thickbox 함수 대신 스크립트 등록 방식을 사용해도 됩니다.
ThickBox 사용을 위한 스크립트 등록은 너무 간단한데, 사용하는 테마 functions.php 파일에 대부분 이미 존재할 것으로 예상하는 wp_enqueue_scripts 훅 호출 함수 블록에 2줄의 코드만 추가하면 됩니다. 테마에 별도로 추가한다는 가정으로 다음 코드를 추가할 수 있습니다.
add_action( 'wp_enqueue_scripts', 'ex_thickbox_scripts' );
function ex_thickbox_scripts() {
wp_enqueue_script( 'thickbox' );
wp_enqueue_style( 'thickbox' );
}하나는 자바스크립트, 하나는 스타일 파일을 대기열에 등록하는 것으로 코드 추가 후 사이트에서 페이지 소스를 확인하면 </head> 블록에는 스타일, </body> 블록 위에는 자바스크립트 파일 소스 링크가 생성된 것을 볼 수 있습니다. 일부 자바스크립트 데이터도 추가됩니다.
/* </head> 위 */
<link rel='stylesheet' id='thickbox-css' href='http://localhost/wp-includes/js/thickbox/thickbox.css?ver=4.9.5' type='text/css' media='all' />
/* </body> 위 */
<script type='text/javascript' src='http://localhost/wp-includes/js/thickbox/thickbox.js?ver=3.1-20121105'></script>이렇게 ThickBox 관련 파일을 등록하면 add_thickbox 함수를 따로 사용할 필요가 없으므로 필요할 때 모달 레이어에 출력한 콘텐츠와 링크 정보만 지정하여 사용하면 됩니다.
종합한 간단한 예로, 다음 코드를 테마의 functions.php 파일에 추가하면 타입 post 싱글 포스트 페이지 본문 내용(content) 다음에 링크가 있는 “이 포스트의 제목은?” 텍스트가 출력되며, 클릭하면 싱글 포스트의 제목이 나오는 모달 레이어가 실행됩니다. 함수를 추가하여 동적 데이터 모달 레이어 구성 응용에 조금 도움을 얻을 수 있습니다.
add_filter( 'the_content', 'ex_thickbox_content');
function ex_thickbox_content( $content ) {
if ( is_singular( 'post' ) ) {
$id = get_the_ID();
$title = get_the_title();
$thickbox_content = '
<div id="my-content-'.$id.'" style="display:none;">
<h1 style="padding-top: 30px;text-align:center">포스트 제목</h1>
<p style="padding-top: 20px;text-align:center">이 포스트의 제목은 "'.$title.'"입니다.</p>
</div>
<a href="#TB_inline?width=300&height=300&inlineId=my-content-'.$id.'" class="thickbox">이 포스트의 제목은?</a>
';
return $content . $thickbox_content;
}
return $content;
}모달 레이어 실행을 위한 많은 방법이 있지만, 워드프레스를 사용한다면 내장된 기능을 활용하는 것이 좋겠습니다.