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

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

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

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

iFrameとは？

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

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

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

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

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

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

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

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

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

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

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

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

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

これで、そのコードをサイトの任意の投稿または固定ページに貼り付けることができます。このガイドでは、新しい固定ページに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を好みます。

多くの場合、oEmbedを使用して動画を埋め込むことができます。URLをWordPressの投稿に貼り付けるだけで、動画やその他のコンテンツを埋め込めます。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でもフォローできます。