워드프레스 사이트에 라이트박스 추가하기: 초보자를 위한 궁극의 가이드

Lightbox는 이미지 기반 웹사이트의 많은 흥미롭고 인기 있는 기능 중 하나입니다. 그러나 모든 사람이 WordPress 웹사이트, 특히 초보자에게 라이트박스를 추가하는 방법을 아는 것은 아닙니다. 따라서 초보자가 WordPress 웹 사이트에 라이트박스를 추가하는 데 도움이 되도록 이 가이드를 제공합니다.

라이트박스란 무엇이며 어떻게 추가합니까?

Lightbox는 전체 화면 팝업을 만들고 페이지의 나머지 부분을 흐리게 처리 하여 이미지와 동영상을 표시하는 모달 이미지 갤러리입니다. 예를 들어:

이 아름답고 멋진 효과는 포트폴리오, 사진 또는 이미지 기반 웹사이트에 매우 유용합니다. 그것은 당신 이 이미지를 명확하게 볼 수있게하고 귀하의 웹 사이트를 더욱 돋보이게 만듭니다 .

일반적으로 WordPress 웹사이트에 라이트박스를 사용하는 방법에는 3가지가 있습니다.

• 단축 코드 추가
• 플러그인 설치
• 라이트박스를 지원하는 테마를 사용합니다.

초보자의 경우 숏코드 추가는 고급 사용자 전용이므로 플러그인을 사용하거나 해당 기능을 염두에 두고 테마를 찾는 것이 좋습니다.

테마가 지원하는 경우 라이트박스 표시

테마가 이미 갤러리/이미지에 대한 라이트박스를 표시하고 있다면 말할 것도 없습니다. 그러나 우리는 많은 테마가 그것을 보여주기 위해 더 많은 단계가 필요하다는 것을 알고 있습니다. 예를 들어, 이 테마 ePortfolio는 라이트박스를 지원하지만 라이트박스를 표시하려면 갤러리를 미디어 파일에 연결해야 합니다.

일반적으로 미디어 파일 링크 또는 첨부 페이지의 두 가지 옵션이 있습니다. 이미지/갤러리를 첨부 페이지에 링크할 때 이미지를 클릭하면 이미지만 포함된 별도의 새로운 페이지가 열립니다. 미디어 파일에 링크하면 다음과 같이 페이지가 아닌 이미지만 표시됩니다.

다음은 이를 수행하는 지침입니다.

먼저 게시물 편집기 로 이동한 다음 갤러리를 클릭합니다.

Gutenberg Editor를 사용하는 경우 오른쪽 사이드바를 보면 Link to 섹션이 표시됩니다.

단일 이미지의 경우 도구 모음에서 이 아이콘을 클릭해야 합니다.

클래식 편집기에서 갤러리 및 단일 이미지를 생성하거나 편집할 때 링크 섹션이 나타납니다.

그런 다음 미디어 파일을 선택하고 갤러리 삽입을 클릭하여 완료합니다. 게시물을 업데이트 하거나 게시 할 때 해당 갤러리/이미지를 클릭하면 라이트박스가 실행 중인 것을 볼 수 있습니다.

테마가 라이트박스를 지원하는 경우 이 작업은 원하는 갤러리/이미지에 대해 라이트박스를 활성화할 수 있습니다. 그렇지 않으면 라이트박스가 전혀 없을 것입니다.

그러나 구성은 테마에 따라 다를 수 있습니다. 예를 들어, 사용자 지정 프로그램에서 작업해야 하는 경우도 있고 미디어 파일 대신 첨부 페이지에 대한 링크를 삽입해야 하는 경우도 있습니다. 따라서 테마를 잘 확인 해야 합니다.

어떤 테마를 사용하든 갤러리/이미지를 미디어 파일에 연결하는 방법을 알아야 아래 플러그인을 사용하여 라이트박스를 추가하는 데 도움이 됩니다.

플러그인을 사용하여 라이트박스 추가

실제로 라이트박스를 추가하는 것은 전혀 어렵지 않습니다. "lightbox 플러그인" 키워드를 검색하면 이 효과에 대한 플러그인 호스트를 볼 수 있습니다. 연구에 따르면 플러그인을 복잡한 플러그인과 라이트박스를 추가하는 간단한 플러그인의 두 종류로 분류합니다.

복잡한 플러그인의 경우 이미지 크기, 테두리 색상, 라이트박스 스타일 등과 같이 라이트박스를 고도로 사용자 정의할 수 있는 훨씬 더 정교한 옵션이 있습니다. 예를 들어, 반응형 라이트박스 및 갤러리 및 FooBox 이미지 라이트박스에는 더 많은 사용자 정의 도구가 있습니다. 하지만 초보자라면 사용하기가 더 어렵습니다. 게다가 결과는 단순한 플러그인과 크게 다르지 않다. 이것이 우리가 Simple Lightbox 와 같은 간단한 플러그인을 사용하는 것을 선호하는 이유입니다.

Simple Lightbox Author(s): Archetyped Current Version: 2.8.1 Last Updated: July 13, 2021 simple-lightbox.zip 86% Ratings 200,000+ Installs WP 5.3+ Requires

Simple Lightbox Author(s): Archetyped Current Version: 2.8.1 Last Updated: July 13, 2021 simple-lightbox.zip 86% Ratings 200,000+ Installs WP 5.3+ Requires

Simple Lightbox Author(s): Archetyped Current Version: 2.8.1 Last Updated: July 13, 2021 simple-lightbox.zip 86% Ratings 200,000+ Installs WP 5.3+ Requires

Simple Lightbox Author(s): Archetyped Current Version: 2.8.1 Last Updated: July 13, 2021 simple-lightbox.zip 86% Ratings 200,000+ Installs WP 5.3+ Requires

Simple Lightbox Author(s): Archetyped Current Version: 2.8.1 Last Updated: July 13, 2021 simple-lightbox.zip 86% Ratings 200,000+ Installs WP 5.3+ Requires

Simple Lightbox Author(s): Archetyped Current Version: 2.8.1 Last Updated: July 13, 2021 simple-lightbox.zip 86% Ratings 200,000+ Installs WP 5.3+ Requires

이 플러그인은 사용하기 쉽고 200,000개 이상의 활성 설치로 매우 인기가 있으며 160개의 별점을 받았습니다. 게다가 라이트박스 디자인도 좋다.

1단계: Simple Lightbox 플러그인 설치 및 활성화

대시보드 > 플러그인 > 새로 추가 에서 "simple lightbox"를 입력하고 플러그인 설치를 클릭한 다음 활성화 하기만 하면 됩니다.

2단계: Simple Lightbox 플러그인 설정

플러그인 > 설치된 플러그인 에서 Simple Lightbox 탭의 설정 을 클릭합니다.

Simple Lightbox 설정의 활성화 탭

활성화 탭에서는 일부 매개변수를 활성화/비활성화할 수 있습니다. 선택해야 하는 가장 중요한 상자는 갤러리의 라이트박스를 활성화하는 라이트박스 기능 활성화 입니다. 이 상자를 선택하지 않으면 다른 섹션은 모두 의미가 없습니다.

나머지 상자는 선택 사항입니다. 홈페이지, 단일 게시물, 페이지, 아카이브 페이지, 위젯 및 메뉴에 라이트박스를 표시하도록 선택할 수 있습니다.

라이트박스가 너무 많으면 웹사이트가 약간 화려해질 수 있으므로 올바른 섹션에 대한 라이트박스가 필요한지 확인하세요.

Simple Lightbox 설정의 그룹화 탭

아래로 스크롤하면 그룹화 탭이 있습니다. 슬라이더 또는 단일 이미지 형태로 라이트박스를 표시하는 방법을 결정합니다.

항목 그룹화: 하나에서 다음 이미지 로 이동할 수 있는 슬라이더처럼 이미지/갤러리를 표시 하려면 선택합니다. 이 기능을 켜야 이 탭의 다른 섹션이 적용됩니다. 그렇지 않으면 다른 그룹화 섹션이 작동하지 않습니다.

게시물별로 항목 그룹화: 이 상자에 체크 표시를 하면 단일 게시물의 모든 항목을 라이트박스 슬라이더로 그룹화할 수 있습니다 . 게시물 내 이미지/갤러리만 그룹화하고 다른 게시물, 위젯 및 메뉴에서 다른 이미지/갤러리를 제외할 때 수행합니다.

갤러리 항목을 개별적으로 그룹화하고 위젯 항목을 개별적 으로 그룹화하고 메뉴 항목을 개별적 으로 그룹화: 단일 게시물 갤러리의 항목, 위젯의 항목 또는 메뉴 항목을 각각 그룹화 하려면 각 항목에 체크 표시를 합니다 . 즉, 라이트박스 슬라이더에서 동일한 갤러리, 위젯 또는 메뉴의 다음 항목으로 이동할 수 있습니다. 방문자를 혼란스럽게 할 수 있는 다른 부분의 라이트박스를 엉망으로 만들고 싶지 않을 때 이 작업을 수행해야 한다고 생각합니다.

단순 라이트박스 설정의 UI 탭

UI 탭에는 라이트박스 스타일을 수정하는 섹션이 있습니다. 라이트박스 디스플레이를 사용자 정의하려면 이 점에 주의하십시오.

테마: 라이트박스에는 2가지 스타일이 있습니다. 취향에 맞는 것을 선택하면 됩니다.

어두운 스타일

가벼운 스타일

창에 맞게 라이트박스 크기 조정: 멋진 디스플레이를 위해 이 섹션을 켜는 것이 좋습니다. 그렇지 않으면 이미지가 전체 화면이 되어 이렇게 전체 이미지를 볼 수 없습니다.

애니메이션 활성화: 로딩 효과를 활성화하려면 체크합니다.

효과를 비활성화하려면 선택을 취소하여 탐색을 더 빠르게 만듭니다.

자동으로 슬라이드쇼 시작: 이 섹션을 활성화하면 자동으로 다음 이미지로 이동합니다.

슬라이드 길이: 위의 자동 슬라이드쇼 섹션을 켜면 여기에서 슬라이드 길이를 선택할 수 있습니다.

항목 반복 : 슬라이드의 한 라운드 후에 항목을 반복하시겠습니까? 그렇다면 이 상자를 클릭하십시오.

오버레이 불투명도(0 – 1): 배경 오버레이 불투명도를 수정할 수 있습니다. 불투명도가 낮을수록 뒤에 있는 포스트를 더 선명하게 볼 수 있습니다. 예를 들어 배경이 정말 선명하게 보이도록 불투명도를 0,1로 설정했습니다.

기본 제목 사용: 이 상자를 클릭하여 이미지 제목을 표시하도록 선택할 수 있습니다. 다음은 제목이 표시되는 방식입니다.

Simple Lightbox의 레이블 탭

마지막으로 이 탭에서 각 버튼의 레이블을 변경할 수 있습니다. 그러나 테마를 편집할 때 단축 코드를 추가하지 않으면 이러한 섹션이 적용되지 않습니다. 따라서 초보자를 위한 이 튜토리얼에서는 이 탭을 다룰 필요가 없습니다.

Simple Lightbox 플러그인의 모든 설정을 마쳤으면 레이블 탭 바로 아래에 있는 변경 사항 저장을 클릭합니다.

3단계: 이미지/갤러리를 미디어 파일에 연결하여 라이트박스 표시

라이트박스를 추가할 이미지/갤러리를 결정하려면 해당 이미지/갤러리에 대한 미디어 파일 링크를 삽입해야 합니다. 미디어 파일에 대한 링크를 추가하지 않으면 라이트박스가 표시되지 않습니다.

"테마가 지원하는 경우 라이트박스 표시" 부분에서 언급한 가이드를 따르세요. Simple Lightbox 플러그인을 사용하려면 어떻게 해야 하는지 확실히 알아야 한다고 말했습니다.

마지막 말

위의 방법은 WordPress 웹사이트에 라이트박스를 추가하는 가장 쉬운 방법입니다. 특히 초보자라면 Simple Lightbox 플러그인을 사용하는 것이 간단하고 효과적인 방법입니다. 요구 사항, 웹 사이트 및 미학에 따라 가장 바람직한 결과를 얻기 위해 다양한 라이트박스 플러그인을 선택할 수 있습니다. 또는 라이트박스를 지원하는 WordPress 테마를 찾아 해당 효과를 표시하도록 구성할 수 있습니다.

복잡한 라이트박스 플러그인에 대한 추가 지침이 필요하면 아래에 댓글을 남기고 계속 팔로우하세요.