WordPressでインスタを埋め込む完全ガイド｜初心者向け5ステップ

「WordPressにインスタの投稿を出したいのに、うまく表示されない…」とモヤモヤしていませんか。私も最初は、URLを貼っても何も出なかったり、スマホでレイアウトが崩れたりして、何度もやり直しました。

先に結論を一言でいうと、現在の仕様に合ったやり方を正しく選べば、WordPressでインスタを埋め込むのはそこまで難しくなく、しかも更新の手間を減らしつつ集客にもつなげられます。

WordPressにインスタを埋め込みたい人がまず知るべきこと

WordPressでできるインスタ埋め込みの種類

WordPressにインスタ投稿を出したいとき、代表的なパターンは次の3つです。

パターン	できること	向いている人
単一投稿の埋め込み	指定した1つの投稿だけをページ内に表示	記事の中で事例として写真を少しだけ見せたい人
フィード埋め込み（一覧）	最新の投稿を複数枚、ギャラリーのように並べて表示	トップページやサイドバーで常に新しい写真を出したい人
外部ツール・UGC系	ハッシュタグ投稿や複数アカウントの投稿をまとめて表示	ECサイトやキャンペーンページで本格的にインスタ連携したい人

ざっくりいうと、単発でちょっと写真を見せたいだけなら「単一投稿」、お店やブランドの雰囲気をしっかり伝えたいなら「フィード埋め込み」が向いています。

考えておきたいのは、次の3つです。

• どこに埋め込みたいか（本文・固定ページ・サイドバー・フッターなど）
• インスタの更新頻度（たまに投稿するだけか、頻繁に更新しているか）
• 自分の慣れ具合（プラグインの設定が得意かどうか）

このあと、プラグインを使わない方法と使う方法の両方を見ていくので、自分に合いそうなパターンを頭の片隅に置いておいてください。

WordPressでインスタ埋め込みの基本パターンを整理

インスタ埋め込みの3パターン比較（手動 / URL / プラグイン）

よく使われるインスタ埋め込みの方法は、次の3つに分けられます。

方法	特徴	メリット	デメリット
公式埋め込みコード（手動）	インスタ側で埋め込みコードを取得し、WordPressに貼るやり方	プラグイン不要で比較的軽い、表示動作が安定しやすい	投稿ごとにコードを取る手間がかかる
URL貼り付け（環境依存）	投稿URLをそのままエディターに貼り付けるやり方	操作は一番簡単で、作業時間が短い	サーバーや設定によっては表示されないことがある
プラグインでフィード表示	プラグインで複数投稿を一覧表示	デザインや表示枚数をまとめて管理でき、自動更新される	プラグインの管理が必要で、サイトが重くなる可能性もある

私がよく使う選び方は、次の通りです。

• 単発で投稿を見せたいとき → 公式の埋め込みコード
• トップページやサイドバーに一覧を出したいとき → プラグイン

URLを貼るだけの方法は、環境によって動いたり動かなかったりするので、「簡単に試してダメなら別の方法に切り替える」と割り切って使うくらいがちょうどいいです。

なぜ「公式の埋め込みコード」が安心なのか

インスタの公式埋め込みコードは、Instagramが用意している正規の方法です。WordPress側に余計なカスタマイズを加えなくても、そのまま貼れば動くようになっています。

一方で、昔どこかのブログで見かけたスクリプトや、意味のよく分からないコードをテーマにコピペしてしまうと、次のようなトラブルを起こしやすくなります。

WordPressでインスタを埋め込むときは、「公式の埋め込みコード」か「利用者の多いプラグイン」のどちらかを選ぶと、長い目で見て安心です。

プラグインなしでインスタ投稿をWordPressに埋め込む方法

インスタ側で埋め込みコードを取得する手順

まずはInstagram側で埋め込み用のコードを取ります。スマホアプリではなく、ブラウザでインスタを開くのがポイントです。

「キャプションを追加」のチェックを外すと、画像だけをシンプルに表示できます。キャプションも含めて世界観を見せたい場合はチェックを入れ、スッキリ見せたい場合は外す、という感じで選ぶといいです。

ブロックエディターとクラシックエディターの違い

次に、WordPress側でコードを貼るときの操作です。ブロックエディターとクラシックエディターでは、触る場所が少し違います。

エディター	貼り付ける場所	使うブロック・操作	ポイント
ブロックエディター	投稿・固定ページの本文	「カスタムHTML」ブロックを追加してコードを貼り付ける	プレビューで見た目を確認しながら調整できる
クラシックエディター	投稿・固定ページの本文	「テキスト」タブに切り替えてからコードを貼る	「ビジュアル」タブのまま貼るとコードが書き換わることがある
ウィジェット	サイドバー・フッター	「カスタムHTML」ウィジェットにコードを貼る	サイドバーの幅でレイアウトが崩れていないか確認する

よくある失敗は、クラシックエディターで「ビジュアル」タブのまま貼ってしまうケースです。この場合、エディターが勝手にコードをいじってしまい、インスタが表示されない原因になります。

サイドバーやフッターにインスタを表示したい場合

飲食店やサロンのサイトなどでは、「サイドバーに新着の写真をいくつか置いておきたい」ということも多いです。この場合の流れはシンプルで、次の通りです。

そのあと、スマホ表示でもレイアウトが崩れていないか必ず確認しましょう。細長いサイドバーだと写真が窮屈に見えることもあるので、その場合は本文の中に埋め込む位置を作った方が見やすいこともあります。

プラグインを使ってインスタフィードをWordPressに埋め込む方法

フィード埋め込みに向いているプラグイン3選

Instagram連携プラグインはたくさんありますが、ここでは使いやすさと情報量のバランスが良いものを3つに絞って紹介します。

プラグイン名	特徴	向いている用途
Smash Balloon Social Photo Feed	利用者が多く、シンプルなインスタフィード表示に強い	トップページやサイドバーに、基本的なフィードを出したいとき
Combine Social Photos	ブロックエディターに特化し、複数アカウントやハッシュタグにも対応	ブロックベースのサイトで、デザインを細かく調整したいとき
WPZOOM Social Feed Widget & Block など	ウィジェットやブロックでコンパクトな表示ができる	サイドバーに小さめのギャラリーを置きたいとき

まずは1つインストールして試してみて、「表示スピード」「見た目」「操作のしやすさ」を見比べながら、自分のサイトに合うものを選ぶのが現実的です。

プラグインでインスタフィードを埋め込む基本手順

プラグインごとに画面は違いますが、大まかな流れは共通しています。ここでは一般的な手順をまとめておきます。

• WordPress管理画面の「プラグイン」→「新規追加」を開く
• 右上の検索窓にプラグイン名を入れて探す
• 「今すぐインストール」→「有効化」の順にボタンを押す
• サイドメニューに追加されたプラグインの設定ページを開く
• 「Instagramと連携」ボタンなどからアカウント認証を行う
• 表示する投稿数や列数、ボタンの有無など細かい表示設定をする
• 表示用のショートコードやブロックを、投稿や固定ページに挿入する

アカウント連携の部分では、Facebookやビジネスアカウントとの紐付けが必要になることもあります。英語表記の画面が出てくることもありますが、画面どおりに進めれば難しい操作はあまりないので、落ち着いてクリックしていけばOKです。

プラグインで作ったフィードを貼り付ける場所の考え方

インスタフィードをどこに埋め込むかで、サイトの印象はかなり変わります。よく使われるパターンを整理しておきます。

埋め込み場所	目的	おすすめの表示内容
トップページ下部	「最新情報はインスタも見てね」と案内したい	3列×6件など、少し多めに並べて世界観を伝える
ブログのサイドバー	記事を読んでいる人にもインスタに気付いてほしい	1列×3件など、縦長にシンプル表示
店舗情報ページ	店内やメニューの雰囲気を伝えたい	大きめのサムネイルで写真重視のレイアウト
フッター	どのページからでもインスタへの導線を作りたい	小さなサムネイルを横一列に並べる

あれもこれもと欲張って、いろいろなページにフィードを貼りすぎると、読み込みが遅くなりやすいです。「ここにさえ表示されていればOK」という場所を1〜2か所決めて、そこに集中させるのがおすすめです。

WordPressにインスタ埋め込みをするメリット・デメリット

インスタを埋め込むメリット

インスタ埋め込みのメリットは、ざっくり次のようなものがあります。

• サイト側の記事をこまめに更新しなくても、インスタの更新がそのまま反映される
• 写真や動画で世界観を伝えやすく、文章だけより雰囲気が伝わる
• ホームページからインスタへの導線ができ、フォロワー増につながる
• 「最近もちゃんと活動しているお店・会社」だと伝えやすい

私が店舗サイトの制作をお手伝いするときは、インスタ埋め込みを提案することが多いです。オーナーさんはスマホからインスタを更新するだけでよく、ホームページ側の更新頻度をそこまで気にしなくて済むようになるからです。

テキストで「毎日ランチ営業中です」と書くより、インスタの写真で日替わりランチが並んでいる方が、お客さん側もイメージしやすく、信頼感も出ます。

インスタを埋め込むデメリット・注意点

一方で、インスタ埋め込みには気をつけたい点もあります。主なポイントは次の通りです。

デメリット・リスク	内容	対策
表示速度が遅くなる	インスタのサーバーから画像やスクリプトを読み込むため	表示件数を減らす、埋め込むページを絞る、遅延読み込みを活用する
表示できなくなる可能性	仕様変更やアカウント設定、障害の影響を受けることがある	公式コードや実績のあるプラグインを使い、定期的に表示をチェックする
デザインの崩れ	テーマのCSSとの相性で幅や余白が合わないことがある	テーマ側でCSSを微調整するか、よりシンプルな表示スタイルを選ぶ
投稿削除時の見た目	インスタ側で投稿を消すと、サイト側で不自然な空白になることもある	サイトにも出したい投稿はむやみに削除しないルールを決める

特に意識しておきたいのが、ページの表示速度です。インスタの画像を大きく、たくさん読み込むほど、スマホでの表示は重くなります。

対策としては、次のような工夫が考えられます。

• 1ページあたりの表示件数を少なめにする（まずは6件以内を目安に）
• トップページとは別に「フォトギャラリー」ページを作り、そこにまとめて表示する
• キャッシュ系プラグインや、画像の遅延読み込み機能を利用する

「写真をたくさん見せたい気持ち」と「早く表示してほしい気持ち」のバランスを、サイトの目的に合わせて調整していきましょう。

WordPressでインスタ埋め込みがうまくいかないときのチェックリスト

インスタが表示されない・真っ白になるとき

よくある症状と、考えられる原因・対処法を整理すると次のようになります。

症状	主な原因	確認ポイント・対処法
真っ白なスペースだけ出る	古い埋め込みコードや、非公式スクリプトを使っている	インスタから新しく埋め込みコードを取り直し、貼り替える
ログイン画面やエラーが出る	アカウントが非公開、または閲覧制限がかかっている	インスタアカウントの公開設定を確認する
特定のページだけ表示されない	キャッシュや他のプラグインとの競合	キャッシュを削除し、関連しそうなプラグインを一時的に止めてみる
スマホだけレイアウトが崩れる	テーマのレスポンシブ設定と埋め込みの相性が悪い	幅や余白のCSSを調整するか、表示スタイルを変更する

まず最初にやってほしいのは、「そのインスタ投稿のURLをブラウザで普通に開けるか」を確認することです。ここでうまく表示されない場合は、WordPress側ではなくインスタ側が原因の可能性が高いです。

インスタ側に問題がない場合は、「コードを取り直す」「キャッシュを削除する」「プラグインを一時的に止めてみる」という順で試していくと、原因を絞り込みやすくなります。

古い情報・古いコードを使っていないか見直す

検索して出てきた記事をそのまま真似したら、全然表示されなかった…という相談もよく聞きます。インスタの埋め込み仕様は変わってきているので、昔書かれた記事にあるコードは、今は動かないことがあります。

怪しいパターンとしては、次のようなものがあります。

• 出どころがよく分からないJavaScriptをテーマに貼り付けている
• 意味の分からない短いコードがfunctions.phpに残っている
• テーマやプラグインに、古いインスタ連携機能がそのまま残っている

心当たりがある場合は、バックアップを取った上で、一度コードを整理した方が安心です。不安なときは、公式テーマやデフォルトテーマに切り替えた状態で、一番シンプルな埋め込みを試してみると切り分けやすくなります。

トラブル時の「安全な試し方」のステップ

本番ページでいきなり大きく設定を変えるのが怖いときは、次のステップで落ち着いて確認していきましょう。

この流れで試すと、「特定のプラグインが悪さをしていた」「特定のテンプレートでだけレイアウトが崩れていた」といったケースにも気づきやすくなります。

WordPressでインスタ埋め込みをビジネスで活かすコツ

店舗・サロン・教室サイトでの活用例

たとえば、飲食店や美容室、整体、習い事教室などでの使い方をイメージしてみます。

• トップページに「最近の雰囲気が分かる写真」を数枚並べる
• メニューや料金ページの下に、実際の施術例や料理の写真を埋め込む
• お客様の声やビフォーアフターの投稿を、関連記事にピンポイントで貼る

文字だけでは伝わりにくい空気感や人柄も、インスタの写真や動画なら直感的に伝わります。私が関わった美容室サイトでも、スタイル写真をインスタで更新し、それをWordPress側に埋め込む形に変えたところ、予約フォームからの問い合わせが増えたケースがありました。

インスタとブログの役割分担を決めておく

インスタが便利だからといって、「全部インスタに書いてしまう」と、サイト側がただのリンク集のようになってしまうこともあります。そこで、インスタとWordPressの役割分担を決めておくのがおすすめです。

• インスタ：写真や短い文章で、雰囲気や日常を気軽に発信する場所
• WordPress：料金やアクセス、詳しい説明などを、じっくり読んでもらう場所

インスタで興味を持ってくれた人に、詳しい情報をWordPressの記事で読んでもらう。逆に、検索でサイトに来た人には、埋め込みの写真で安心感を持ってもらう。こうした流れが作れると、インスタ埋め込みの効果がぐっと高まります。

よくある質問（FAQ）

Q1. WordPressでのインスタ埋め込みは、プラグインなしとプラグインありのどちらが良いですか？

A. 単発で数枚だけインスタ投稿を貼りたいだけなら、プラグインを使わない方がシンプルで、安全に運用しやすいです。一方で、インスタフィードを自動更新したい、レイアウトを細かく調整したいといった場合は、プラグインを使う方が現実的です。

イメージとしては、次のように使い分けると分かりやすいです。

• 手間を最小限に、シンプルに見せたい → 公式埋め込みコード
• 一覧表示やデザインのこだわりを重視したい → プラグイン

Q2. WordPressにインスタを埋め込んだら、サイトが重くなった気がします。どうすれば良いですか？

A. インスタ埋め込みは、外部のサーバーから画像やスクリプトを読み込むため、何も考えずに数を増やすと表示が重く感じられることがあります。次の対策を組み合わせると、体感速度がかなり変わります。

• 表示するインスタ投稿の件数を減らす
• 1ページの中に埋め込みを置く場所を1〜2か所に絞る
• 遅延読み込み（Lazy Load）やキャッシュ系プラグインを活用する
• 写真をたくさん見せたい場合は、専用のギャラリーページを作る

まずは、どのページにインスタを出すのが一番大事かを決めて、そこに絞って調整していくと良いと思います。

Q3. WordPressでのインスタ埋め込みが急に表示されなくなりました。最初にどこを確認すればいいですか？

A. いきなりWordPress側を疑うのではなく、まずはインスタ側から確認するのがおすすめです。具体的には、その投稿のURLをブラウザで開いて、普通に表示されるかどうかを見てみてください。

インスタ側で問題がなければ、次の順番でチェックすると原因を見つけやすくなります。

• インスタから埋め込みコードを取り直し、貼り替えてみる
• キャッシュを削除して、ブラウザをリロードする
• 最近追加・更新したプラグインやテーマの設定を、一時的に戻してみる

このステップをたどるだけでも、「コードが古くなっていたのか」「プラグインの影響なのか」といった切り分けがかなりしやすくなります。

まとめ：今日からできるWordPressでのインスタ埋め込みの最初の一歩

最後に、ここまでのポイントを整理します。

今日からの最初の一歩としては、まず1つ、好きなインスタ投稿を公式の埋め込みコードでWordPressに貼ってみることをおすすめします。いきなりフィード表示や複雑なプラグイン設定に挑戦するのではなく、シンプルな方法で一度成功体験を作っておくと、その後のカスタマイズもぐっと楽になります。