WordPress에 iFrame 코드를 포함하는 방법은 무엇입니까?

게시 됨: 2022-11-12

WordPress에 iFrame 코드를 삽입하는 방법을 알고 싶습니까? IFrame을 사용하면 동영상이나 기타 콘텐츠를 업로드하지 않고도 웹사이트에 삽입할 수 있습니다.

YouTube와 같은 일부 타사 플랫폼에서는 사용자가 iFrame을 통해 웹사이트의 콘텐츠를 삽입할 수 있습니다. 이 기사에서는 WordPress에 iFrame을 포함하는 데 사용할 수 있는 몇 가지 방법에 대해 설명합니다.

이 기사에서는 iFrame과 WordPress에서 iFrame을 세 가지 방법으로 사용하는 방법에 대해 설명합니다.

아이프레임이란?

iFrame은 웹 콘텐츠를 다른 웹 페이지에 포함하는 방법입니다. HTML 태그는 외부 페이지의 URL과 창이 웹사이트에 표시되는 방식에 대한 사양을 식별하는 데 사용됩니다.

일반적으로 두 가지 상황에서 iFrame을 사용하는 것이 좋습니다.

  • 첫 번째 경우, 귀하는 귀하의 소유가 아닌 콘텐츠를 공유하고자 합니다. iFrame을 통해 콘텐츠를 포함하는 것은 대부분의 경우 저작권을 침해하는 것으로 간주되지 않습니다.
  • 따라서 일반적으로 대부분의 다른 방법보다 윤리적이고 합법적인 공유 방법으로 간주됩니다. 또한 iFrame 내에서 코드에 직접 액세스하는 것도 불가능합니다.
  • 따라서 웹사이트 방문자는 포함된 콘텐츠를 복사하여 다른 곳에서 공유할 수 없습니다.
  • iFrame을 통합하려는 두 번째 이유는 비디오, 오디오 또는 이미지와 같은 대용량 파일을 공유할 수 있기 때문입니다. YouTube는 이러한 서비스의 훌륭한 예입니다.
  • iFrame을 사용하면 WordPress 미디어 라이브러리에 파일을 호스팅하지 않고도 웹사이트에 파일 콘텐츠를 표시할 수 있습니다.
  • 또한 이러한 미디어 파일은 종종 상당한 양의 저장 공간을 차지할 수 있으며 사이트 로드 속도가 느려질 수도 있습니다.
  • YouTube와 같은 외부 플랫폼에서 비디오를 호스팅한 다음 iFrame을 사용하여 WordPress 웹사이트에 포함하면 웹사이트에 직접 업로드하는 제한을 피할 수 있습니다.
  • 온라인 커뮤니티의 윤리적인 구성원을 유지하고 웹사이트의 속도와 접근성을 유지하는 데 도움이 됩니다.

WordPress에서 iFrame을 사용하는 방법?

일반적으로 콘텐츠를 공유하는 것이 일반적입니다. 그럼에도 불구하고 귀하의 사이트에 다른 사람의 콘텐츠를 게시하는 것은 법적 처벌을 받을 수 있습니다. 동영상과 같은 대용량 파일을 호스팅하면 웹사이트 성능에 부정적인 영향을 미칠 수 있습니다.

iFrame 덕분에 이러한 문제를 비교적 빠르게 해결할 수 있습니다. 이 섹션에서는 WordPress에서 iFrame을 사용하는 세 가지 방법을 제시합니다.

방법 1: 포함 코드를 사용하여 iFrame 만들기

일부 사이트에서는 콘텐츠를 iFrame에 수동으로 포함할 수 없습니다.

이로 인해 Facebook 게시물 또는 YouTube 동영상과 같은 특정 유형의 콘텐츠가 추천되기 어려울 수 있습니다.

그러나 이것이 iFrame을 사용하여 이러한 소스의 콘텐츠를 표시하는 것을 막지는 않습니다.

따라서 이를 수행하는 데 필요한 iFrame 내장 코드에만 액세스하면 됩니다. 이것이 어떻게 작동하는지 설명하기 위해 YouTube를 살펴보겠습니다.

이렇게 하려면 다음 단계를 따르십시오.

  1. 자신의 것이든 다른 제작자가 만든 것이든 포함할 비디오를 선택하십시오.
  2. 동영상 플레이어 아래에 있는 공유 버튼을 클릭합니다.
동영상 플레이어 아래에 있는 공유 버튼을 클릭합니다.

사용 가능한 다양한 공유 옵션을 표시하는 창이 열립니다. 이러한 옵션 중 하나는 Embed 입니다.

  1. 삽입 버튼을 클릭합니다.
삽입 버튼을 클릭하십시오

YouTube에서 포함 옵션을 선택하면 비디오를 iFrame에 포함하는 데 사용할 수 있는 HTML 스니펫이 표시됩니다.

여러 iFrame 매개변수를 복사하여 원하는 대로 사용할 수 있습니다. 또는 원하는 경우 iFrame 매개변수 대신 소스 URL만 복사할 수 있습니다.

  1. 복사 버튼을 클릭합니다.
복사 버튼을 클릭하십시오

표준 URL을 사용할 경우 받게 되는 실패와 달리 내장 코드를 사용할 때 iFrame에 포함된 비디오를 볼 수 있습니다.

  1. 사용자 정의 HTML 블록 을 사용하여 블록 편집기 의 페이지 또는 게시물에 코드를 붙여넣습니다.
사용자 정의 HTML 블록을 사용하여 블록 편집기의 페이지 또는 게시물에 코드 붙여넣기

클래식 편집기를 사용하는 경우 텍스트 편집기로 전환하고 필요한 경우 코드를 추가해야 합니다.

결과적으로 작동하는 iFrame을 볼 수 있어야 합니다. 포함 가능한 Facebook 게시물을 웹사이트에 유사하게 추가할 수 있습니다.

LinkedIn, Instagram 및 Twitter와 같은 많은 인기 있는 소셜 미디어 사이트는 게시물에 포함 코드를 제공합니다. 일반적으로 이러한 사이트의 개별 게시물에 대한 설정에서 이러한 코드를 찾을 수 있습니다.

방법 2: WordPress에 수동으로 iFrame 추가

페이지에 iFrame을 추가하는 것은 매우 간단합니다. 열고 닫는 HTML 태그와 삽입하려는 웹 페이지의 URL을 제외하고 다른 요구 사항은 없습니다.

이렇게 하려면 다음 단계를 따르십시오.

  1. URL 을 example.com으로 바꿉니다.

<iframe src="example.com"></iframe>

URL 소스와 관련하여 알아야 할 몇 가지 제한 사항이 있습니다. iFrame의 첫 번째 제한은 사이트와 동일한 하이퍼텍스트 전송 프로토콜을 사용하는 사이트의 콘텐츠만 표시할 수 있다는 것입니다.

따라서 웹 사이트가 HTTPS로 보호되는 경우 다른 HTTPS 웹 사이트의 콘텐츠만 포함할 수 있습니다. 마찬가지로 HTTP를 사용하는 경우 HTTP 기반인 URL만 포함할 수 있습니다.

또한 Facebook 및 YouTube와 같은 일부 인기 웹사이트에서는 iFrame을 수동으로 포함할 수 없습니다.

iFrames를 허용하지 않는 웹사이트의 페이지를 표시하려고 하면 오류 메시지가 표시됩니다.

이 방법을 사용하면 사이트의 요구 사항에 맞게 iFrame을 사용자 지정할 수 있다는 장점이 있습니다. 이러한 매개변수를 iFrame 매개변수라고 합니다.

가장 일반적인 유형 중 일부는 다음과 같습니다.

너비 : 이 매개변수를 사용하여 iFrame의 너비를 픽셀 단위로 지정할 수 있습니다.

높이 : 너비 매개변수와 유사하게 높이는 웹 페이지의 iFrame 창 크기를 픽셀 단위로 지정합니다.

허용 : 이 매개변수를 설정하여 전체 화면 보기 및 결제 처리와 같은 iFrame의 기본 동작 또는 기능을 결정할 수 있습니다.

중요도 : 이 매개변수는 iFrame을 로드해야 하는 시기를 지정할 수 있습니다.

예를 들어, 전체 화면 보기가 활성화된 창 크기가 900픽셀 x 700픽셀인 iFrame의 코드는 웹페이지의 나머지 부분 이후에 다운로드하도록 설정되어 있습니다.

 <iframe src="example.com" width="900" height="700" allow="fullscreen"></iframe>

이러한 매개변수 외에도 고려해야 할 다른 매개변수가 있습니다. 일반적으로 위에 나열된 항목을 사용하면 방문자와 YouTube 동영상 또는 기타 콘텐츠를 공유하기 위한 기본 iFrame을 만들 수 있습니다.

방법 3: 플러그인을 사용하여 WordPress에 iFrame 추가

플러그인 사용은 종종 개발자가 iFrame을 WordPress 웹 사이트에 포함하는 것과 같은 작업을 단순화하기 위해 활용합니다.

많은 WordPress 플러그인이 WordPress에 포함을 처리할 수 있으며 적절한 플러그인 선택은 필요에 따라 다릅니다. 귀하의 요구에 가장 적합한 플러그인을 찾기 위해 확인할 수 있는 최고의 WordPress iFrame 플러그인에 대한 자세한 검토가 있습니다.

iFrame 사용을 시작하기 전에 알아야 할 사항

iFrame은 편리함을 제공하지만 사용하기 전에 알아야 할 몇 가지 사항이 있습니다.

HTTPS/HTTP 호환성 문제

귀하와 동일한 HTTP(Hypertext Transfer Protocol)를 사용하는 다른 웹사이트 또는 웹페이지의 콘텐츠를 포함하는 것은 허용되지 않습니다.

따라서 웹 사이트에서 HTTPS(Hypertext Transfer Protocol Secure)를 사용하는 경우 HTTPS를 사용하는 다른 웹 사이트의 콘텐츠만 포함할 수 있습니다. HTTP에도 이 규칙이 적용됩니다.

Google은 HTTPS를 권장하며 대부분의 유명 웹사이트에서 HTTPS를 사용합니다. 즉, 고품질 웹 페이지도 쉽게 포함할 수 있습니다.

보안 문제

그러나 iFrame이 귀하의 웹사이트에 제기할 수 있는 보안 취약성과 관련하여 더 심각한 우려가 있습니다.

iFrame은 다른 사이트로 통하는 창이므로 해당 사이트에서 발생하는 모든 변경 사항이 귀하의 사이트에 영향을 미칠 수 있습니다. iFrame을 통해 웹사이트에 악성 코드를 삽입할 가능성도 있습니다.

iFrame은 다른 웹사이트에 대한 창을 열 수 있으며 소스 웹사이트에 악성 코드가 포함되어 있는 것을 반드시 막을 수는 없다는 점을 기억하는 것이 중요합니다.

이 문제의 경우 iFrame을 사용하여 평판이 좋은 웹사이트의 콘텐츠만 포함하는 것이 좋습니다. iFrame에서 샌드박스 속성을 사용하여 고급 보안 설정을 수행할 수 있습니다.

Google은 iFrame의 열렬한 팬이 아닙니다.

일반적으로 Google은 iFrame을 사용하지 않는 것이 좋습니다. 웹사이트에 iFrame이 필요한 경우 Google 봇이 크롤링할 수 있도록 이 콘텐츠에 액세스할 수 있는 텍스트 기반 링크를 제공할 수 있습니다.

이 가이드에는 이러한 경고를 피하기 위한 모범 사례가 포함되어 있으므로 이를 따를 경우 걱정할 필요가 없습니다.

모든 웹사이트에서 콘텐츠를 iFrame으로 설정할 수 있는 것은 아닙니다.

현재 많은 대형 웹사이트에서 컨텐츠를 iFrame에 표시하는 기능을 비활성화했습니다. 이 경우 iFrame을 통해 웹사이트를 표시하는 것과 관련하여 할 수 있는 일은 많지 않습니다.

자주 묻는 질문

이 섹션에서는 솔루션을 더 쉽게 찾을 수 있도록 몇 가지 자주 묻는 질문에 답변합니다.

iFrame은 WordPress에서 작동합니까?

짧은 대답은 예입니다. iFrame은 WordPress 웹사이트에서 작동하며 다음 세 가지 방법을 사용하여 WordPress iframe을 추가할 수 있습니다.
WordPress iFrame을 생성하기 위해 코드를 직접 임베딩합니다.
워드프레스 iFrame 플러그인을 사용하여 iframe을 추가하세요.
WordPress iFrame을 웹사이트에 수동으로 통합합니다.

WordPress에 웹사이트를 포함할 수 있습니까?

워드프레스는 웹사이트를 임베딩하는 쉬운 방법을 제공합니다. 비디오, 이미지, 오디오 파일 및 외부 소스의 기타 콘텐츠와 같은 미디어 파일은 WordPress oEmbes에 쉽게 포함됩니다.
이 프로세스는 콘텐츠의 소스 URL을 복사하여 WordPress 편집기에 붙여넣기만 하면 됩니다. 그러면 WordPress가 자동으로 콘텐츠를 포함합니다.

iFrame의 목적은 무엇입니까?

WordPress에서 iFrame은 HTML 구성 요소와 유사하게 작동하므로 다른 웹 사이트의 미디어 파일 및 기타 콘텐츠를 포함할 수 있습니다.
이 기능의 결과로 귀하는 법률 및 저작권 문제를 일으키지 않고 귀하의 웹사이트에 다른 웹사이트의 콘텐츠를 표시할 수 있습니다.

결론

이 기사에서는 iFrame이 무엇인지, 그리고 WordPress에서 iFrame을 사용하는 데 사용할 수 있는 세 가지 다른 방법에 대해 설명했습니다.

시간을 내어 이 기사를 읽어주셔서 진심으로 감사드립니다. 질문이나 의견이 있으면 언제든지 의견 섹션을 사용하십시오.

최신 기사를 보려면 Facebook 및 Twitter에서 팔로우하는 것이 좋습니다.