워드프레스 강좌 / 플러그인 / Responsive Lightbox & Gallery / 이미지 클릭했을 때 확대하는 플러그인

워드프레스 테마는 일반적으로, 이미지를 본문에 넣을 때 이미지가 아무리 커도 본문 가로폭을 넘어가지 못하게 만듭니다. 보기에는 좋지만, 그렇게 하면 큰 이미지가 작게 보여서 이미지 안의 내용을 보기 힘들 수가 있습니다. 이를 해결하는 방법은 라이트박스 플러그인을 사용하는 것입니다. 이미지를 클릭하면 원본 이미지로 또는 크게 확대 되는 걸 본 적 있으시죠? 그게 라이트박스의 기능입니다.

여러 가지 플러그인이 있지만, 널리 쓰이는 것은 Responsive Lightbox & Gallery입니다. 어떻게 사용하는지 간략히 알아보겠습니다.

플러그인 설치

  • [플러그인 새로 추가]에서 Responsive Lightbox & Gallery를 검색하고 설치하고 활성화합니다.

설정

  • 기본 설정은 Lightbox 메뉴에서 합니다.
  • 이미지가 미디어 파일로 링크가 걸려있을 때 Lightbox가 적용되는 것이 기본 설정입니다. [Enable lightbox for WordPress image links.]에 체크되어 있기 때문입니다.

사용

  • 본문에 이미지를 삽입하고, [미디어 파일]로 링크를 겁니다.

  • 이제 사이트에서 이미지를 클릭하면 크게 확대되어 나옵니다.

효과 변경

  • 클릭했을 때의 모양은 Dedault lightbox에서 정합니다.
  • 각 모양마다 상세 설정을 할 수 있는데, 그것은 상단의 [Lighrboxes] 탭에서 합니다.

  • 모양을 바꿔가며 마음에 드는 것을 찾으세요.

미디어 폴더

Responsive Lightbox & Gallery를 설치하고 활성화하면, 미디어 폴더라는 것이 생깁니다. 미디어 목록에서도 볼 수 있고...

미디어 업로드 창에서도 볼 수 있습니다.

미디어 폴더는 미디어를 그룹화하여 관리할 수 있게 도와줍니다. 이름은 폴더지만 미디어에 붙는 태그 정도로 이해하시면 됩니다. 실제로 폴더가 생성되는 것은 아니고, 풀더에 정리한 것처럼 보여질 뿐입니다.

만약 이 기능이 필요하지 않다면 Folders 설정에서 [Enable media folders.]의 체크를 해제하세요.

TIP

  • 만약 라이트박스가 잘 작동하지 않는다면 오류가 있는 스크립트가 있기 때문입니다. 크롬 요소 검사 등으로 스크립트 오류가 있나 살펴보세요.

같은 카테고리의 다른 글

워드프레스 강좌 / 플러그인 / Table of Contents Plus / 포스트, 페이지에 차례(목차) 만드는 플러그인

워드프레스 강좌 / 플러그인 / Table of Contents Plus / 포스트, 페이지에 차례(목차) 만드는 플러그인

긴 글을 읽을 때 차례(목차)가 있으면 좋습니다. 예를 들어 위키백과는 문서 상단에 목차가 있습니다. 목차가 있으면 문서가 어떤 내용을 담고 있는지 파악하기 쉽고 링크가 걸려 있어 원하는 내용으로 이동하기 편하다는 장점이 있습니다. Table of Contents Plus 목차를 영어로 Table of Contents, 줄여서 TOC라고 합니다. TOC로 검색하면 꽤 많은 플러그인이 나오는데, 가장 사용자가 많은 플러그인이 Table of ...

워드프레스 강좌 / 플러그인 / Google XML Sitemaps / 사이트맵 만들어주는 플러그인

워드프레스 강좌 / 플러그인 / Google XML Sitemaps / 사이트맵 만들어주는 플러그인

사이트맵(Sitemap) 사이트맵은 사이트에 있는 콘텐츠의 URL, 업데이트 날짜, 중요도 등을 정리한 XML 파일입니다. Sitemaps.org에서는 사이트맵을 다음과 같이 설명하고 있습니다. Sitemap은 웹마스터가 크롤링에 사용할 수 있는 사이트의 페이지에 대한 정보를 검색 엔진에 알리는 손쉬운 방법입니다. Sitemap의 가장 간단한 형식은 검색 엔진에서 사이트를 보다 지능적으로 크롤링할 수 있도록 각 URL에 대한 추가 메타데이터(마지막 업데이트된 날짜, ...

워드프레스 강좌 / Compress JPEG & PNG images / 이미지 압축 플러그인

워드프레스 강좌 / Compress JPEG & PNG images / 이미지 압축 플러그인

워드프레스에 이미지를 업로드하면, 여러 가지 크기의 썸네일이 만들어져서 디스크를 많이 사용하게 됩니다. 따라서 디스크 사용량을 줄이고 싶을 때 제일 먼저 하는 것이 이미지 압축입니다. 이미지를 압축하는 방법은 여러 가지가 있는데, 그 중 하나가 플러그인을 이용하는 것입니다. Compress JPEG & PNG images는 이미지 압축을 도와주는 플러그인입니다. Smush와는 다르게 원본 이미지 압축도 가능합니다.(Smush도 유료는 원본 ...

워드프레스 / 플러그인 / KBoard / 일대일(1:1) 상담 게시판 만드는 방법

워드프레스 / 플러그인 / KBoard / 일대일(1:1) 상담 게시판 만드는 방법

인터넷 쇼핑몰이나 서비스에 일대일 상담 기능이 있습니다. 질문자 입장에서는 나의 문의나 정보가 다른 사람에게 공개되지 않고, 판매자 입장에서는 제품 또는 서비스의 문제점이나 오류가 알려지는 것을 방지할 수 있다는 장점이 있습니다. 워드프레스에 일대일 상담 기능을 제공하는 플러그인이 여러 가지가 있는데, KBoard를 이용해서 구현할 수도 있습니다. 무료이기도 하고, 이미 KBoard로 게시판을 운영하고 있다면 ...

워드프레스 강좌 / 멀웨어 제거, 치료하는 방법

워드프레스 강좌 / 멀웨어 제거, 치료하는 방법

워드프레스와 멀웨어 워드프레스를 사용하는 사이트가 많다보니 공격도 많이 당합니다. 멀웨어에 감염되어서 사이트가 느려지거나, 서버 자원을 필요 이상으로 소비하거나, 다른 사이트로 리다이렉트시키는 등의 문제가 발생합니다. 멀웨어에 감염되면 index.php나 wp-config.php 등 주요 파일이 변형됩니다. 그리고 이상한 파일이 여기저기 잔뜩 생성됩니다. 따라서 치료 방법은 단순합니다. 변형된 파일은 문제 없는 파일로 교체하고, 이상한 파일은 삭제하면 됩니다. 문제는 ...

워드프레스 강좌 / 플러그인 / List Category Posts / 다양하게 글 목록 출력시켜주는 플러그인

워드프레스 강좌 / 플러그인 / List Category Posts / 다양하게 글 목록 출력시켜주는 플러그인

워드프레스 기본 위젯에 최근 글 위젯이 있습니다. 최신 글 목록을 보여주는 위젯으로 제목 또는 제목과 날짜를 출력해줍니다. 워낙 단순한 기능의 위젯이라 불편한 점이 좀 있습니다. 요약글을 보여주지도 못하고, 썸네일을 출력할 수도 없습니다. 글쓴이를 보여주거나 특정 카테고리의 글만 출력하지도 못합니다. 이를 해결해주는 플러그인 중의 하나가 List category posts입니다. 원하는 카테고리의 글을 원하는 양식으로 ...

워드프레스 강좌 / 플러그인 설치하기, 삭제하기

워드프레스 강좌 / 플러그인 설치하기, 삭제하기

플러그인을 설치하는 방법 플러그인을 설치하는 방법은 세 가지가 있습니다. 웹에서 바로 설치하기 ZIP 파일 업로드하여 설치하기 FTP로 업로드하여 설치하기 WordPress.ORG에서 공유되는 플러그인은 보통 1번 방식으로 설치합니다. WordPress.ORG에서 공유되지 않는 플러그인은 2번 또는 3번 방식으로 설치합니다. 웹에서 바로 설치하기 에서 설치하려는 플러그인을 찾습니다. 추천, 인기 등에서 널리 쓰이는 플러그인을 볼 수 있고, 검색을 통해서 원하는 ...

워드프레스 강좌 / 플러그인 / Duplicate Menu / 메뉴 복사하는 플러그인

워드프레스 강좌 / 플러그인 / Duplicate Menu / 메뉴 복사하는 플러그인

워드프레스에서 메뉴를 만드는 게 그리 쉽지는 않습니다. 어렵다기 보다는 손이 많이 갑니다. 메뉴 아이템이 많으면 지루한 작업을 한참 해야 합니다. 메뉴 작업을 하다보면 비슷한 메뉴를 여러 개 만들어야 하는 경우도 있고, 긴 메뉴를 분할해야 하는 경우도 있습니다. 그 때마다 메뉴를 새로 만드는 건 너무 번거롭습니다. Duplicate Menu는 이러한 작업을 도와주는 플러그인입니다. 이름 ...

워드프레스 강좌 / 플러그인 / Contact Form 7 / 폼메일 만드는 플러그인

워드프레스 강좌 / 플러그인 / Contact Form 7 / 폼메일 만드는 플러그인

Contact Form 7 Contact Form 7은 폼메일 플러그인입니다. 정보를 입력할 수 있는 폼을 쉽게 만들 수 있습니다. 스팸 방지 도구인 reCAPTCHA를 사용할 수 있습니다. 스타일을 구하기 쉽고, 많은 테마에서 Contact Form 7을 지원합니다. 설치 에서 Contact Form 7로 검색하여 설치하고 활성화합니다. 폼메일 페이지 만들기 Contact Form 7을 설치하면 기본적으로 하나의 폼이 생성됩니다. 쇼트코드를 복사합니다. 페이지를 만들고, ...

워드프레스 강좌 / 블록 에디터 / 코드 입력하는 방법

워드프레스 강좌 / 블록 에디터 / 코드 입력하는 방법

워드프레스에서 글 작성할 때 코드를 붙여넣으면, 들여쓰기가 제대로 표현되지 않거나 코드를 실행해버리는 등 원하는 모양으로 나오지 않는 경우가 있습니다. 그럴 경우 그대로 붙여넣지 말고 코드 블록으로 붙여넣습니다. + 아이콘을 클릭하고 를 클릭합니다. 그리고 코드를 붙여넣습니다.

워드프레스 강좌