WordPress에 iFrame을 삽입하는 방법

온라인에서 콘텐츠를 공유하는 것은 일반적인 관행입니다. 그러나 특정 종류의 콘텐츠를 통합하는 방법을 알아내려고 할 때 당황할 수 있습니다. 다른 웹 사이트의 대용량 파일이나 특정 항목을 공유하는 것은 때때로 어려울 수 있습니다.

다행스럽게도 WordPress 웹 사이트에 특정 유형의 콘텐츠를 표시하는 데 사용할 수 있는 상당히 간단한 웹 디자인 방법이 있습니다. HTML을 사용하여 인라인 프레임(iFrame)을 만들면 이미지, 비디오 및 기타 미디어를 온라인에서 더 간단하게 공유할 수 있습니다.

이 기사에서는 웹 사이트에서 iFrames의 다양한 용도를 살펴봅니다. 또한 수동 및 플러그인을 사용하여 iFrame을 만드는 단계도 살펴보겠습니다. 시작하자!

iFrame 사용

iFrame을 사용하면 기본적으로 웹사이트에 다른 곳의 콘텐츠를 볼 수 있는 작은 포털이 생성됩니다. 이는 여러 시나리오에서 유용할 수 있습니다.

iFrame을 사용하면 표시하려는 파일을 실제로 호스팅할 필요가 없습니다. 콘텐츠는 원래 위치에 유지되며 사이트의 프레임을 통해 볼 수 있습니다. 이 기술이 도움이 될 수 있는 한 가지 방법은 큰 파일을 표시하려는 경우입니다. iFrame은 로딩 속도를 늦추지 않고 해당 콘텐츠를 웹 사이트로 가져올 수 있습니다.

iFrame이 HTML5에서 허용되는 유일한 종류의 프레임이라는 점은 주목할 가치가 있습니다. 다음을 포함하여 표시하는 데 사용할 수 있는 다양한 종류의 콘텐츠가 있습니다.

• 이미지: iFrames를 사용하여 외부 갤러리의 고품질 이미지를 표시하고 파일 크기로 인한 손상을 방지할 수 있습니다.
• 비디오: YouTube 또는 Vimeo와 같은 플랫폼에서 비디오를 호스팅하고 iFrame을 사용하여 웹사이트에 배치하면 웹사이트 저장 공간을 확보하면서 사용자 경험을 향상시킬 수 있습니다.
• 기타 웹 콘텐츠: 포트폴리오 페이지 또는 레시피와 같은 다른 웹사이트의 콘텐츠를 강조 표시하면 청중에게 풍부한 콘텐츠를 쉽게 제공할 수 있습니다.

iFrame을 사용하면 복잡한 저작권 규칙도 피할 수 있습니다. 여러 법원에서 iFrame을 사용하여 저작권이 있는 자료를 표시하는 것이 모든 경우에 저작권 침해를 구성하는 것은 아니라고 판결했습니다.

웹 사이트에는 콘텐츠가 iFrame에 포함되지 않도록 하는 스크립트도 포함될 수 있습니다. 그러나 사용하는 콘텐츠의 원본 제작자를 항상 밝히거나 진행 방법을 잘 모르는 경우 법률 자문을 구하는 것이 좋습니다.

플러그인과 함께 iFrame 사용

WordPress 웹사이트에서 iFrame을 사용하는 가장 쉬운 방법 중 하나는 iFrame 플러그인을 사용하는 것입니다. 다행스럽게도 선택할 수 있는 높은 등급의 옵션이 몇 가지 있습니다.

1단계: iFrame 플러그인 다운로드 및 구성

이 예에서는 고급 iFrame 플러그인을 사용합니다. 유연하고 사용이 간편하며 매우 좋은 평가를 받았습니다.

플러그인을 설치하고 활성화하면 WordPress 대시보드에서 새로운 Advanced iFrames 메뉴 항목을 찾을 수 있습니다. 고급 iFrame에는 매우 광범위한 옵션 세트가 있습니다. 옵션 탭에서 시작하고 "빠른 시작" 비디오를 검토하십시오.

그런 다음 아래로 스크롤하여 일부 플러그인 옵션을 검토할 수 있습니다. 이들은 모두 유용한 설명과 선택하기 쉬운 선택으로 설정되어 있습니다.

고급 iFrames는 또한 무료 iFrame 검사기를 제공하여 귀하가 제공하는 모든 URL에 콘텐츠가 iFrame에 포함되지 않도록 하는 스크립트가 포함되어 있는지 확인합니다. 웹사이트의 iFrame에서 사용하기 전에 이 도구를 통해 URL을 실행하는 것이 좋습니다.

기본 설정 탭도 검토하고 싶을 것입니다. 여기에서 높이, 너비 및 프레임 테두리와 같은 iFrame의 요소를 사용자 지정할 수 있습니다.

필요에 맞게 플러그인 설정을 구성하면 웹사이트에서 iFrames를 사용할 수 있습니다.

2단계: 고급 iFrame 블록 사용

WordPress 블록 편집기에서 이제 고급 iFrames 블록을 사용할 수 있습니다.

처음 사용하려고 할 때 이 블록을 찾는 데 문제가 있는 경우 위젯 범주 아래에 있을 것입니다.

고급 iFrame 블록을 클릭하면 플러그인 제작자 웹사이트의 콘텐츠가 자동으로 로드됩니다. 페이지 오른쪽에 있는 차단 옵션을 사용하여 차단을 구성할 수 있습니다.

여기에서 iFrame에 표시하려는 콘텐츠의 URL을 추가할 수 있습니다. 필요한 경우 일부 플러그인 설정을 재정의할 수도 있습니다.

3단계: 사이트 미리보기

iFrame 검사기를 사용하여 URL을 테스트했다면 준비가 된 것입니다. 그러나 콘텐츠를 게시하기 전에 항상 변경 사항을 미리 보는 것이 가장 좋습니다. iFrame을 편집하고 변경할 때 iFrame의 실시간 미리보기가 표시되어야 합니다.

편집 창의 오른쪽 상단에 있는 미리보기 옵션을 사용하여 사이트의 메뉴 및 사이드바 컨텍스트에서 게시물을 볼 수도 있습니다.

플러그인 없이 iFrame 사용

플러그인으로 작업하고 싶지 않지만 여전히 iFrames를 사용하고 싶다면 운이 좋습니다! 게시물과 페이지에 코드를 수동으로 적용하여 iFramed 콘텐츠를 포함할 수 있습니다.

1단계: 임베드 코드 삽입

YouTube의 동영상과 같은 콘텐츠를 웹사이트에 통합하려면 YouTube에서 제공하는 포함 코드를 찾아야 합니다. 공유 를 클릭하면 동영상 아래에서 찾을 수 있습니다.

그러면 공유 옵션 메뉴가 나타납니다. iFrame에 필요한 코드를 가져오려면 Embed를 선택해야 합니다.

포함된 콘텐츠의 미리보기가 있는 별도의 창이 열립니다. 그러면 iFrame 코드 스니펫을 복사할 수 있습니다.

시청자가 특정 시간 코드에서 콘텐츠 보기를 자동으로 시작하도록 하려면 시작 상자를 선택할 수도 있습니다.

다음으로 WordPress 게시물로 돌아가서 사용자 지정 HTML 블록을 추가합니다. 서식 범주에서 찾을 수 있습니다.

게시물에 이 블록을 추가한 후 YouTube 페이지에서 복사한 임베드 코드를 붙여넣기만 하면 됩니다.

다음으로 임베딩이 제대로 작동하고 원하는 대로 보이는지 확인해야 합니다. 사용자 지정 HTML 블록에서 미리 보기를 클릭하여 iFrame이 작동하는지 확인할 수 있습니다.

이를 통해 웹사이트에 iFrame을 성공적으로 배치했습니다. 임베드 코드를 제공하는 모든 플랫폼에서 동일한 프로세스가 작동합니다.

2단계: iFrame 사용자 지정

iFrame이 게시물이나 페이지에 표시되는 방식이 여전히 만족스럽지 않은 경우 코드에서 일부 값을 수동으로 조정할 수 있습니다. CSS(Cascading Style Sheets)를 사용하여 iFrame이 웹 사이트에 표시되는 방식을 완전히 사용자 지정하는 것이 좋습니다.

iFrame 태그는 다양한 사용자 지정 속성을 허용합니다. 그러나 이들 중 많은 부분이 더 이상 HTML5에서 지원되지 않는다는 점에 유의해야 합니다. 사용자 지정 HTML 블록에서 직접 특정 형식을 재정의하지 못할 수 있으므로 앞에서 언급한 테마의 CSS를 조사해야 할 수 있습니다.

3단계: iFrame 콘텐츠를 정기적으로 확인

iFrames를 사용할 때 프레임 콘텐츠를 정기적으로 확인하는 것이 좋습니다. 편집 또는 품질 관리 권한이 없는 콘텐츠에 대한 창을 여는 것이므로 언제든지 웹 사이트에 문제가 발생할 수 있습니다.

예를 들어 예제에서 사용한 비디오가 YouTube 채널에서 삭제된 경우 게시물에는 손상된 플레이어가 포함됩니다. 이것은 웹사이트에 시각적인 영향을 미치기 때문에 끊어진 링크보다 조금 더 분명합니다. iFrame 콘텐츠를 주기적으로 확인하면 더 이상 작동하지 않는 미디어를 변경하거나 중단할 수 있습니다.

WP 엔진으로 사이트 최적화

웹사이트에서 iFrame을 사용하면 풍부한 미디어와 동적 콘텐츠를 통합하면서 원활하게 운영할 수 있습니다. 여기 WP Engine에서는 중요한 웹 디자인 개념을 이해하고 최고의 개발자 리소스에 액세스하는 것의 중요성을 알고 있습니다.

또한 고객에게 최고의 디지털 경험을 제공할 수 있도록 최선을 다하고 있습니다. 다양한 완전 관리형 WordPress 호스팅 계획이 있으므로 아름다운 웹사이트 디자인에 집중할 수 있습니다!