WordPressにInstagramの投稿を表示する方法｜プラグインなしでタグ1行

先に結論: 貼る場所は3つ、消えるときの原因はほぼ2つ

WordPressにタグを貼る場所は、表示したい位置によって次の3つに分かれます。どの場所でも使うのは「カスタムHTML」ブロックです。

保存したあとにタグが消えてしまう場合、原因はほとんどが次の2つです。1つは、保存した人のユーザーに unfiltered_html という権限が無いこと。もう1つは、WordPress.com を使っていて、プランの条件を満たしていないことです。どちらも下で詳しく説明します。

用意するもの

1. Instagramのプロアカウント(ビジネスまたはクリエイター)。個人アカウントのままでは連携できません。
2. Social Feed by grip space のアカウント。登録はメールアドレスとパスワードだけで、無料で登録できます。
3. 管理画面でInstagramを連携し、ウィジェットを1つ作っておきます。表示形式(グリッドかスライダー)、列数、表示件数などはプレビューを見ながら決められます。
4. 発行された埋め込みタグ。次のような <script> タグ1行です(末尾はウィジェットごとに異なります)。

<script type="text/javascript" src="https://n246.grip.space/api/v1/instagram/widget/xxxxxxxx"></script>

このタグは置いた位置に投稿一覧を描画します。iframe ではないので貼った場所の幅に合わせて広がり、最大幅を設定すると中央に置かれます。

方法1: 固定ページ・投稿に貼る(カスタムHTMLブロック)

特定のページに出したいときの方法です。ブロックエディターなら、どのテーマでも同じ手順です。

1. 管理画面で、表示したい固定ページ(または投稿)を開きます。
2. 表示したい位置で、ブロック挿入ツール(「+」)から「カスタムHTML」を追加します。空の段落で /html と入力して Enter を押しても追加できます。
3. ブロックの編集画面を開き、HTMLの欄に埋め込みタグをそのまま貼り付けます。
4. 「更新」(または「公開」)で保存します。
5. 公開ページを再読み込みして表示を確認します。

「段落」ブロックに貼ると、タグが文字として表示されるだけで動きません。その段落を削除し、カスタムHTMLブロックに貼り直してください。クラシックエディターでは「テキスト」タブに切り替えてから貼ります。

方法2: サイドバー・フッターのウィジェットエリアに貼る(クラシックテーマ)

サイドバーやフッターにウィジェットエリアがあるテーマ(クラシックテーマ)なら、ウィジェットエリアに置くことで全ページに表示できます。

1. 管理画面の「外観」→「ウィジェット」を開きます。
2. 表示したいウィジェットエリア(「フッター」「サイドバー」など、名前はテーマによって異なります)をクリックします。
3. 「+」からブロックを追加し、「カスタムHTML」を選びます。
4. 埋め込みタグを貼り付けて、「更新」で保存します。
5. 公開ページで、サイドバーやフッターに表示されているか確認します。

サイドバーは幅が狭いので、列数を減らすかスライダー形式にすると見やすくなります。トップページ用と見せ方を変えたいときは、ウィジェットを別々に作ります。作れる数はフリープランで1つ、ライトプランで3つまで、スタンダードプランでは無制限です。

「外観」に「ウィジェット」が無い場合はブロックテーマです。WordPress.org のドキュメントによると、ブロックテーマにはウィジェットエリアが無く、このメニューは意図的に外されています。次の方法3を使ってください。

方法3: ブロックテーマのフッターに貼る(サイトエディター)

ブロックテーマでは、フッターは「テンプレートパーツ」として管理されています。ここに貼ると、そのフッターを使う全ページに表示されます。

1. 管理画面の「外観」→「エディター」を開き、「パターン」を選びます。テンプレートパーツはこの「パターン」の中に並んでいます。
2. 「フッター」のテンプレートパーツをクリックして編集画面を開きます。
3. 表示したい位置で「+」からカスタムHTMLブロックを追加し、埋め込みタグを貼り付けます。
4. 「保存」をクリックします。
5. 公開ページでフッターの表示を確認します。

保存したらタグが消えた: unfiltered_html 権限の問題

WordPressは、unfiltered_html 権限を持たないユーザーが保存した内容から、<script> や <iframe> などのタグを取り除きます。WordPress.org のドキュメントでは、この権限はページ・投稿・ウィジェットなどに HTML や JavaScript を書けるようにするもので、信頼できないユーザーに与えると悪意のあるコードを書き込まれるおそれがある、と注意書きされています。

標準の設定で、スクリプトを保存できるのは次の権限グループです。

見落としやすいのは「誰が保存したか」で決まる点です。管理者がタグを貼ったページでも、あとで投稿者の権限の人が更新すると、その保存でタグが取り除かれます。急に消えた場合は、最近そのページを誰が更新したかを確認してください。

1. ページを開き直し、カスタムHTMLブロックの中にタグが残っているかを見ます。消えていれば、権限か WordPress.com のプランが原因です。
2. 自分の権限グループを「ユーザー」→「プロフィール」などで確認します。投稿者・寄稿者なら、管理者か編集者に貼ってもらいます。
3. マルチサイトの場合は、サイトの管理者でも保存できません。ネットワークの特権管理者に依頼してください。
4. 管理者でも消える場合は、wp-config.php で DISALLOW_UNFILTERED_HTML が有効になっているかもしれません。WordPress本体のコードでは、この定数が true のときは管理者や特権管理者を含む全員の unfiltered_html を拒否します。セキュリティのために意図して設定されていることが多いので、サイトの制作会社や管理者に相談してください。
5. 普段の更新で触らない場所(フッターやサイドバーなど)に置くと、うっかり消されにくくなります。

WordPress.com の場合: 有料プランとホスティング機能の有効化が必要

WordPress.com(ホスティング型のサービス)には、上の権限とは別に独自の条件があります。WordPress.com の公式サポートによると、カスタム HTML ブロックで script、iframe、embed、form、style、link などのタグを使えるのは、ホスティング機能を有効化した有料プランだけです。無料プランで使えるのは基本的な HTML タグに限られ、条件を満たさないとタグは保存後に消えたり、一部が削除されたりします。

1. ダッシュボードの「アップグレード」→「プラン」で、今のプランを確認します。無料プランの場合、スクリプトのタグは保存できないので、有料プランへの切り替えが必要です。
2. 有料プランだけでは足りず、ホスティング機能を有効にする必要があります。公式サポートでは、サイトにプラグインを1つ以上インストールすると有効化できると案内されています。
3. 設定のあと、カスタム HTML ブロックにタグを貼り直して保存します。

WordPress.com の「埋め込み」ブロックはすべてのプランで使え、Instagram の投稿にも対応していると公式サポートに書かれています。ただし投稿を1件ずつ埋め込む方法で、新しい投稿が自動で並ぶ一覧にはなりません。違いはホームページにInstagramを表示する3つの方法で比べています。画面が違う場合は、ご利用のプランを WordPress.com のサポートページでご確認ください。

タグは残っているのに表示されないとき

タグがブロックの中に残っているなら、WordPressは消していません。次を順に確認します。

このウィジェットはタグを置いた位置に一覧を描画するため、最適化プラグインでスクリプトが移動・結合されると正しく表示されないことがあります。新しい投稿がすぐに出ない場合は、フリープランの反映が1日1回であることも確認してください(ライト・スタンダードはすぐ反映)。

プラグインを使わない方法のよいところ

1. プラグインを増やさない: 追加するのはカスタムHTMLブロックの中のタグ1行だけで、管理するプラグインは増えません。
2. 見た目は管理画面で変えられる: 列数、表示件数、余白、最大幅、文字サイズ、文字色(明るい背景用 / 暗い背景用)、フォローボタンの文言や色は管理画面で変更でき、WordPress側のタグを貼り替える必要はありません。
3. Cookie や localStorage を使わない: ウィジェット自体は訪問者のブラウザに Cookie や localStorage を保存しません。画像は Instagram のサーバーから読み込まれます。
4. 読み込みの負担を抑える: グリッド表示では1段目以外の画像を遅延読み込みにしています。

一方で、Instagram の投稿から商品ページへ飛ばすショッピングタグや、ハッシュタグで集めた他人の投稿の表示、ストーリーズの表示はできません。表示できるのは、連携した自分のアカウントの投稿です。

よくある質問

Q. 編集者の権限でも貼れますか?
A. 通常の単一サイトなら、編集者も unfiltered_html を持っているので保存できます。マルチサイトでは特権管理者しか保存できません。権限を変更するプラグインを使っている場合は、実際の設定が標準と違うことがあります。

Q. ページごとに別の写真を見せたい(採用ページには社内の写真だけ、など)。
A. ウィジェットを複数作り、キャプションのキーワード(含む / 除外)や期間(30 / 90 / 365日)、リールやカルーセルの表示などの絞り込みを変えて、それぞれのページに別のタグを貼ります。設定はコピーして作れます。

Q. ブロックエディターのプレビューで表示されません。
A. 表示の確認は、保存したあとの公開ページで行ってください。編集画面の中では表示されない場合があります。

Q. 無料で使えますか?
A. フリープランは無料で、ウィジェット1つ、投稿16件まで、表示は月3,000回までです。「Powered by Social Feed」の表記が入り、サイトへの反映は1日1回です。料金の詳細は料金プランをご覧ください。

WordPressへの貼り付けを自分で行うのが難しい場合は、設置代行(12,000円・税込)もあります。くわしくはSocial Feed by grip space の紹介ページをご覧ください。

参考にした資料

1. WordPress.org「Custom HTML」 https://wordpress.org/documentation/article/custom-html/
2. WordPress.org「Roles and Capabilities」 https://wordpress.org/documentation/article/roles-and-capabilities/
3. WordPress.org「Block-based Widgets Editor」 https://wordpress.org/documentation/article/block-based-widgets-editor/
4. WordPress.org「Site Editor Patterns」 https://wordpress.org/documentation/article/site-editor-patterns/
5. WordPress Developer Resources「map_meta_cap()」 https://developer.wordpress.org/reference/functions/map_meta_cap/
6. WordPress.com サポート「カスタム HTML ブロック」 https://wordpress.com/ja/support/wordpress-editor/blocks/custom-html-block/
7. WordPress.com Support「Custom HTML Block」(英語版) https://wordpress.com/support/wordpress-editor/blocks/custom-html-block/
8. WordPress.com サポート「コードを追加」 https://wordpress.com/ja/support/code/