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

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

같은 카테고리의 다른 글

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

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

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

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

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

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

워드프레스 강좌 / 플러그인 / Crayon Syntax Highlighter / 코드 문법 하이라이트 플러그인

워드프레스 강좌 / 플러그인 / Crayon Syntax Highlighter / 코드 문법 하이라이트 플러그인

Crayon Syntax Highlighter 프로그래밍을 주제로 하는 블로그나 사이트라면 수많은 코드를 글에 포함하게 됩니다. 코드는 <pre> 태그나 <code> 태그를 이용하여 고정폭 글꼴로 나타낼 수도 있으나, 단색으로 나타내므로 읽는게 불편합니다. 워드프레스에는 이런 불편을 해소해주는 Syntax Highlighter 플러그인이 많습니다. 그 중 사용하기 편하고 다양한 기능을 가진 플러그인이 Crayon Syntax Highlighter입니다. Crayon Syntax Highlighter는 꽤 오랫동안 업데이트가 되지 않고 있어서 ...

워드프레스 강좌 / 글 / 고전 편집기 / 화면 옵션

워드프레스 강좌 / 글 / 고전 편집기 / 화면 옵션

워드프레스 관리자 페이지의 메뉴는 왼쪽에 있습니다. 플러그인이나 테마를 설치하면 메뉴는 더 늘어납니다. 왼쪽의 메뉴를 클릭하면 오른쪽에 관련 내용이 나옵니다. 그런데 보여줄 수 있는 모든 내용이 다 나오지는 않습니다. 화면 크기가 한정되어 있다보니 자주 사용되거나 중요한 내용만 나오기도 합니다. 숨겨진 내용은 오른쪽 위의 에서 보이게 할 수 있습니다.(반대로 화면에 있는 내용을 숨길 ...

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

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

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

워드프레스 / 우커머스 / 상점 페이지, 카테고리 페이지 등에서 진열되는 상품 수 설정하는 방법

워드프레스 / 우커머스 / 상점 페이지, 카테고리 페이지 등에서 진열되는 상품 수 설정하는 방법

기본적인 설정 방법 를 변경하면 진열되는 상품의 개수도 바뀝니다. 만약 이 방법이 통하지 않거나, 포스트와 다른 개수로 정하고 싶다면 아래의 방법을 이용합니다. 우커머스에서 제공하는 코드 우커머스에서는 아래의 코드를 functions.php에 추가하면 된다고 합니다. 15를 적절히 수정합니다. function new_loop_shop_per_page( $cols ) { $cols = 15; return $cols; } add_filter( 'loop_shop_per_page', ...

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

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

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

워드프레스 강좌 / 글 / 글 쓰기

워드프레스 강좌 / 글 / 글 쓰기

포스트를 쓰는 건 인터넷 게시판에 글을 쓰는 것과 별반 다르지 않습니다. 제목과 본문을 작성하고 이미지나 파일 등을 첨부한 후 저장하면 됩니다. 하지만 인터넷 게시판에서는 볼 수 없는 설정들이 몇가지 있으니 그 내용들을 중점적으로 보시면 됩니다. 글 쓰기는 에서 합니다. 화면 옵션 새 포스트를 작성하는 화면으로 가면 글을 입력할 수 있는 ...

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

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

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

워드프레스 강좌 / 설치하기

워드프레스 강좌 / 설치하기

시스템 요구사항 워드프레스를 설치하려면 PHP를 사용할 수 있는 웹서버와 데이터베이스 서버가 필요합니다. 웹서버는 어떤 것이든 상관없지만, 권장되는 것는 Apache와 NginX입니다. 데이터베이스 서버는 MySQL 또는 MariaDB가 필요합니다. We recommend servers running version 7.3 or greater of PHP and MySQL version 5.6 OR MariaDB version 10.0 or greater. We also recommend either Apache or Nginx as ...