BBPress 게시물에 Lightbox 적용 - 워드프레스 게시판

Last Updated on 10월 12, 2021 by Jade(정현호)

안녕하세요
이번에는 워드프레스(WordPress) 의 게시판(포럼) 플러그인인 BBPress 를 사용하여 게시판을 사용하는 과정에서 게시판 글에 작성된 이미지에 대해서 Lightbox 를 적용하는 방법에 대해서 확인 해보도록 하겠습니다

Contents

Lightbox 플러그인
- Lightbox 란
- Lightbox 플러그인 설치
함수 코드 추가
TinyMCE 사용시
Conclusion

Lightbox 플러그인

Lightbox 기능 내용 과 플러그인 설치에 대해서 확인 해보도록 하겠습니다.

Lightbox 란

Lightbox 란 화면을 채우고 나머지 웹 페이지를 흐리게하여 이미지와 비디오를 표시하는 JavaScript 라이브러리로 Lightbox 를 사용하여 축소된 이미지를 원본 이미지 크기 또는 확대 하여 볼 수 있는 기능 입니다.

보통 이미지는 블로그나 게시판의 Contents Layout 사이즈에 맞춰서 가로가 축소 되면서 결과적으로 가로/세로가 줄어들어서 표시가 되게 됩니다.

가로폭이 좁은 게시판이나 포스팅일 수록 이미지 본문 삽입시 원본 이미지 보다 작아져서 보기가 힘들때가 있습니다.
이럴때 Lightbox 를 사용하면 아래와 같이 원본이미지 크기 형태로 볼 수 있게 됩니다.

Lightbox 플러그인 설치

Lightbox 플러그인의 여러 형태로 다양하게 있습니다.
포스팅에서 테스트 하고 사용해서 설명 드리는 플러그인은 "Responsive Lightbox & Gallery" 입니다.

Responsive Lightbox & Gallery

The most popular lightbox plugin and responsive gallery builder for WordPress.

다운로드는 위의 링크를 통해서 받으시거나 WordPress 관리 콘솔-> 플러그인 메뉴에서 추가 할 수 있습니다

반응형 라이트박스 및 갤러리 플러그인에는 각 갤러리 및 라이트박스 스타일별로 사용자 정의 옵션이 포함되어 있어 클릭 몇 번으로 웹사이트 에게 맞게 조정할 수 있습니다.

또한 다양한 라이트박스 유형을 지원 하고 있어서 많이 사용되는 플러그인이기도 합니다.

함수 코드 추가

별도의 함수 코드를 추가를 해야하며 사용하는 테마의 functions.php 파일에 내용을 추가 하면 됩니다.
functions.php 에 별도의 코드 내용을 입력시에는 차일드테마를 생성 하여 코드를 추가하는 것이 보통 권장 되는 사항 입니다

이유는 사용 중인 테마를 업그레이드 될 경우 functions.php 파일이 새로 덮어쓰기가 되어 기존의 작성된 내용이 사라질 수 있기 때문입니다.

functions.php 에 별도의 코드를 추가 시에는 차일드 테마를 이용하는 방법을 권유 드리고, 구글 등에서 차일드 테마의 사용법은 많이 찾아 보실 수 있습니다.

functions.php 파일의 위치는 아래와 같습니다.
/워드프레스 설치파일/wp-content/themes/사용중인테마명/

위의 경로에 functions.php 파일이 있습니다. functions.php 파일에 아래 내용을 추가 합니다.

# Lightbox Function
function add_image_responsive_class($content) {
    global $post;
    $pattern ="/<img src=\"(.*?)\"(.*?)>/i";
    $replacement = '<a href="$1" rel="lightbox-gallery-0"><img src="$1" $2 /></a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
add_filter ('bbp_get_reply_content', 'add_image_responsive_class');
add_filter ('bbp_get_topic_content', 'add_image_responsive_class');

# Lightbox Function - alig=center
function add_image_responsive_alig_class($content) {
    global $post;
    $pattern ="/<img class=\"(.*?)\" src=\"(.*?)\"(.*?)>/i";
    $replacement = '<a href="$2" rel="lightbox-gallery-0"><img class="$1" src="$2" $3 /></a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
add_filter ('bbp_get_reply_content', 'add_image_responsive_alig_class');
add_filter ('bbp_get_topic_content', 'add_image_responsive_alig_class');

TinyMCE 사용시

BBPress 에서 고전편집기(TinyMCE) 관련 플러그인을 설치하고 사용할 경우에 Advanced TinyMCE 플러그인에서 아래와 같이 옵션을 추가해주시면 됩니다
(TinyMCE 에디터 미사용시 해당 부분은 생략)

옵션 명 : rel_list

Value : [{text: "None", value: ""}, {text: "Nofollow", value: "nofollow noreferrer"},{text: "lightbox-gallery-0", value: "lightbox-gallery-0 lightbox-gallery-0"} ]

Conclusion

Lightbox 는 블로그나 사이트, 게시판 등에서 이미지가 본문삽입 된 경우 가독성을 위해서 꼭 필요한 기능 입니다.
특히 모바일에서는 처음 기본 화면에서 더욱 작게 보이게 됨으로 해당 기능은 더욱 더 필요한 기능 입니다.

워드프레스(WordPress) 사용 사이트에서 게시판 플러그인 사용 빈도 등이 높지 않으며 또한 국내에서의 BBPress 사용률이 높지는 않지만 그래도 BBPress 를 사용하는 경우라면 유용할 것으로 생각 됩니다

포스팅에서 설명한 함수를 응용하면 블로그 본문이나 다른 게시판 플러그인이나 기타 다른 플러그인 등에서도 사용이 가능할 것으로 예상 됩니다.

관련된 다른 글

WordPress-BBPress Link 자동 생성 비활성화

BBPress 는 블로그나 웹사이트 형태의 WordPress(워드프레스) 에 포럼형 게시판 기능을 제공해주는 플러그인 입니다.

wordpress -둥근따옴표 와 --(double dash) 문제

wordpress는 ‘(quotation) 의 표기를 둥근따옴표(curly quotes) 로 표기 하는 경우가 있습니다 그럴경우 블로그의 내용을 복사 해서 터미널등에 붙여 넣게 되면 ’ 이나 ” 가 이상하게 붙여 넣게 됩니다.

WordPress xmlrpc.php 취약점 차단 / XML-RPC 공격 차단

XML-RPC 란 XML을 사용하여 호출과 HTTP를 전송 메커니즘으로 WordPress 에서는 xmlrpc.php 을 통해 수행 됩니다.

Jade(정현호)

Principal DBA(MySQL, AWS Aurora, Oracle)
핀테크 서비스인 핀다에서 데이터베이스를 운영하고 있어요(at finda.co.kr)
Previous - 당근마켓, 위메프, Oracle Korea ACS / Fedora Kor UserGroup 운영중

Database 외에도 NoSQL , Linux , Python, Cloud, Http/PHP CGI 등에도 관심이 있습니다
purityboy83@gmail.com / admin@hoing.io

hoing.io

bug.mysql.com

Statistics