워드프레스 강좌 / 플러그인 / 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
- 만약 라이트박스가 잘 작동하지 않는다면 오류가 있는 스크립트가 있기 때문입니다. 크롬 요소 검사 등으로 스크립트 오류가 있나 살펴보세요.
같은 카테고리의 다른 글
워드프레스 강좌 / 플러그인 / WP Super Cache / 캐시를 이용하여 사이트 속도 빠르게 해주는 플러그인
WP Super Cache 웹사이트 속도는 중요합니다. 홈페이지에 접속했을 때 속도가 느리다면 방문자가 금방 떠나고, 검색 엔진에서도 불이익을 받습니다. 따라서 속도 개선은 사이트 관리자의 중요 업무 중의 하나입니다. 워드프레스는 기본적으로 페이지를 동적으로 만듭니다. 요청이 있으면 데이터베이스에서 자료를 가져와서 테마의 파일들을 이용해 출력을 하기에, 방문자가 접속할 때마다 페이지를 생성합니다. 그래서 정적인 페이지보다 속도가 느립니다. 이를 ...
워드프레스 강좌 / Compress JPEG & PNG images / 이미지 압축 플러그인
워드프레스에 이미지를 업로드하면, 여러 가지 크기의 썸네일이 만들어져서 디스크를 많이 사용하게 됩니다. 따라서 디스크 사용량을 줄이고 싶을 때 제일 먼저 하는 것이 이미지 압축입니다. 이미지를 압축하는 방법은 여러 가지가 있는데, 그 중 하나가 플러그인을 이용하는 것입니다. Compress JPEG & PNG images는 이미지 압축을 도와주는 플러그인입니다. Smush와는 다르게 원본 이미지 압축도 가능합니다.(Smush도 유료는 원본 ...
워드프레스로 만는 A라는 사이트의 콘텐츠를 워드프레스로 만든 B라는 사이트로 옮길 때 사용하는 것이 내보내기와 가져오기입니다. 내보내기 내보내기는 에서 합니다. 사용하는 테마나 플러그인에 따라, 내보내는 콘텐츠가 적을 수도 있고... 많을 수도 있습니다. 내보낼 콘텐츠를 선택한 다음 를 클릭합니다. 다운로드하는 파일은 텍스트만 포함한 XML 파일로, 파일 크기는 그리 크지 않습니다. 가져오기 가져오기는 에서 합니다. ...
워드프레스 강좌 / 플러그인 / Search Exclude / 글 또는 페이지를 검색에서 제외시키는 플러그인
워드프레스는 검색 기능을 갖고 있습니다. 글이나 페이지를 검색할 수 있는 기능인데, 대부분의 테마는 검색 기능을 사용할 수 있게 해놓았습니다. 워드프레스 공식 테마 중의 하나인 Twenty Twenty라면, 상단 오른쪽의 돋보기 아이콘을 클릭하여 검색할 수 있습니다. 흔한 경우는 아니지만, 특정 글이나 페이지가 검색에서 노출되지 않도록 해야할 때가 있습니다. URL을 정확히 아는 사람만 내용을 볼 ...
워드프레스 강좌 / 플러그인 / Content Cards / 링크를 네이버나 페이스북처럼 만들어주는 플러그인
Content Cards 네이버 블로그에서 링크를 추가하면, 썸네일과 요약글이 있는 링크가 만들어집니다. 페이스북에도 비슷한 기능이 있습니다. 워드프레스 자체에는 이 기능이 없지만, Content Cards 플러그인을 이용하면 비슷한 효과를 낼 수 있습니다. 설치 WordPress.ORG에서 공유되는 플러그인이므로 워드프레스 관리자에서 설치할 수 있습니다. 링크 삽입하기 플러그인을 활성화하면 에디터에 아이콘이 하나 생깁니다. 그 아이콘을 클릭하여 링크를 추가합니다. 링크가 가리키는 문서에서 이미지와 제목, 글의 일부를 ...
워드프레스 강좌 / 플러그인 / Schema / 구조화된 데이터 만들어주는 플러그인
구조화된 데이터 SEO와 관련해서 해야 할 것 중의 하나가 구조화된 데이터를 만드는 것입니다. 구조화된 데이터는 콘텐츠에 관련된 정보를 검색 엔진에 알려주는 역할을 합니다. 만약 구조화된 데이터가 없으면 구글 웹마스터도구에서 다음과 같은 메시지를 보여줍니다. 사이트에 구조화된 데이터가 없습니다. 구조화된 데이터은(는) Google에서 사이트의 콘텐츠를 파악하여 검색결과에 리치 스니펫을 표시하는 데 도움을 줍니다. 구조화된 데이터는 HTML 마크업을 ...
워드프레스 강좌 / 플러그인 / Pixabay Images / 무료 이미지 사이트 픽사베이 이미지를 바로 글에 넣을 수 있는 플러그인
Pixabay 픽사베이(Pixabay)는 개인은 물론 상업적 용도로도 사용할 수 있는 이미지를 공유하는 사이트입니다.(대부분 CC0 Creative Commons이나, 간혹 상업적 이용이 곤란한 것도 있으니 다운로드 받기 전에 라이센스를 확인하는 것이 좋습니다.) 현재 백만 개가 넘는 사진, 일러스트, 벡터 이미지, 동영상이 있으며, 일정 수준의 품질을 만족해야 공유 가능하므로 좋은 자료가 많습니다. 한글로 번역이 잘 되어 있는 편이어서 한국 ...
워드프레스의 메뉴는 링크를 가지고 있습니다. 하지만 계층형으로 만들거나 메뉴 그룹을 만들 때 링크가 없는 메뉴가 필요할 때가 있습니다. 기본 기능으로는 그러한 메뉴를 만들 수 없지만, 약간의 편법을 사용하면 가능합니다. 사용자정의 링크를 만듭니다. URL에는 아무거나 입력해도 상관없습니다. 뭘 쓸지 고민된다면 #을 입력하면 됩니다. URL이 비어 있으면 메뉴가 만들어지지 않으므로 꼭 입력해야 합니다. 메뉴 수정으로 가서 ...
워드프레스 강좌 / 플러그인 / Enlighter / 코드 하이라이터(Code Highlighter) 플러그인
Enlighter 워드프레스 코드 하이라이트 플러그인으로 널리 사용되는 것은 Crayon Syntax Highlighter입니다. 그런데 개발이 중단된지 꽤 되었습니다. 그래서 찾은 다른 플러그인이 Enlighter입니다. 어떻게 사용하는지 간단히 알아보겠습니다. 설치와 설정 설치는 워드프레스 관리자 페이지에서 할 수 있습니다. highlighter로 검색 후 설치합니다. 설정은 Enlighter에서 합니다. 다양한 메뉴가 있는데, 기본 설정 그대로 사용해도 큰 불편은 없습니다. 사용법 - 블록 편집기 Enlighter를 ...
워드프레스 강좌 / 플러그인 / Contact Form 7 / 폼메일 만드는 플러그인
Contact Form 7 Contact Form 7은 폼메일 플러그인입니다. 정보를 입력할 수 있는 폼을 쉽게 만들 수 있습니다. 스팸 방지 도구인 reCAPTCHA를 사용할 수 있습니다. 스타일을 구하기 쉽고, 많은 테마에서 Contact Form 7을 지원합니다. 설치 에서 Contact Form 7로 검색하여 설치하고 활성화합니다. 폼메일 페이지 만들기 Contact Form 7을 설치하면 기본적으로 하나의 폼이 생성됩니다. 쇼트코드를 복사합니다. 페이지를 만들고, ...