WordPressにiFrameコードを簡単に埋め込む方法（3つの方法）

ウェブサイトを構築する際、外部ソースのコンテンツを自分でホストせずに表示する必要にしばしば直面します。ここでiFrameが役立ちます。

動画、地図、サードパーティ製アプリケーションを埋め込む場合でも、iFrameは外部コンテンツをWordPressサイトにシームレスに統合する方法を提供します。

この記事では、WordPressの投稿やページにiFrameコードを追加する3つの簡単な方法を説明します。あらかじめ用意された埋め込みコードの使用から、独自のiFrameを手動で作成する方法まで、すべてを網羅しています。 

iFrameとは？

iFrame（インラインフレームの略）を使用すると、実際にその動画をホストしなくても、動画やその他のコンテンツをサイトに埋め込むことができます。これにより、帯域幅とストレージスペースを節約できるため、WordPressに直接動画をアップロードすべきではありません。

WordPressの速度とパフォーマンスを向上させることに加えて、元のコンテンツが変更された場合、iFrameは自動的に更新されます。これにより、訪問者は常に最新バージョンのコンテンツを確認できます。

iFrameを介して著作権で保護されたコンテンツを埋め込んでも、著作権侵害にはならないため、訴訟から身を守るのに役立ちます。

それを踏まえて、WordPressにiFrameコードを簡単に埋め込む方法を見てみましょう。クイックリンクを使用して、使用したい方法に直接ジャンプしてください。

方法1：ソースコードを使用してWordPressのiFrameを埋め込む（簡単で迅速）

多くの大規模な動画ホスティングサイトには、「埋め込み」オプションがあり、サイトに追加する必要のあるiFrameコードにアクセスできます。

ウェブサイトに「共有」または「埋め込み」設定がある場合、これはコンテンツを埋め込むための最も迅速で簡単な方法であることがよくあります。

正確な手順はプラットフォームによって異なりますが、例としてYouTubeを見てみましょう。WordPressにYouTube動画を埋め込むには、使用したい動画の下にある「共有」ボタンをクリックするだけです。

その後、さまざまな共有オプションが表示されるポップアップが表示されます。

「埋め込み」ボタンをそのままクリックしてください。

YouTubeにはiFrameコードが表示されます。

デフォルトでは、YouTubeは「プレーヤーコントロールを表示する」ボックスをチェックしますが、プライバシー強化モードを有効にすることもお勧めします。このモードでは、訪問者は埋め込まれたコンテンツをWordPressウェブサイトで視聴できますが、YouTubeでの閲覧体験に影響を与えることはありません。

その後、「コピー」ボタンをクリックしてください。

これで、そのコードをサイトの任意の投稿またはページに貼り付けることができます。このガイドでは、WordPressブロックエディターの新しいページに追加します。

ページを開き、「+」ボタンをクリックします。表示されるポップアップで、「HTML」と入力してカスタムHTMLブロックを見つけます。

適切なブロックが表示されたら、クリックしてページに追加します。

次に、YouTubeのiFrameコードをブロックに貼り付けるだけです。

これでページを公開すると、YouTube動画がWordPressブログでライブ表示されます。

方法2：WordPress iFrameプラグインで埋め込む（すべてのウェブサイトで機能します）

すべてのサードパーティウェブサイトが既製の埋め込みコードを提供しているわけではありません。もし「共有」または「埋め込み」設定が見つからない場合は、iFrameプラグインを使用して独自のiFrameコードを簡単に作成できます。

まず、iFrameプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

有効化後、プラグインはセットアップなしで直ちに機能し始めます。コンテンツを埋め込みたいページまたは投稿に移動し、ショートコードブロックを追加するだけです。

その後、次のショートコードを追加します。

[iframe src="URL goes here"]

「URLはここに」を、サイトに埋め込みたいコンテンツのURLに置き換えるだけです。

例として、WordPressにGoogleマップを追加しましょう。これは、店舗、レストラン、その他の会場がお問い合わせフォームに道順を追加する簡単な方法です。

その後、投稿をプレビューまたは公開するだけです。

これで、ウェブサイトにコンテンツが埋め込まれているのが表示されるはずです。

利用可能なすべてのパラメータを確認するには、iFrameプラグインページをご覧ください。

方法3：WordPressにiFrameを手動で埋め込む（プラグイン不要）

特別なWordPressプラグインを使用したくない場合は、iFrameコードを手動で作成することもできます。これを行うには、ページまたは投稿を開き、WordPressコンテンツエディターにHTMLブロックを追加する必要があります。

まず、次のコードをHTMLブロックに貼り付けます。

<iframe src="URL goes here"></iframe>

「ここにURLを入力」を、埋め込みたいコンテンツの直接URLに置き換えるだけです。

ここではGoogleマップを埋め込んでいます：

追加のパラメータを追加して、ウェブサイトでのコンテンツの表示方法を変更できます。たとえば、幅を600ピクセル、高さを200ピクセルに設定します。

<iframe src="URL goes here" width="600" height="300"></iframe>

これは、埋め込みコンテンツをより小さなスペースに表示する必要がある場合に便利です。たとえば、WordPressウェブサイトのモバイルバージョンをテストした後、コンテンツのサイズを変更したい場合があります。

iFrameの代替手段にはどのようなものがありますか？

iFrameを埋め込むことには、いくつかの欠点があります。

すべてのウェブサイトがコンテンツをiFrameに配置できるわけではなく、利用可能なスペースに収まるようにコンテンツを手動で調整する必要がある場合があります。

もう1つの問題は、HTTPSサイトは、他のHTTPSサイトからのコンテンツに対してのみiFrameを使用できることです。同様に、HTTPサイトは、他のHTTPサイトからのコンテンツに対してのみiFrameを使用できます。

このため、WordPressのような多くのプラットフォームはoEmbedを好みます。

多くの場合、WordPressの投稿にURLを貼り付けるだけで、oEmbedを使用して動画などを埋め込むことができます。WordPressはoEmbedを自動的に利用可能なスペースに合わせてサイズ変更するため、デスクトップ、スマートフォン、タブレットで常に完璧に見えます。

ウェブサイトにソーシャルフィードを表示したい場合は、iFrameではなくソーシャルメディアプラグインの使用をお勧めします。

たとえば、Smash Balloonを使用すると、Facebook、Instagram、Twitter、YouTubeのコンテンツを簡単に埋め込むことができます。

Smash Balloonでソーシャルメディアフィードを追加する方法に関するチュートリアルをいくつかご紹介します。

• WordPressブログ投稿に実際のツイートを埋め込む方法
• WordPressにTikTok動画を埋め込む方法
• WordPressにYouTubeプレイリストを埋め込む方法（最良の方法）

この記事が、WordPressにiFrameを簡単に追加する方法を学ぶのに役立ったことを願っています。また、WordPressにSoundCloudを埋め込む方法やWordPressで埋め込みを無効にする方法に関するガイドも確認することをお勧めします。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。