워드프레스 임베드 링크하려면 플러그인 비쥬얼 링크 프리뷰 설치해야

워드프레스 사용자라면 웹사이트에 다양한 외부 콘텐츠를 통합하는 것이 중요할 수 있습니다. 여기서는 비디오, 맵, 트윗 등을 워드프레스 사이트에 삽입하는 방법에 대해 자세히 설명하겠습니다.

 

이 글을 통해 워드프레스에서 임베드 기능을 활용하는 방법을 단계별로 알아보고, 각 단계마다 유용한 팁도 제공할 것입니다.

 

워드프레스에서 임베드를 적용하는 방법에 대해 자세히 알아보겠습니다. 임베드란 다른 사이트의 링크를 넣었을 때, 링크의 내용을 배너 형식으로 미리 보여주는 것입니다.

 

이렇게 하면 디자인적으로 깔끔하고 독자들도 내용을 미리 확인할 수 있습니다.

 

Visual Link Preview 플러그인 설치

 

1. Visual Link Preview 플러그인 설치

 

워드프레스 대시보드에서 플러그인을 클릭하고 Visual Link Preview를 검색하여 설치하고 활성화합니다.

 

2. 플러그인 설정

 

- 왼쪽 메뉴에서 플러그인을 선택하고 설치한 플러그인을 클릭합니다.

 

- Visual Link Preview를 찾아 설정을 클릭합니다.

 

 

※플러그인 설치 후, 아래 사진에 있는 설정 >>visual Link Preview >>> Documentation 을 차례대로 클릭하세요.

 

 

설정하기

 

 

- Templates 에서 Static  -Simple을 선택합니다. 모바일에서 안 깨진다고 합니다.

 

- 그 아래 초록색 버튼으로 토글하세요.

 

 

 

- 왼쪽 상단 Save Changes를 눌러 변경 사항을 저장합니다.

 

 

 

설정하기

 

 

이제 워드프레스 블로그 게시물에서 링크를 임베드로 삽입할 수 있습니다. 원하는 링크 주소를 입력하고 임베드를 활용해 깔끔한 디자인의 게시물을 작성해보세요 

 

visual link preview 플러그인

 

 

 

아래 단계를 차례대로 진행해주세요.

 

1. Visual Link Preview 플러그인 설치

 

- 워드프레스 대시보드로 이동합니다.

- 플러그인을 클릭하고 **Visual Link Preview**를 검색합니다.

- 플러그인을 설치하고 활성화합니다.

 

2. 플러그인 설정

 

- 왼쪽 메뉴에서 플러그인을 선택합니다.

- 설치한 Visual Link Preview 플러그인을 찾아 클릭합니다.

- 설정 페이지에서 Static Templates 섹션으로 이동합니다.

- Use Custom Styling 옵션을 선택하고 변경 사항을 저장합니다.

 

이제 링크를 임베드로 삽입할 수 있습니다. 게시물 작성 중에 원하는 링크 주소를 입력하면, 링크의 내용이 깔끔한 배너 형식으로 미리 보여질 것입니다. 편리하게 활용해보세요! 

 

 

임베드란 무엇인가요?

 

임베드(embed)란 하나의 웹페이지에 다른 페이지의 콘텐츠를 직접 삽입하는 것을 말합니다.

 

예를 들어, YouTube 비디오나 Google 지도를 자신의 워드프레스 글이나 페이지에 바로 표시할 수 있습니다.

 

워드프레스에서 지원하는 임베드 타입

 

워드프레스는 다양한 외부 서비스의 임베드를 자동으로 지원합니다. 주요 지원 서비스는 다음과 같습니다.

 

- YouTube

- Vimeo

- Twitter

- Facebook

- Instagram

- Google Maps

- SoundCloud

- 그 외 많은 서비스들

 

비디오, 이미지, 기타 미디어 임베드 방법

 

YouTube 비디오 삽입하기

 

1. **비디오 URL 복사**: YouTube에서 공유하고 싶은 비디오를 열고 URL을 복사합니다.

2. **워드프레스 편집기에 붙여넣기**: 글이나 페이지를 작성하는 워드프레스 편집기에서 URL을 텍스트 형태로 붙여넣습니다.

3. **자동 변환 확인**: 워드프레스는 자동으로 URL을 비디오 플레이어로 변환해 줍니다.

4. **미리보기를 통한 확인**: 미리보기 기능을 사용하여 실제 페이지에서 잘 표시되는지 확인합니다.

 

Google Maps 임베드하기

 

1. **지도 공유하기**: Google 지도에서 위치를 선택한 후, ‘공유’ 버튼을 클릭하고 ‘지도 임베드하기’를 선택합니다.

2. **HTML 코드 복사**: 제공되는 HTML 임베드 코드를 전체 복사합니다.

3. **워드프레스 편집기에서 HTML 위젯 추가**: 워드프레스에서 글이나 페이지를 편집할 때 ‘HTML 커스텀’ 블록을 추가하고 복사한 코드를 붙여넣습니다.

 

임베드 시 주의사항

 

1. 속도 저하 : 외부 콘텐츠를 임베드할 때는 페이지 로딩 속도가 저하될 수 있으니 주의가 필요합니다.
2. 보안 문제 : 외부 스크립트가 포함된 경우 보안 문제가 발생할 수 있습니다. 신뢰할 수 있는 소스만 사용하세요.
3. 저작권 문제 : 저작권이 있는 콘텐츠를 임베드하는 경우 저작권 위반 문제가 발생할 수 있으니 주의하세요.

 

최적화 팁

 

캐싱 활용하기 : 캐싱 플러그인을 사용하여 임베드 콘텐츠의 로딩 시간을 줄일 수 있습니다.

비동기 로딩 사용하기 : 스크립트 태그에 ‘async’ 또는 ‘defer’ 속성을 사용하여 페이지 로딩 속도를 향상시킬 수 있습니다.

 

자주 발생하는 문제들과 해결책

 

워드프레스에서 임베드 기능을 사용할 때, 몇 가지 흔히 발생할 수 있는 문제들이 있습니다. 다음은 그 문제들과 해결책을 안내합니다.

 

임베드가 정상적으로 표시되지 않음

 

- **코드 확인**: 임베드 코드가 정확한지, 복사&붙여넣기 과정에서 잘못된 부분은 없는지 다시 확인합니다.

- **테마 호환성 검토**: 일부 워드프레스 테마는 특정 임베드 코드를 제대로 지원하지 않을 수 있습니다. 테마의 문서를 확인하거나 다른 테마로 임시 변경해 볼 수 있습니다.

 

임베드된 콘텐츠가 로딩 속도를 저하시킴 

 

- **지연 로딩 적용**: 이미지나 비디오 등의 콘텐츠에 지연 로딩(lazy loading)을 적용하여 페이지 로딩 시 해당 콘텐츠가 사용자 화면에 나타날 때만 로딩되도록 설정할 수 있습니다.

- **경량화 플러그인 사용**: 이미지 압축 및 최적화 플러그인을 사용하여 임베드 콘텐츠의 파일 크기를 줄입니다.

 

임베드된 콘텐츠가 반응형 디자인과 맞지 않음

 

- **CSS 조정**: 임베드 콘텐츠를 감싸는 div 태그에 `max-width: 100%`와 `height: auto`를 설정하여 크기 조정을 유연하게 합니다.

- **플러그인 활용**: 반응형 디자인을 지원하는 임베드 플러그인을 사용하여 문제를 해결할 수 있습니다.

 

임베드 최적화의 중요성

 

워드프레스 사이트에 임베드를 적용하는 것은 사이트의 다양성과 정보 제공의 폭을 넓힐 수 있는 좋은 방법입니다. 그러나 이를 효과적으로 관리하고 최적화하는 것은 사이트의 전반적인 사용자 경험과 SEO에 중요한 영향을 미칩니다.

 

임베드 콘텐츠는 다음과 같은 이유로 최적화가 필요합니다.

 

- **사용자 경험 개선**: 로딩 시간을 단축시켜 사용자가 콘텐츠를 빠르게 접근할 수 있도록 합니다.

- **SEO 향상**: 검색 엔진은 빠르게 로딩되고 사용자 친화적인 사이트를 선호합니다. 임베드 콘텐츠의 최적화는 사이트의 검색 엔진 순위를 개선할 수 있습니다.

 

지금까지 워드프레스에서 임베드 하는 방법과 주의사항을 살펴보았습니다. 워드프레스에서 임베드 기능을 사용하는 것은 웹사이트를 풍부하고 매력적으로 만들어 줄 수 있는 훌륭한 방법입니다.

 

이 글에서 제시한 팁과 방법들을 활용하여, 여러분의 워드프레스 사이트에 적절히 임베드를 적용하고 최적화하세요.

 

잘 계 획된 임베드 실행은 방문자들의 만족도를 높이고, 최종적으로는 사이트의 성공으로 이어질 것입니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2024 손목닥터9988 포인트 서울 페이 머니 사용처 가맹점

2024 손목닥터9988 포인트 서울 페이 머니 사용처 가맹점 및 사용방법 어디서

 

 

 

 

 

 

카톡 조용한 채팅방 ? 오픈채팅방은 안돼? 카카오 알림 톡

카톡 조용한 채팅방 ? 오픈채팅방은 안돼? 카카오 알림 톡