브라우저 스크린샷을 자동으로 찍어 WordPress에 표시하는 방법

이미지와 스크린샷은 모든 WordPress 블로그의 핵심 요소입니다. 특히 스크린샷을 통해 다른 페이지의 주요 측면을 강조할 수 있습니다. 그러나 완벽한 브라우저 스크린샷을 찍어 게시물에 추가하는 것은 번거로울 수 있습니다. 운영 체제(OS)에 따라 작업을 완료할 수 있지만 스크린샷을 일관되게 찍는 것은 어려운 일입니다.

브라우저 스크린샷 플러그인을 입력합니다. 이를 통해 WordPress 편집기를 종료하지 않고도 모든 웹사이트를 스크린샷할 수 있습니다. 귀가 멍멍하면 계속 읽고 싶어질 것입니다.

어떻게 작동하는지 확인합시다!

YouTube 채널 구독

브라우저 스크린샷 플러그인 소개

브라우저 스크린샷은 틀림없이 귀하의 웹사이트에 들어갈 만한 틈새 플러그인입니다. WordPress 편집기 를 종료 하지 않고도 모든 페이지의 동적 브라우저 스크린샷을 찍을 수 있습니다. 이것은 선호하는 옵션에 따라 클래식 편집기와 블록 편집기 모두에 적용됩니다. 이는 플랫폼 외부에서 새로운 브라우저 창을 열고 이미지를 추가로 최적화해야 하는 OS 기본 솔루션과 대조됩니다.

클래식 편집기를 사용하는 경우 브라우저 스크린샷을 사용하면 사용자 정의 단축 코드를 사용하여 원하는 샷을 생성할 수 있습니다. 페이지나 게시물에 여러 스크린샷을 추가할 수 있으며 블록 편집기에도 동일하게 적용됩니다.

플러그인은 스크린샷을 동적으로 생성하므로 콘텐츠에 오래된 샷을 사용하고 싶지 않은 상황에 적합합니다. 브라우저 스크린샷 단축 코드 또는 블록이 포함된 페이지 또는 게시물이 있는 경우 방문자는 실시간 화면 캡처를 볼 수 있습니다. 이것은 특정 유형의 콘텐츠에 대한 매력적인 제안입니다.

어떤 접근 방식을 사용하든 플러그인을 사용하면 찍은 브라우저 스크린샷의 해상도를 사용자 지정할 수도 있습니다. 또한 이미지에 대체 텍스트와 텍스트를 추가할 수 있을 뿐만 아니라 사용자 정의 CSS 클래스도 추가할 수 있습니다.

그러나 이 플러그인은 '스크롤 없이 볼 수 있는' 브라우저 스크린샷만 캡처한다는 점을 이해하는 것이 중요합니다. 즉, 스크롤해야 하는 영역이 표시되지 않습니다. 이 영역의 크기는 각 브라우저 스크린샷에 대해 구성한 매개변수에 따라 다르며 나중에 이 작업을 수행하는 방법을 배우게 됩니다.

주요 특징들:

• 단축 코드 또는 블록을 사용하여 브라우저 창에 있는 모든 웹 사이트의 사용자 지정 샷을 찍습니다.
• 수동으로 캡처하거나 업로드할 필요 없이 콘텐츠 내에 브라우저 스크린샷을 추가합니다.
• 브라우저 스크린샷의 해상도를 사용자 지정합니다.
• 플러그인이 생성하는 이미지에 사용자 정의 CSS 클래스를 추가하십시오.
• 이미지에 링크와 대체 텍스트를 추가합니다.

가격: 무료 | 추가 정보

브라우저 스크린샷 플러그인 사용 방법(2가지 접근 방식)

지금까지 브라우저 스크린샷 플러그인이 어떻게 작동하는지 이미 알고 있으므로 사용 방법에 대해 논의해 보겠습니다. 단축 코드는 플러그인의 기본 부분이므로 먼저 살펴보겠습니다.

1. 단축 코드를 사용하여 동적 브라우저 스크린샷 생성

브라우저 스크린샷 플러그인을 사용하면 다음 사용자 정의 단축 코드를 사용하여 동적 브라우저 샷을 생성할 수 있습니다.

[browser-shot url="elegantthemes.com" width="600" height="400"]

단축 코드에는 너비 와 높이의 두 가지 기본 매개변수가 포함됩니다. 두 매개변수 모두 픽셀 값을 사용하며 플러그인이 촬영에 사용하는 기본 해상도는 600 x 400 입니다. 물론 스크린샷을 찍고 싶은 특정 URL도 단축 코드에 추가하고 싶을 것입니다.

블록 편집기 또는 클래식 편집기를 사용하는지 여부에 관계없이 단축 코드는 다음과 유사한 스크린샷을 렌더링합니다.

그러나 브라우저 스크린샷을 사용하여 여러 사용자 정의 매개변수를 설정할 수도 있습니다. 너비와 높이 외에 다음이 포함됩니다.

• Alt: 이 매개변수를 사용하면 스크린샷에 대한 대체 텍스트를 설정할 수 있습니다.
• 링크: 이 매개변수를 사용하여 이미지가 가리키는 링크를 선택할 수 있습니다(샷이 시작된 위치와 다를 수 있음).
• 대상: 이 매개변수를 사용하면 이미지 링크가 새 창에서 열릴지 여부를 제어할 수 있습니다.

예를 들어 모든 매개변수를 포함하는 전체 단축 코드는 다음과 같습니다.

[browser-shot url="http://www.google.com" width="700" height="500" alt="Google's homepage" link="http://www.otherwebsite.com"]

단축 코드를 사용하여 수동으로 캡션을 추가할 수도 있습니다.

[browser-shot url="http://www.google.com" width="700" height="500" alt="Google's homepage" link="http://www.otherwebsite.com"]Here's the caption[/browser-shot]

대부분의 경우 사용할 가장 중요한 두 매개변수는 width 와 height 입니다. 자주 찍는 모든 브라우저 스크린샷에 동일한 값을 사용하면 최상의 결과를 반환하지 않으므로 콘텐츠에 맞게 매개변수를 조정해야 합니다.

2. 블록을 사용하여 웹사이트에 스크린샷 추가

블록 편집기를 사용하는 경우 브라우저 스크린샷 플러그인을 통해 브라우저 샷 이라는 새 블록에 액세스할 수 있습니다.

차단을 선택하면 플러그인에서 스크린샷을 생성하는 데 사용할 웹사이트를 묻는 메시지가 표시됩니다. 이 예에서는 Amazon US 홈페이지를 사용하고 있습니다.

이미지 찾기 를 클릭하면 플러그인이 스크린샷을 '찍어서' 블록 편집기에 표시합니다.

한 가지 명심해야 할 점은 플러그인이 비공개 페이지에 액세스하거나 로그인할 수 없다는 것입니다. 이러한 유형의 브라우저 스크린샷의 경우 더러운 작업을 직접 수행해야 합니다.

계속 진행하면 해당 스크린샷의 오른쪽에 차단 세부 정보 탭이 표시됩니다. 이를 통해 사용자 정의 단축 코드를 추가할 필요 없이 앞에서 논의한 모든 매개변수를 수정할 수 있습니다.

블록 편집기를 사용하여 브라우저 스크린샷의 너비와 높이를 수정하는 것이 훨씬 간단합니다. 편집기에서 높이 및 너비 매개변수 아래의 이미지 새로 고침 버튼을 눌러 미리보기를 확인할 수 있기 때문입니다.

두 예를 비교하면 해상도 변경이 플러그인 스크린샷 영역을 어떻게 수정하는지 알 수 있습니다. 이 외에도 스크린샷에 사용자 지정 링크를 추가하고 새 탭에서 열릴지 여부를 구성하고 여기에서 사용자 지정 CSS 클래스를 설정할 수도 있습니다.

결론

블로그 콘텐츠에 브라우저 스크린샷을 정기적으로 포함하는 경우 브라우저 스크린샷 플러그인을 사용하면 많은 시간을 절약할 수 있습니다. 꽤 틈새 플러그인이지만 우리가 언급한 군중에 속한다면 게시물 편집이 훨씬 쉬워질 것입니다.

브라우저 스크린샷을 사용하면 간단한 단축 코드 또는 블록 편집기를 사용하여 브라우저의 스크린샷을 추가할 수 있습니다. 단축 코드의 경우 플러그인에는 너비, 높이 및 Alt (대체 텍스트의 경우)와 같은 스크린샷을 사용자 정의할 수 있는 여러 매개변수가 포함되어 있습니다.

브라우저 스크린샷 플러그인을 사용하는 방법에 대해 질문이 있습니까? 아래 코멘트 섹션에서 그들에 대해 이야기합시다!

VectorMine/Shutterstock.com의 기사 축소판 이미지