WordPress에서 시각적 링크 미리보기를 만드는 방법

유용한 리소스, 관련 제품, 판촉 CTA 또는 재미있는 큐레이트 조각과 같은 콘텐츠로 WordPress 페이지 및 게시물을 풍부하게 하면 귀하 또는 귀하의 브랜드가 청중에게 더 많은 가치를 제공하는 데 도움이 될 수 있습니다. 하지만 평범한 링크가 항상 잘리는 것은 아닙니다. 앵커 텍스트와 주변 감정이 충분히 매력적이지 않으면 해당 링크가 바로 스쳐 지나갈 수 있습니다. Facebook에서 볼 수 있는 향상된 링크와 같이 웹사이트에 대한 시각적 링크를 만들어 방문자가 관심을 가질 만한 매력적인 대화형 콘텐츠를 추가할 수 있습니다. WordPress용 Visual Link Preview 플러그인은 링크에 더 많은 파나치를 추가하는 간단한 방법입니다.

다음은 이 플러그인을 사용할 수 있는 몇 가지 방법입니다.

• 제휴 링크에 CTA를 추가합니다.
• 주장, 사실 및 통계를 백업하십시오.
• 다른 사이트의 콘텐츠를 선별합니다.
• 독자가 자세히 알아볼 수 있는 유용한 리소스를 포함합니다.
• 전자 상거래 상점 제품을 홍보하십시오.

또한 가장 단순한 형태의 Visual Link Preview 플러그인은 관련 게시물에 링크하고 사람들이 귀하의 사이트에 더 오래 머물게 하는 보다 매력적인 방법입니다.

플러그인을 사용하면 내부 또는 외부 링크에 대한 시각적 미리보기를 만들 수 있으며 브랜드 또는 사이트와 일치하는 스타일로 사용자 지정 템플릿을 만들 수도 있습니다. 그런 다음 게시물이나 페이지의 아무 곳에나 간소화된 미리보기 상자를 배치합니다. 구텐베르크와 클래식 편집기 모두에서 WordPress에 미리보기 상자를 추가하는 방법을 살펴보겠습니다.

Visual Link Preview 플러그인 찾기 및 설치

이미 이 작업을 수행하는 방법을 알고 있을 것입니다. 그러나 만일을 대비하여 새 WordPress 플러그인을 설치하는 방법에 대한 매우 빠른 설명은 다음과 같습니다.

• WordPress 대시보드에 로그인합니다.
• 왼쪽 사이드바에서 플러그인을 선택합니다.
• 플러그인 아래에 표시될 하위 메뉴에서 새로 추가를 선택합니다.
• 페이지 오른쪽 상단의 검색 창에 "Visual Link Preview"를 입력합니다.
• 플러그인 미리보기 상자의 오른쪽 상단에서 지금 설치를 클릭합니다.
• 설치가 완료되면 활성화를 클릭합니다.

플러그인을 활성화하면 플러그인 페이지로 리디렉션되고 상단에 이 알림이 표시됩니다. (시작하기 문서에서 이 페이지로 이동합니다.)

설정 및 사용자 정의 시작하기

플러그인이 활성화되면 플러그인 목록을 아래로 스크롤하여 찾습니다. 플러그인 이름 아래에서 설정 링크를 클릭하면 다음 페이지로 이동합니다.

기본적으로 사용자 정의 스타일 사용 토글은 꺼져 있습니다. 토글하면 다양한 옵션이 나타납니다.

다음에 대한 사용자 정의가 있습니다.

• 컨테이너 너비, 배경색 및 패딩.
• 테두리 반경, 너비, 스타일(실선, 파선, 점선 등) 및 색상.
• 이미지 위치(왼쪽, 오른쪽, 위쪽 또는 아래쪽), 크기 및 테두리 반경.
• 제목 및 요약 글꼴의 크기와 색상입니다.

대부분은 설명이 필요 없지만 이미지 크기에 대해 알아야 할 몇 가지 사항이 있습니다. 축소판 크기 또는 사용자 정의 크기를 설정할 수 있습니다. 썸네일의 경우 표준 크기는 "썸네일", "중간" 및 "대"이므로 필드에 원하는 대로 입력하면 됩니다. 또는 너비x높이(예: 150×150) 형식으로 사용자 정의 크기를 설정할 수 있습니다.

지금은 기본 링크 상자가 어떻게 생겼는지 보기 위해 모든 것을 그대로 두겠습니다. 그럼 다시 들어가서 수정하겠습니다.

Gutenberg 블록 편집기와 함께 플러그인 사용

블로그 게시물 초안으로 이동하여 단락 아래에 블록을 추가했습니다. 위젯 아래에서 Visual Link Preview 블록을 찾거나 블록 선택기 상단에서 검색할 수 있습니다.

Visual Link Preview 블록은 다음과 같습니다.

게시물 또는 페이지 선택 상자를 클릭하면 콘텐츠 드롭다운이 표시되지 않습니다. 원하는 것을 검색해야 합니다. 외부 URL에 대한 링크를 추가할 수도 있습니다(잠시 후에 설명하겠습니다).

게시된 블로그 게시물을 선택했습니다. 스타일을 사용자 정의하지 않은 상태는 다음과 같습니다.

Gutenberg에서 Visual Link Preview의 차단 설정

블록 상단에 있는 세 개의 점 스택을 클릭하면 드롭다운 메뉴가 표시됩니다. 블록 설정 표시를 선택하여 옵션이 있는 오른쪽 사이드바를 불러옵니다. 여기에서 다음과 같이 몇 가지를 변경할 수 있습니다.

링크를 변경합니다. 링크 변경을 클릭하면 보유하고 있는 링크가 즉시 제거되므로 실수로 클릭하지 않도록 주의하십시오.

디스플레이 이미지를 변경하거나 제거합니다. 디스플레이 이미지를 제거하면 Visual Link가 다음과 같이 보입니다.

이미지 없이 보이는 방식이 마음에 들지 않으면 이미지 선택을 클릭하여 다시 추가할 수 있습니다. 그러나 미디어 라이브러리를 살펴보거나 이미지를 업로드해야 합니다. 자동 옵션이 ​​없습니다. -링크를 처음 추가했을 때와 마찬가지로 추천 이미지를 다시 추가합니다.

물론 미디어 라이브러리에서 추천 이미지를 찾을 수 있지만 묻혀 있을 수 있습니다. 링크를 다시 추가하여 원본 콘텐츠를 자동으로 추가할 수도 있습니다.

링크 설정을 켜고 끕니다. 새 탭에서 링크를 열도록 선택할 수 있으며 링크를 nofollow 링크로 전환할 수도 있습니다.

Gutenberg로 외부 링크 추가하기

이번에는 외부 링크를 추가합니다. 올바른 필드에 복사하여 붙여넣었습니다.

이 URL 사용을 클릭하면 내부 링크를 추가할 때와 동일한 일이 발생합니다. 이미지, 제목 및 발췌문이 자동으로 채워지며 오른쪽 사이드바에서 변경할 수 있습니다. 콘텐츠 섹션에서 로컬에 이미지 저장을 클릭할 수도 있습니다. 그러면 URL 소스에서 가져온 표시 이미지가 WordPress 미디어 라이브러리에 추가됩니다.

재사용 가능한 블록 저장

앞으로 자주 사용하게 될 페이지, 블로그 포스트, 외부 링크가 있다면 한 번 생성하고 재사용 가능한 블록으로 저장해두면 나중에 쉽게 추가할 수 있습니다. 참고로 구텐베르크 편집기에서만 작동합니다.

블록 생성을 마치면 옵션 사이드바에 액세스할 때 사용한 것과 동일한 상단의 점 3개 아이콘을 클릭합니다. 그런 다음 재사용 가능한 블록에 추가를 선택합니다. 블록에 제목을 지정할 수 있으며 나중에 사용할 수 있도록 블록 라이브러리에 있습니다.

클래식 편집기에서 플러그인 사용

클래식 편집기를 사용하여 게시물이나 페이지로 이동하여 시각적 링크를 추가할 위치로 이동합니다. 페이지 상단에 있는 Visual Link Preview 버튼을 클릭합니다.

이 상자가 나타납니다:

유형 드롭다운에서 자신의 링크 또는 외부 링크를 추가하도록 선택할 수 있습니다. 먼저 내 링크를 추가하겠습니다. 연결할 콘텐츠를 선택하면 Gutenberg와 마찬가지로 필드가 자동으로 채워집니다. 여기에서 변경할 사항이 있습니다. 이 창에서 이미지를 제거하고 새 이미지를 추가하고 제목을 변경하고 요약을 업데이트하도록 선택할 수 있습니다. 여기에서 Gutenberg와 마찬가지로 플러그인의 기본 설정이나 사용자 정의 템플릿을 사용할 수도 있습니다.

클래식 편집기로 외부 링크 추가하기

이번에는 외부 링크를 추가하겠습니다. 다음은 외부 링크에 대한 필드입니다.

URL을 추가하면 내부 링크와 마찬가지로 필드가 자동으로 업데이트됩니다. 그런 다음 페이지나 게시물에 삽입하기 전에 원하는 대로 변경할 수 있습니다. 클래식 편집기에도 이미지를 로컬에 저장 옵션이 있습니다.

시각적 링크 미리 보기 템플릿 및 상자 사용자 지정

해당 블록 설정 표시줄에는 설정 템플릿의 기본값 사용 또는 단순 템플릿 중에서 선택할 수 있는 하단의 스타일 섹션도 있습니다. 하지만 실제로는 같은 것이기 때문에 혼란스럽습니다. 잠시 후에 더 설명하겠습니다. 먼저 링크 미리보기 상자를 사용자 정의하는 방법에 대해 알아보겠습니다.

해당 스타일 섹션에서 템플릿 스타일 변경 링크를 클릭합니다. 사용자 정의 템플릿을 만들 수 있는 새 페이지가 열립니다(플러그인 설정을 통해 여기에서도 얻을 수 있음). 다시 말하지만, 사용자 정의는 간단하고 설명적이며 간단하므로 쉽게 길을 찾을 수 있습니다. 다음은 몇 가지 사용자 지정 작업을 수행한 후의 템플릿 모양입니다.

별로. 문제의 일부는 미리보기 텍스트가 너무 깁니다. 게시물이나 페이지로 돌아가서 블록을 클릭하면 오른쪽 사이드바에 편집기가 나타납니다. 그런 다음 콘텐츠 섹션으로 이동하여 제목 및 발췌 필드를 클릭하여 변경할 수 있습니다.

썸네일을 사용하는 대신 템플릿 사용자 정의 페이지로 돌아가서 이미지의 사용자 정의 크기를 입력하여 정사각형(다행히도 완벽하게 잘린 이미지)으로 바뀌었습니다. 나는 제목과 발췌본을 가지고 놀았고 블록과 그림 옆에 더 잘 크기가되도록 더 많이 복사했습니다. 이게 낫다:

올바른 사용자 지정을 찾는 데 많은 시간을 할애할 수 있으며, 특히 사용자 지정 템플릿을 하나만 만들 수 있기 때문에 그렇게 해야 합니다.

템플릿 사용자 정의 미리보기

템플릿을 사용자 지정할 때 실시간 미리보기를 볼 수 없습니다. 게시물 또는 페이지를 새 창에서 열고 템플릿 사용자 지정 페이지에서 변경한 다음 게시물 또는 페이지로 돌아가기를 클릭해야 합니다. 두 드롭다운 템플릿 옵션 사이를 앞뒤로 전환합니다(실제로 서로 다르지 않음을 기억하십시오). 이렇게 하면 상자가 새로 고쳐져 최신 변경 사항을 볼 수 있습니다.

기본 스타일을 다시 가져오는 방법

많은 변경을 수행한 다음 기본 스타일을 선호한다는 것을 알게 되었다고 가정해 보겠습니다. 템플릿 설정에서 사용자 지정 스타일 사용 토글을 켠 상태로 두면 설정에서 기본값 사용을 선택하든 템플릿 드롭다운에서 단순을 선택하든(내가 말했듯이, 혼란).

플러그인의 기본값으로 되돌리려면 템플릿 설정 페이지로 이동하여 사용자 지정 스타일 사용 버튼을 끌 수 있습니다. 결국 다시 켜고 싶다면 모든 사용자 정의가 거기에 있지만, 플러그인의 모양을 선호하는 경우 플러그인의 기본값을 사용할 수 있습니다.

Visual Link Preview 플러그인의 단점

Visual Link Preview 플러그인은 기능을 수행하는 간단하고 간단한 플러그인이며 사용법을 배우기가 매우 쉽습니다. 하지만 너무 기본적이기 때문에 개선이 필요한 몇 가지 부분에서도 부족합니다.

모든 콘텐츠가 포함된 드롭다운 메뉴가 없습니다. 링크로 추가할 블로그 게시물이나 페이지의 이름을 기억하는 대신 이 옵션을 원했습니다.

맞춤형 템플릿의 실시간 미리보기는 볼 수 없습니다. 그것이 완벽한 패딩 양인지 또는 어떤 유형의 테두리를 사용할지 확인하고 싶을 때마다 게시물과 템플릿 설정 페이지 사이를 왔다 갔다 하는 것은 꽤 투박합니다.

사용자 지정 템플릿은 하나만 만들 수 있습니다. 이것이 플러그인의 가장 큰 단점입니다. 여러 템플릿을 만든 다음 특정 페이지, 블로그 게시물 또는 링크 유형과 일치시키는 데 사용할 템플릿을 선택할 수 없습니다. 또한 사용자 정의 템플릿을 사용하도록 일부 미리보기 상자를 설정하고 플러그인의 기본값을 사용하도록 다른 상자를 설정할 수 없습니다. 둘 중 하나입니다.

마무리

대체로 단점에도 불구하고 Visual Link Preview 플러그인이 마음에 들었습니다. Gutenberg 또는 Classic 중 선호하는 편집기에 관계없이 설정 및 사용이 매우 간편합니다. 이것은 확실히 더 미학적으로 즐겁고 눈길을 끄는 링크를 추가하는 방법입니다. 제휴 마케팅에 참여하거나 방문 페이지에 링크하려는 경우 훨씬 더 멀리 갈 수 있습니다. 지금은 템플릿을 두 개 이상 만들 수 없으므로 모든 게시물과 페이지에 걸쳐 표준화된 모양을 가진 웹사이트에 가장 적합합니다. 따라서 다양한 스타일의 다양한 랜딩 페이지가 있는 경우 배치 위치에 상관없이 하나의 미리보기 상자 템플릿을 만드는 데 어려움을 겪을 것입니다. 그렇지 않으면 이것은 한 가지 작업을 잘 수행하는 가벼운 플러그인입니다.

앵커 링크를 사용하여 Divi에서 할 수 있는 5가지 멋진 작업이 포함된 이 기사를 좋아할 수도 있습니다.