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

WordPressの投稿やページにiFrameコードを埋め込みたいですか？

iFrameは、動画やその他のコンテンツをアップロードせずにサイトに表示する簡単な方法です。YouTubeのような多くのサードパーティプラットフォームがiFrameコードを提供しており、それをサイトに貼り付けるだけです。

この投稿では、WordPressにiFrameコードを簡単に埋め込む方法を紹介します。

iFrameとは？

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

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

また、著作権で保護されたコンテンツをiFrameで埋め込んでも著作権違反にはならないため、訴訟から守ることができます。

それでは、WordPressにiFrameコードを簡単に埋め込む方法を見てみましょう。クイックリンクを使えば、使いたい方法にすぐにジャンプできます：

方法1：WordPressのソースコードを使ってiFrameを埋め込む（素早く簡単）

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

サイトに「共有」や「埋め込み」の設定がある場合、コンテンツを埋め込むには、これが最も手っ取り早く簡単な方法であることが多い。

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

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

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

YouTubeはあなたにiFrameコードを表示します。

初期設定では、YouTubeは「プレーヤーコントロールを表示する」ボックスにチェックを入れますが、プライバシー拡張モードを有効化することもお勧めします。このモードでは、訪問者がYouTubeでの閲覧に影響を与えることなく、WordPressサイトに埋め込まれたコンテンツを見ることができます。

その後、「コピー」ボタンをクリックする。

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

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

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

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

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

方法2：WordPressプラグインでiFrameを埋め込む（すべてのサイトで動作する）

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

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

有効化したプラグインは、セットアップ不要ですぐに動き始めます。コンテンツを埋め込みたいページや投稿に行き、ショートコードブロックを追加するだけです。

その後、以下のショートコードを追加する：

[iframe src="URL goes here"]

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

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

ヒントソースによっては、コンテンツの直接埋め込み可能なURLを表示するには、「共有」または同様の設定をクリックする必要があります。

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

サイトにコンテンツが埋め込まれているのが確認できるはずです。

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

方法3：WordPressでiFrameコードを手動で作成する（プラグイン必須なし）

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

まず、以下のコードをHTMLブロックに貼り付けます：

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

URL goes here」を埋め込みたいコンテンツの直接のURLに置き換えるだけです。

ここではGoogle Mapを埋め込んでいます：

追加のパラメータを追加することで、サイト上でのコンテンツの見え方を変更することができます。例えば、幅を600ピクセル、高さを200ピクセルに設定しています：

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

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

iFrameに代わるものは？

iFramesの使用にはいくつかの欠点がある。

すべてのサイトでコンテンツを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の投稿日やページでPHPを許可する方法についてのガイドをチェックしたり、WordPressのための最高のYouTubeギャラリーのプラグインの専門家のピックを参照してください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.