워드프레스 이미지 라이트박스가 작동하지 않는 문제가 발생하는 경우

워드프레스가 6.5로 업데이트되면서 이미지 라이트박스 옵션이 블록 설정에서 블록 툴바로 이동했습니다. 이미지 블록이나 갤러리 블록에서 이미지를 클릭하고 링크 아이콘을 선택하면 클릭해서 확대하기(Expand on Click) 옵션을 선택할 수 있는 옵션이 표시됩니다. 그러면 이미지가 확대하여 모달 이미지로 표시됩니다.

이미지 확대 기능은 기본 편집기인 블록 에디터(구텐베르크)에서 지원됩니다. 클래식 에디터에서는 이 기능이 제공되지 않으므로 클래식 편집기(고전 편집기)를 사용하는 경우 블록 에디터로 바꾸는 것을 고려해 보시기 바랍니다. 블록 에디터에서는 키보드 단축키도 지원되어 글쓰기 작성 시간을 단축할 수 있고, 마우스 사용을 최소화하여 손목터널증후군 같은 직업병 완화에도 도움이 될 수 있습니다.😄

워드프레스 이미지 라이트박스가 작동하지 않는 문제가 발생하는 경우

이미지에 라이트박스 기능을 활성화("클릭해서 확대하기" 옵션 선택)할 경우 이미지에 마우스를 올리면 아래 그림과 같이 확대 아이콘이 표시됩니다.

확대 아이콘을 클릭하면 라이트박스 이미지로 표시됩니다.

기본적으로 위와 같은 모달 팝업으로 이미지가 표시되고, 축소 아이콘이 표시됩니다. 축소 아이콘을 클릭하면 라이트박스가 취소됩니다.

오버레이 배경색이 흰색이라서 콘텐츠가 보이지 않는데요. 이 글에 제시된 CSS 코드를 적용하면 투명한 오버레이 배경색으로 바꿀 수 있습니다.

경우에 따라 확대 아이콘(더하기 모양 아이콘)을 클릭해도 이미지가 확대되지 않을 수 있습니다.

그런 경우 플러그인 충돌을 의심할 수 있습니다. 먼저는 캐시 플러그인과 Autoptimize, Cleafy와 같은 속도 최적화 플러그인을 비활성화하여 문제가 해결되는지 체크해보시기 바랍니다.

그래도 해결이 안 되면 다른 플러그인도 비활성화하면서 문제가 되는 플러그인을 찾아볼 수 있습니다. GeneratePress 테마가 설치된 환경에서 AddToAny Share Buttons 플러그인을 사용할 경우 이미지에 확대 아이콘으 표시되지만, 확대 아이콘을 눌러도 이미지 라이트박스 기능이 작동하지 않는다고 하네요.

만약 플러그인을 모두 비활성화해도 문제가 해결되지 않으면 테마를 기본 테마(예: Twenty Twenty-Four 테마)로 변경한 후에도 문제가 해결되지 않는지 체크해 보시기 바랍니다.

"클릭해서 확대하기"는 워드프레스의 기본 기능이므로 대부분의 워드프레스 테마에서 작동할 것이라 생각됩니다. 다만, 오랫동안 업데이트가 안 된 경우에는 충돌로 인해 작동하지 않을 가능성도 있을 것입니다.

여러 가지 조치에도 문제가 해결되지 않으면, 유료 테마인 경우에는 테마 판매자/개발자에게 연락하여 지원을 요청해보시기 바랍니다.

워드프레스나 웹호스팅, 도메인 설정 등과 관련하여 어려움을 겪는 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다. 저렴한 비용에 서비스를 제공하고 있으니 부담 없이 문의주시기 바랍니다.😄

참고

https://avada.tistory.com/3336

워드프레스 Divi 테마용 온라인 학습 레이아웃 팩 무료 다운로드

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 vs. 카페24 비교 (Cloudways vs. Bluehost vs. Cafe24)