워드프레스 강좌 / 플러그인 / 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

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

같은 카테고리의 다른 글

워드프레스 강좌 / 플러그인 / UpdraftPlus / 백업, 복원 플러그인

워드프레스 강좌 / 플러그인 / UpdraftPlus / 백업, 복원 플러그인

UpdraftPlus UpdraftPlus는 워드프레스 전체를 백업하고 복원할 수 있는 플러그인입니다. 현재 백업/복원 플러그인 중에서 가장 인기있는 플러그인으로, 대표적인 특징은 다음과 같습니다. 쉽고 빠른 백업/복원 파일과 DB 모두를 백업/복원 구글 드라이브, 드롭 박스, 원드라이브 등 외부 저장소에 백업 가능 주기적으로 자동 백업 가능 백업 를 클릭합니다. 팝업창에서 를 클릭합니다. 잠시 기다리면 백업이 만들어집니다. 백업 파일은 /wp-content/updraft 폴더에 저장됩니다. 외부 ...

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

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

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

워드프레스 강좌 / 사용자 정의 필드 입력하고 출력하기

워드프레스 강좌 / 사용자 정의 필드 입력하고 출력하기

사용자 정의 필드 사용자 정의 필드를 이용하여 글에 추가적인 정보를 입력하고 출력할 수 있습니다. 그 정보를 글 본문에 직접 입력할 수도 있지만, DB에 저장하면 출력하는 것 이외에도 여러 가지로 활용 가능하다는 장점이 있습니다. 사용자 정의 필드 입력하기 사용자 정의 필드는 글 쓰는 화면에서 입력합니다. 사용자 정의 필드를 입력하는 폼이 보이지 않는다면, 화면 옵션에서 ...

워드프레스 강좌 / 위젯 추가하기, 설정하기, 삭제하기

워드프레스 강좌 / 위젯 추가하기, 설정하기, 삭제하기

워드프레스의 위젯 기능을 이용하면, 테마가 제공하는 영역에 메뉴, 최근 글, 배너, 광고 등을 쉽게 추가하고 삭제할 수 있습니다. 위젯을 관리하는 방법은 두 가지입니다. 첫번째는 에서 하는 것입니다. 에서 관리하기 위젯 추가하기 사용할 수 있는 위젯에서 원하는 위젯을 마우스로 드래그하여 위젯 ...

워드프레스 강좌 / 특성 이미지 설정하는 방법

워드프레스 강좌 / 특성 이미지 설정하는 방법

특성 이미지 워드프레스의 글이나 페이지에는 특성 이미지를 설정하는 옵션이 있습니다. 특성 이미지는 해당 글을 대표하는 이미지로, 글의 내용을 잘 반영하는 이미지로 설정합니다. 특성 이미지는 본문에 삽입되는 것은 아니지만, 테마나 플러그인에서 여러 가지 방식으로 활용하니, 가능하다면 설정하는 것이 좋습니다. 특성 이미지 설정하기 글이나 페이지를 작성하는 화면에 특성 이미지를 설정하는 옵션이 있습니다. 을 클릭합니다. 기존 ...

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

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

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

워드프레스 강좌 / 플러그인 / Schema / 구조화된 데이터 만들어주는 플러그인

워드프레스 강좌 / 플러그인 / Schema / 구조화된 데이터 만들어주는 플러그인

구조화된 데이터 SEO와 관련해서 해야 할 것 중의 하나가 구조화된 데이터를 만드는 것입니다. 구조화된 데이터는 콘텐츠에 관련된 정보를 검색 엔진에 알려주는 역할을 합니다. 만약 구조화된 데이터가 없으면 구글 웹마스터도구에서 다음과 같은 메시지를 보여줍니다. 사이트에 구조화된 데이터가 없습니다. 구조화된 데이터은(는) Google에서 사이트의 콘텐츠를 파악하여 검색결과에 리치 스니펫을 표시하는 데 도움을 줍니다. 구조화된 데이터는 HTML 마크업을 ...

워드프레스 강좌 / 플러그인 / Insert Headers and Footers / 메타 태그, 스크립트 삽입 플러그인

워드프레스 강좌 / 플러그인 / Insert Headers and Footers / 메타 태그, 스크립트 삽입 플러그인

Insert Headers and Footers 블로그나 사이트를 만들 때 여러 가지 메타 태그와 스크립트를 추가하게 됩니다. 예를 들어 구글 애널리틱스로 접속 통계를 얻으려면 스크립트를 추가해야 하고, 네이버 웹마스터도구에 등록해서 네이버 검색에 반영되게 하려면 메타 태그를 추가해야 합니다. 이러한 스크립트나 메타 태그는 보통 <head> 태그에 삽입하게 되는데, 그 위치에 추가하려면 테마 파일을 분석하고 수정해야 ...

워드프레스 강좌 / 내보내기와 가져오기

워드프레스 강좌 / 내보내기와 가져오기

워드프레스로 만는 A라는 사이트의 콘텐츠를 워드프레스로 만든 B라는 사이트로 옮길 때 사용하는 것이 내보내기와 가져오기입니다. 내보내기 내보내기는 에서 합니다. 사용하는 테마나 플러그인에 따라, 내보내는 콘텐츠가 적을 수도 있고... 많을 수도 있습니다. 내보낼 콘텐츠를 선택한 다음 를 클릭합니다. 다운로드하는 파일은 텍스트만 포함한 XML 파일로, 파일 크기는 그리 크지 않습니다. 가져오기 가져오기는 에서 합니다. ...

워드프레스 강좌 / 카테고리

워드프레스 강좌 / 카테고리

카테고리 워드프레스의 글(포스트)은 카테고리로 분류합니다. 글은 적어도 하나 이상의 카테고리에 속하게 됩니다. 글 작성시 카테고리를 선택하지 않으면 기본 카테고리가 선택됩니다. 카테고리 관리는 에서 합니다. 글 작성 화면에서도 카테고리 관리를 할 수 있지만, 상세한 설정을 할 수는 없습니다. 카테고리 만들기 로 이동하면 다음과 같은 화면이 나옵니다. 이름 등을 입력하고 [새 카테고리 ...

워드프레스 강좌