워드프레스 포스트에 삽입하는 이미지가 본문 영역보다 커 이미지에 포함한 내용을 파악하기 어려울 때는 이미지에 링크를 추가하여 새로운 페이지로 이동 또는 새 창으로 보여주는 것이 일반적입니다. 또, 삽입하는 이미지가 본문 영역보다 크다면 본문 영역보다 작은 이미지를 삽입하고 링크로 더 큰 이미지를 볼 수 있도록 제공하면 됩니다.
이때 워드프레스 기본 상태에서, 더 큰 이미지 링크 타겟이 현재 페이지나 새로운 페이지로 정의되면 포스트 페이지를 벗어나므로 방문자에게 약간의 불편을 줄 수 있으므로 현재 창에서 이미지만 모달 레이어로 띄우는 방법을 도입할 필요가 있습니다. 물론, 절대적인 것은 아닙니다.
이미지를 모달 레이어로 띄우는 여러 방법이 있지만, 워드프레스에서 기본으로 제공하는 ThickBox jQuery 라이브러리를 사용하면 이미 존재하는 이미지를 포함하여 추가 편집이나 새로운 파일 추가 등을 하지 않아도 간단하게 이미지 모달 레이어를 구현할 수 있습니다.
워드프레스 기본 제공 ThickBox Jquery 라이브러리 모달 레이어 글에서 ThickBox 사용에 관한 기본 내용을 소개하였으므로 한 번 읽으면 이 포스트를 이해하는 데 도움이 됩니다.
ThickBox 라이브러리 등록
ThickBox 라이브러리는 다음 코드로 간단하게 등록할 수 있는데, 사용하는 테마의 functions.php 파일에 추가하면 됩니다.
add_action( 'wp_enqueue_scripts', 'ex_thickbox_scripts' );
function ex_thickbox_scripts() {
wp_enqueue_script( 'thickbox' );
wp_enqueue_style( 'thickbox' );
}이것으로 준비는 끝이며, 이미지를 등록할 때 이미지 링크 및 링크에 특정 클래스만 추가하면 됩니다.
포스트에 이미지 등록할 때
다음 그림처럼 포스트 등록 시 미디어 추가 모달 창에서 이미지를 올린 후 링크에는 ‘미디어 파일(Media File)‘을 선택해야 합니다. 미디어 파일을 선택하면 원본 이미지 링크가 등록됩니다. 첨부 페이지(Attachment Page)를 선택하면 모달 레이어에 페이지 전체가 삽입되므로 선택하지 않아야 합니다.
‘크기(Size)’는 본문에 삽입할 크기를 선택하면 되는데, 이미 말한 것처럼 이미지를 모달 레이어로 띄우는 것이 목적이므로 본문 영역보다 큰 또는 원본 이미지가 아닌 것을 선택하는 것이 좋습니다. 또, 방문자가 이미지를 클릭하지 않을 때도 있으므로 본문에 큰 이미지를 삽입하여 트래픽을 증가할 필요는 없습니다.
클래스 thickbox 추가
ThickBox 라이브러리를 추가하고, 특정 설정으로 이미지를 본문에 삽입했는데, 이미지가 새 탭에서는 열리지만, 아직 모달 레이어로 열리지는 않습니다. 핵심 설정인 thickbox 클래스가 이미지 링크 속성에 없기 때문이므로 추가해야 합니다.
현재 포스트에 삽입한 이미지의 링크 중심으로 사이트 소스를 확인하면 다음과 비슷하게 나오는데, a 링크 속성에 thickbox 클래스를 추가해야 합니다.
/* img 소스는 생략 */
<a href="http://localhost/wp-content/uploads/thick_01.png"><img ...></a>이미지 링크에 특정 클래스를 추가하는 방식과 워드프레스 ThickBox 사용 기준에서 가장 편리한 방법은 jQuery를 이용하는 것입니다. 이때 jQuery 코드 일부를 별도의 파일을 만들어 다시 워드프레스에 추가할 수도 있지만, 번거로우므로 wp_add_inline_script 함수를 사용하여 필요한 코드를 바로 추가하면 편리합니다. 다음 코드를 확인하세요.
add_action( 'wp_enqueue_scripts', 'ex_thickbox_scripts' );
function ex_thickbox_scripts() {
$inline_script = '
jQuery(document).ready(function() {
jQuery(".entry-content img").parent("a").addClass("thickbox");
});
';
wp_enqueue_script( 'thickbox' );
wp_enqueue_style( 'thickbox' );
wp_add_inline_script( 'thickbox', $inline_script );
}먼저, 위의 코드에서 entry-content 클래스를 추가한 것은 포스트 콘텐츠 본문 영역의 이미지만 모달 레이어로 띄우기 위한 것이며, 이 클래스는 대부분의 워드프레스 테마에서 사용한다고 볼 수 있으므로 아니라면 각자 환경에 따라 알맞게 지정하면 됩니다.
위의 코드 추가 후 사이트에서 이미지의 소스를 확인하면 다음처럼 thickbox 클래스 추가를 확인할 수 있습니다.
/* img 소스는 생략 */
<a href="http://localhost/_aaa/wp-content/uploads/thick_01.png" class="thickbox"><img ...></a>사이트에서 이미지를 클릭하면 다음처럼 모달 레이어를 볼 수 있습니다.
여러 이미지를 등록할 때 하나의 모달 레이어에서 연속하여 보기
워드프레스 포스트에 여러 이미지를 삽입하였고, 이미지를 모달 레이어로 띄울 때 하나의 이미지 모달 레이어에서 나머지 이미지를 연속하여 볼 수 있는데, 핵심은 이미지 링크 정보 등록 시 ‘새 탭에서 링크 열기’ 옵션을 선택하는 것입니다. 그러나 새 탭 열기 옵션보다 더 명확한 핵심은 noopener 속성입니다.
다음 그림은 포스트에 추가한 이미지를 삽입한 후 편집 화면의 이미지를 다시 클릭하면 나오는 편집 아이콘입니다.
앞 그림의 화살표를 클릭하면 이미지 정보를 편집할 수 있는 다음 그림의 모달이 나오는데, 모르는 사용자는 없을 것입니다.
먼저, 빨간 화살표 항목은 모달 레이어와 관계가 없어도 입력하는 습관이 필요하다는 뜻에서 표시한 것입니다.
그림의 파란색 화살표가 가르키는 새 탭으로 열기를 선택하고, 모달의 업데이트 버튼을 클릭한 후 포스트 업데이트 버튼을 클릭하여 저장합니다. 다시 이 이미지를 클릭하여 이미지 편집 모달 화면을 띄우면, 다음 그림처럼 추가된 noopener 속성을 볼 수 있습니다.
TinyMCE 에디터에서 이미지 또는 링크를 새 창(탭)으로 열기 항목을 선택하고 포스트를 업데이트(저장)하면 그림처럼 noopener 속성이 자동으로 추가되며, 워드프레스 4.7 버전부터 변경되었습니다. 관련 내용은 생략하며, 이 속성으로 사이트의 이미지 클릭 시 모달 레이어에 이미지 번호와 탐색 링크가 추가됩니다.
새 창으로 열기를 선택한 후 이 속성이 없다면 모달 레이어에서 연속 이미지를 볼 수 없습니다. 반대로 새 창 열기 선택란은 해제하지만, noopener 속성을 그대로 유지하면 모달 레이어에서 연속 이미지를 볼 수 있습니다.
이미지를 추가할 때마다 새 창 열기 선택이나 속성 추가가 번거롭다면 다음 코드를 사용하여 편리를 도모할 수 있습니다.
add_action( 'wp_enqueue_scripts', 'ex_thickbox_scripts' );
function ex_thickbox_scripts() {
$inline_script = '
jQuery(document).ready(function() {
jQuery(".entry-content img").parent("a").attr("target", "_blank").attr("rel", "noopener").addClass("thickbox");
});
';
wp_enqueue_script( 'thickbox' );
wp_enqueue_style( 'thickbox' );
wp_add_inline_script( 'thickbox', $inline_script );
}위의 코드를 사용하면 이미지 편집 모달에서 추가한 새 창 열기 옵션과 noopener 속성은 모두 없어도 됩니다. 있어도 중복하지 않으므로 염려할 필요가 없습니다. 또, 위의 코드에서 새 창 열기에 관련한 코드는 없어도 하나의 모달 레이어에서 여러 이미지를 연속해서 보는 데 문제가 없습니다.
다음은 위의 코드를 추가하고, 새 창 열기 옵션과 noopener 속성 추가 없이 4개의 이미지를 각각 삽입한 포스트의 사이트 화면입니다. 반복하는 것으로 이미지 링크는 ‘미디어 파일’로 선택해야 합니다.
이미지 4개의 링크 소스를 보면 다음처럼 클래스와 링크 속성이 추가된 것을 볼 수 있습니다.
<a href="http://localhost/wp-content/uploads/thick_01.png" target="_blank" rel="noopener" class="thickbox">...</a>
<a href="http://localhost/wp-content/uploads/thick_02.png" target="_blank" rel="noopener" class="thickbox">...</a>
<a href="http://localhost/wp-content/uploads/thick_03.png" target="_blank" rel="noopener" class="thickbox">...</a>
<a href="http://localhost/wp-content/uploads/thick_04.png" target="_blank" rel="noopener" class="thickbox">...</a>위 그림 이미지 중 어떤 것을 클릭해도 연속해서 이미지를 볼 수 있습니다.
모달 레이어 스타일 변경
모달 레이어 스타일은 크롬 브라우저의 요소 검사를 사용하여 필요한 요소를 찾아 스타일 속성을 덮어쓰는 방법으로 간단하게 변경할 수 있습니다. 다음 그림은 이 포스트에서 변경할 스타일 요소입니다.
앞에서 별도 파일을 사용하지 않고 인라인 스크립트 코드를 추가하기 위해 사용한 wp_add_inline_script 함수처럼 CSS 인라인 코드 추가는 wp_add_inline_style 함수를 사용할 수 있습니다.
종합하여 이 포스트의 최종 코드를 다음처럼 정의할 수 있으며, 포스트 타입 post, page의 싱글 포스트에서만 사용하는 조건을 추가하였습니다.
add_action( 'wp_enqueue_scripts', 'ex_thickbox_scripts' );
function ex_thickbox_scripts() {
if ( is_singular( array( 'post', 'page' ) ) ) {
$inline_script = '
jQuery(document).ready(function() {
jQuery(".entry-content img").parent("a").attr("target", "_blank").attr("rel", "noopener").addClass("thickbox");
});
';
$inline_style = '
#TB_window { background-color: transparent; padding-bottom: 30px; }
#TB_window img#TB_Image { border: 0; }
#TB_caption { color: #fff; }
.tb-close-icon { color: #fff; }
';
wp_enqueue_script( 'thickbox' );
wp_enqueue_style( 'thickbox' );
wp_add_inline_script( 'thickbox', $inline_script );
wp_add_inline_style( 'thickbox', $inline_style );
}
}위의 코드를 적용한 최종 결과는 다음과 같습니다.
개별 이미지 설정과 코드의 일괄 설정
번거로움을 피하고자 코드로 이미지 속성을 일괄 적용하면 유리할 때가 많지만, 구분할 필요가 있을 때 활용하기 어려울 때도 있습니다.
워드프레스 갤러리로 이미지를 등록할 때는 각 이미지의 링크 설정이 적용되지 않으므로 코드로 일괄 적용하면 하나의 모달 레이어에서 갤러리에 등록한 이미지를 볼 수 있어 편리합니다.
그러나, 하나의 포스트에 8개의 이미지가 있는데, 7개는 하나의 설명을 위한 같은 그룹으로 볼 수 있지만, 나머지 하나는 별개의 이미지여서 하나의 모달 레이어에서 제외할 때 코드를 사용하면 적용하기 어렵습니다. 코드를 사용하지 않고, 각 이미지 편집 모달 화면에서 제외하고 싶은 이미지의 속성을 추가하지 않는다면 이를 해결할 수 있으므로 오히려 활용도가 큽니다.