サイトでElementorをページビルダーとして使用している場合、コードを編集したりショートコードを貼り付けたりすることなく、どのページにもSmash BalloonのInstagramフィードを簡単に配置できます。Instagram Feed Proには専用のElementorウィジェットが付属しており、他のElementor要素と同様にウィジェットパネルに表示されます。これをセクションにドラッグし、ドロップダウンから表示するフィードを選択するだけで、プレビューパネルに実際のInstagram投稿が即座に表示されます。
このガイドでは、ElementorのページにInstagramフィードウィジェットを初めて追加する方法について解説します。
この機能は、無料版の「Instagram Feed」プラグインと「Instagram Feed Pro」の両方で利用可能です。専用のInstagram Feed Elementorウィジェットは、バージョン6.11.0以降の無料プラグインに標準搭載されているため、Elementorのページにフィードをドラッグして配置するのにPro版は必要ありません。Pro版では、追加のフィードタイプ(ハッシュタグ、タグ付けされた投稿)やカスタマイザーオプションが利用可能になり、埋め込みウィジェットにそれらの表示が可能になります。
始める前に
サイトでは、次の2つの点を確認してください:
- 「Instagram Feed」(無料版またはPro版)は、Elementorウィジェットが追加されたバージョン6.11.0以降でインストールおよび有効化されています。ほとんどのインストール環境では、すでにこの条件を満たしています。
- Instagramアカウントは 、「Instagramフィード」>「設定」>「ソース」の下でソースとして接続されています。
- Instagramフィードの「すべてのフィード」には、すでに少なくとも1つのフィードが存在しています 。Elementorウィジェットは、Smash Balloonの管理画面で既に作成済みのフィードから選択するものであり、新しいフィードを作成するものではありません。まだフィードを作成していない場合は、まずフィード作成の手順に従って作成してから、ここに戻ってきてください。
これら両方が設定されていれば、ページの編集画面を開くとすぐに、ElementorのウィジェットパネルにInstagramフィードウィジェットが表示されます。
ステップ1. Elementorでページを開く
WordPressの管理画面サイドバーで、「ページ」に移動し、フィードを表示したいページを選択して、「Elementorで編集」をクリックします。Elementorエディターが開き、左側にウィジェットパネル、右側にページのライブプレビューが表示されます。ウィジェットパネルの上部には「ウィジェットを検索」という検索ボックスがあり、そこからSmash Balloonウィジェットを見つけることができます。

ステップ2. Instagramフィードウィジェットを検索する
「検索ウィジェット」フィールドをクリックし、「instagram」と入力してください。入力するとウィジェットの一覧が絞り込まれ、検索結果の上部に「Instagram Feed」ウィジェット(小さなInstagramアイコンが付いたもの)が表示されます。これはSmash Balloon専用のウィジェットであり、Elementorに標準搭載されている「Instagram」埋め込み機能ではありません。

パネルから「Instagramフィード」ウィジェットを、フィードを表示したいページのセクションまでドラッグします。ドラッグ中にElementorがドロップ可能な領域をハイライト表示するため、既存のコンテナ内に配置することも、新しいセクションとして配置することも可能です。ウィジェットを配置すると、設定パネルが自動的に開きます。
ステップ3. フィードを選択する
ウィジェットの設定パネルは、「コンテンツ」と「詳細」の2つのタブに分かれています。「コンテンツ」タブには「Instagramフィード設定」グループがあり、その一番上に「フィードを選択」という設定項目があります。ドロップダウンをクリックして、表示したいフィードを選択してください。「Instagramフィード」や「すべてのフィード」で作成したフィードは、すべて名前順にここに一覧表示されます。

フィードを選択すると、右側のプレビューペインが更新され、そのフィードから取得された実際のInstagram投稿が表示されます。Smash Balloonカスタマイザーで設定したスタイル、レイアウト、ヘッダー、およびその他のカスタマイズ内容はすべて保持されます。Elementorは、Elementorを使用していないページで表示されるのと同じ状態でフィードをレンダリングします。
Elementorパネルの左下にある「公開」(既存のページを編集している場合は「更新」)をクリックして、ページを保存してください。これで、訪問者がページを閲覧できる場所であればどこでも、Instagramフィードが表示されるようになります。
セクション内のカラムにウィジェットを配置することはできますか?
はい。Elementor では、ウィジェットを任意のカラム、コンテナ、または全幅セクションにドラッグして配置できます。フィードは、親カラムが指定する幅に合わせて自動的に調整されます。
後でSmash Balloonのカスタマイザーで設定を変更しても、選択したフィードは同期されたままになりますか?
はい。このウィジェットは、選択したフィードを表示し、そのフィードのカスタマイザー設定に基づくすべてのスタイルが適用されます。後で「Instagramフィード」や「すべてのフィード」でフィードのレイアウト、ヘッダー、投稿数を更新しても、Elementorに埋め込まれたバージョンは自動的に更新されます。
1つのElementorページに複数のInstagramフィードを追加することはできますか?
はい。ウィジェットを異なるセクションに複数回配置し、それぞれに別のフィードを選択してください。ページの上部にヒーローアカウントを表示し、下部にハッシュタグフィードを表示したい場合に便利です。
パネルにInstagramフィードウィジェットが表示されないのはなぜですか?
最も一般的な原因は、Instagram Feedプラグインのバージョンが古いことです。Elementorウィジェットはバージョン6.2.9で追加されたため、それ以前のバージョンでは利用できません。Instagram Feed(無料版またはPro版)を最新バージョンに更新すれば、この問題は解決します。もちろん、プラグインが有効になっている必要もあります。
このウィジェットはElementor Freeでも動作しますか、それともElementor Proのみですか?
Instagramフィードウィジェットはどちらでも動作します。これを使用するのにElementor Proは必要ありません。
Smash Balloonのカスタマイザーではなく、Elementor内でフィードのスタイルを設定することはできますか?
いいえ。フィードのスタイル(ヘッダー、レイアウト、色、投稿数)は、保存された各フィードについてSmash Balloonのカスタマイザーで制御されます。Elementorの役割は配置、つまりページ上のどこにフィードを表示するかを決めることです。