MENU
  1. ホーム
  2. WordPress
  3. WordPressへのX（Twitter）埋め込み完全ガイド！おすすめプラグインなど徹底解説！

WordPressへのX（Twitter）埋め込み完全ガイド！おすすめプラグインなど徹底解説！

広告
WordPressへのX（Twitter）埋め込み

「WordPressでX（旧Twitter）の投稿を埋め込みたいけれど、やり方がよくわからない……」
「プラグインを入れるとサイトが重くなりそうで不安」
「公式埋め込みとプラグイン、どちらを選べばいいの？」

といった声をよく耳にします。

特に初めての方は、

  • 「URLを貼るだけで本当に表示できるの？ 」
  • 「プラグインを使うと難しい設定が増えるんじゃないか……」
  • 「スマホから見たときにレイアウトが崩れないか心配」

など、不安が尽きませんよね。

本記事では、WordPress標準機能とおすすめプラグインを使った埋め込み手順を、初心者の方にもわかりやすくステップごとに解説します。

どの方法が自分のサイトに最適か、メリット・デメリットをしっかり把握して、安心して導入できるようにサポートします！

目次

X埋め込みの基本知識とメリット・デメリット

X埋め込みとは何か

X（旧Twitter）の投稿やタイムラインを、自分のWordPressサイト上にそのまま表示させる機能です。

  • 単一ツイート：特定の投稿だけを切り出して表示
  • タイムライン：アカウントやハッシュタグの投稿一覧を埋め込む

この仕組みは、WordPressのoEmbed対応や、Gutenbergの「埋め込みブロック」、あるいはX公式の「Publish」機能を使って簡単に実現できます。

ポイント：HTMLやプラグインを使わなくても、URLを貼り付けるだけでOK！

埋め込みで得られる効果

埋め込みを活用すると、サイトに動きが生まれ、訪問者とのコミュニケーションを強化できます。

以下のような効果が期待できます。

スクロールできます
効果説明
🎯 エンゲージメント向上リアルタイムの会話を見せることで、訪問者の興味を引きつける
🚀 フォロワー増加のきっかけサイト訪問者がそのままフォローにつながりやすくなる
🔒 信頼性アップユーザーの声や実績を“生の情報”として提示できる

Tip：埋め込みは「動くコンテンツ」なので、スクリーンショットや静的な画像よりも印象に残りやすいです！

注意すべき欠点

メリットが大きい反面、使い方を誤るとサイトパフォーマンスや法的リスクに影響が出る場合があります。

  • ページ読み込みの遅延リスク
    埋め込みを多用すると、外部コンテンツの読み込みが増えてページ速度が落ちる恐れがあります。
    ✅ 対策：必要な場所だけ遅延ロード（Lazy Load）を設定する
  • 他者投稿の著作権・肖像権問題
    埋め込む投稿の内容によっては、無断転載とみなされる可能性があります。
    ✅ 対策：引用元のルールを確認し、場合によっては投稿主に許可を取る
  • サービス仕様変更による表示不具合
    X側のAPI変更や埋め込み仕様のアップデートで、突然表示されなくなるケースがあります。
    ✅ 対策：定期的に動作チェックを行い、最新の埋め込み方法を確認する

埋め込みの種類と用語解説

単一ツイート（ポスト）

単一ツイート埋め込みは、特定の投稿のみをサイト上に表示する方法です。

  • 用途例：記事内で紹介したコメントや発言をそのまま引用したいとき
  • 特徴：
    • ⏱️ リアルタイム更新ではなく、固定表示
    • 💬 リプライやいいね数も一緒に表示される

手順イメージ

  1. 埋め込みたいツイートのURLをコピー
  2. WordPressエディタにURLを貼り付ける（oEmbed対応）
  3. 自動でプレビューが生成される

2‑2. タイムライン（投稿一覧）

タイムライン埋め込みは、アカウントやリスト、ハッシュタグなどの投稿一覧を連続表示する方法です。

  • 用途例：公式アカウントの最新情報をまとめて見せたいとき
  • 特徴：
    • 🔄 リアルタイムに最新投稿を反映
    • 📊 フィードの種類によって表示内容が異なる
スクロールできます
タイプ表示例更新頻度
アカウント@username の投稿一覧表示即時更新
リストメンバー限定の投稿集即時更新
ハッシュタグ特定タグが付いた投稿を集約表示リアルタイム

その他のフィードタイプ

タイムライン以外にも、用途に合わせて以下のようなフィード埋め込みが可能です。

プロフィールタイムライン

ユーザーのプロフィールページで表示される投稿だけを切り出したウィジェットです。

  • メリット：自己紹介セクションや「この人の発言まとめ」として活用
  • 注意点：非公開アカウントは表示不可

ハッシュタグ検索結果

特定のハッシュタグが含まれる投稿をまとめて表示します。

  • メリット：キャンペーンやイベント情報の拡散に◎
  • 注意点：スパム投稿や無関係な投稿が混じる可能性あり

リストタイムライン

ユーザーが作成したリスト（複数アカウントの集合）の投稿を表示します。

  • メリット：興味のあるアカウントだけをまとめて見せられる
  • 注意点：リストの設定変更で表示内容が変動

✨ ワンポイント：
埋め込みタイプを使い分けることで、サイト訪問者に適切な情報を最適な形で提供できます。

WordPress標準機能での埋め込み方法

URLコピー＆ペーストでの貼り付け

WordPressでは、単にX投稿のURLを本文中に貼るだけで埋め込みが完了します。

  1. 投稿URLを取得
    • X上で「共有」→「リンクをコピー」
  2. エディターに貼り付け
    • 本文スペースにURLをペースト！
  3. プレビュー確認
    • 自動で投稿プレビューが表示される ✨

ポイント：HTMLやプラグインは不要。シンプルかつ即時反映！

埋め込みブロックの活用（Gutenberg）

Gutenbergエディターなら、専用の「埋め込みブロック」でさらに安定した表示が可能です。

ブロックエディタ手順

  1. 「＋」アイコンをクリック
  2. 検索ボックスに「X」または「Twitter」と入力
  3. 埋め込みブロックを選択
  4. 投稿URLを貼り付け → 「埋め込み」ボタンを押す

クラシックエディタ手順

  1. エディタ上部の「テキスト」タブを開く
  2. 貼り付けたURLの前後に改行を入れる
  3. ビジュアルタブに戻して、プレビューを確認
スクロールできます
比較項目Gutenbergクラシック
操作の簡便さ⭐️⭐️⭐️⭐️⭐️⭐️
安定性⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
カスタマイズ余地ブロック内 CSS調整が可能コード編集が必須

oEmbedを用いた埋め込みの仕組み

WordPressはoEmbed対応サイトとしてXを認識しており、URL貼り付け時に自動で外部APIへリクエストを送ります。

  1. URL送信：WordPress → XのoEmbedエンドポイント
  2. JSON取得：タイトル・HTMLコードなどのメタ情報を受け取る
  3. HTML出力：受け取った埋め込み用コードを記事に挿入
flowchart LR
  A[ユーザーがURLを貼る] --> B[oEmbedリクエスト]
  B --> C[XのAPI]
  C --> D[埋め込み用JSON返却]
  D --> E[記事内にプレビュー表示]

メリット：

  • 自動更新…API経由で最新情報を取得
  • 互換性…将来のWordPressアップデートにも対応しやすい

X公式ツール（Publish）を使ったカスタム埋め込み

埋め込みコードの生成方法

  1. ブラウザで「Publish（https://publish.twitter.com）」にアクセス
  2. 中央の入力欄に埋め込みたいツイートURLまたはタイムラインのURLをペースト
  3. 「→」ボタンをクリックすると、右側にプレビューとコードが表示される
  4. 「」形式のHTMLコードをコピー

ポイント：複数の埋め込みタイプ（ツイート単体・リスト・ハッシュタグなど）を選択可能です。

デザイン／表示オプションの調整

Publishでは、コード生成前に見た目や動作を細かくカスタマイズできます。

スクロールできます
オプション調整内容
表示テーマの切り替えライト／ダークモードの選択が可能 🌗
幅・高さの指定固定サイズ指定 or レスポンシブ対応（width:100%）
会話形式の表示設定リプライを表示するか非表示にするか選択 💬
  • 表示テーマ（ライト／ダーク）
    • ライト：背景白、文字黒
    • ダーク：背景黒、文字白
    • 🌟 おすすめ：サイト全体の配色に合わせて統一感を出す！
  • 幅・高さの固定化／レスポンシブ対応
    • 固定：data-width="500"など
    • レスポンシブ：style="width:100%; max-width:550px;"
    • Tip：スマホ対応のためには、幅は100%、高さは自動（auto）が無難です。
  • 会話形式（リプライ）の表示・非表示
    • デフォルトは会話全体を表示
    • data-conversation="none" を追加すると、リプライなしでシンプルに本文とメディアだけを見せられます。
    • 活用例：コメント部分を非表示にして、ビジュアル重視のパーツとして組み込みたいとき
<blockquote class="twitter-tweet" data-theme="dark" data-conversation="none" style="width:100%; max-width:550px;">
  <a href="https://twitter.com/username/status/1234567890"></a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ワンポイント：

  • カスタムHTMLブロックに貼り付けて、プレビューで表示を確認しましょう。
  • コードを更新したら、必ずキャッシュクリアを行って最新状態を反映させてください。

プラグイン導入で手軽に拡張

おすすめプラグイン例

  • Custom Twitter Feeds（Smash Balloon）
    • 簡単セットアップでレスポンシブ表示対応
    • 多彩なレイアウトオプション（カルーセル、グリッド表示など）
  • WP Twitter Feeds
    • 軽量＆シンプルなUI
    • 短いコード（ショートコード）でどこでも表示可能

Tip：まずは無料版で試し、デザインや機能が合えば有料版へアップグレードすると◎

プラグイン設定のポイント

  1. API連携の手順
    1. X（旧Twitter）の開発者アカウントを作成
    2. アプリを登録して「APIキー」「APIシークレット」を取得
    3. WordPress管理画面のプラグイン設定画面でキーをコピペ
    4. 🔄 接続テストを実行して成功を確認
  2. キャッシュや読み込み速度の最適化
    • キャッシュ有効化：プラグイン側で取得データをキャッシュする設定をオンに
    • リフレッシュ間隔：10分〜1時間程度に設定すると、頻繁なAPI呼び出しを抑制
    • 遅延読み込み（Lazy Load）：スクロールに合わせて表示すれば初期画面の負荷軽減
スクロールできます
最適化項目設定例効果
キャッシュ期間30分〜1時間API呼び出し回数削減 → サイト速度維持
画像遅延読み込み有効初期ロードの負荷軽減 → UX向上
CSS／JSミニファイ有効ファイルサイズ縮小 → 読み込み時間短縮

プラグイン利用時のメリット／デメリット

スクロールできます
メリットデメリット
🎨 豊富なデザイン：テンプレート選択で短時間に見栄え改善⚙️ 外部依存：プラグイン更新停止で機能停止リスク
🚀 簡単導入：コード不要で即埋め込み可能🐌 負荷増加：プラグイン自体が読み込みを増やす場合あり
🔧 カスタマイズ性：CSSやショートコードで細かく調整🔐 セキュリティ管理：APIキー管理に注意が必要

ワンポイント：プラグインを複数入れすぎると競合や管理コストが増大します。必要最低限に絞って導入しましょう！

トラブルシューティング

埋め込みが反映されない主な原因

埋め込みがうまく表示されないときは、まず以下のポイントを確認しましょう。

スクロールできます
原因コメント
非公開アカウントや削除済み投稿🔒 公開範囲が「非公開」、または投稿そのものが存在しない
テーマやプラグインの競合⚙️ 他のコードがJavaScriptを邪魔している可能性
ブラウザキャッシュ問題🧹 古いキャッシュが残っていて最新の埋め込みを反映できない
  • 非公開アカウントや削除済み投稿
    埋め込み対象のアカウントが「非公開」設定になっている、または元投稿が削除されていると表示されません。公開設定を確認し、存在する投稿URLを使用しましょう。
  • テーマやプラグインの競合
    使用中のテーマやプラグインで読み込みに必要なスクリプトがブロックされる場合があります。特にキャッシュ系・セキュリティ系プラグインは要チェックです。
  • ブラウザキャッシュ問題
    キャッシュが残ったままだと、更新した埋め込みコードが反映されないことがあります。キャッシュクリア後に再読み込みしてみてください。

問題解消のステップ

問題を切り分けて解決するには、以下の手順が有効です。

  1. キャッシュクリア／デバッグモード確認
    • ブラウザのキャッシュを削除し、プラグインのデバッグモードを有効にして再度確認
    • ✅ キャッシュ系プラグインがあれば、一時的に無効化
  2. コンソールログのチェック
    • ブラウザの開発者ツール（F12）を開き、Consoleタブでエラーや警告を確認
    • 埋め込みスクリプト読み込みエラーやクロスオリジン問題がないかを探す🔍
  3. 別テーマ・別プラグインでの検証
    • 一時的にデフォルトテーマ（例：Twenty Twenty-Five）に切り替えて動作チェック
    • 可能であればプラグインを全オフにして、1つずつ有効化しながら原因を特定

✨ ワンポイント：
問 題が解決したら、必ず元のテーマ／プラグイン設定に戻し、動作確認を行うことで他の機能への影響も防げます！

よくある質問（FAQ)

動画付きツイートは埋め込める？

動画を含むツイートは、通常の埋め込み方法でそのまま表示可能です。

  • oEmbed／埋め込みブロックともに、動画再生ボタンやサムネイルが自動で挿入されます 🎥
  • Publishツールを使えば、ライト／ダークモードやリプライ非表示などのカスタム設定も反映されたまま埋め込めます

ポイント：動画再生は訪問者の操作が必要なので、自動再生によるUX低下はありません。

複数投稿を一括で挿入する方法は？

WordPress標準機能では、URLを並べて貼ると各投稿が順に埋め込まれます。

しかし一括管理にはプラグインが便利です。

  • 方法１：URLリストをペースト
    1. 投稿URLを改行区切りでまとめる
    2. エディタに貼り付ける → 自動で複数プレビュー生成
  • 方法２：タイムライン埋め込み
    • ハッシュタグやリストタイムラインを設定すれば、関連投稿をまとめて表示可能
  • 方法３：プラグイン活用
    • Custom Twitter Feedsなどで、ショートコードひとつで複数ツイートをまとめて表示 🎯

旧ウィジェットとの違いは何か？

旧ウィジェット（「Widget」スクリプト）と新しいoEmbed/ブロック埋め込みの主な違いを比較しました。

スクロールできます
比較項目旧ウィジェットoEmbed／埋め込みブロック
設定方法JavaScriptタグ貼り付けURL貼り付け or ブロック選択
レスポンシブ対応手動でCSS調整が必要自動でレスポンシブ
カスタマイズ性限定的（CSS上書きのみ）データ属性やPublishツールで多彩に設定可能
メンテナンス性API変更で動かなくなるリスク大WordPressコア対応 → 安定性が高い

まとめ：新方式は手軽さ・安定性・カスタマイズ性が向上しています。旧ウィジェットは必要な場合のみ利用しましょう！

まとめ

この記事では、

  1. 標準機能によるURL貼り付けやブロックエディタでの埋め込み方法
  2. X公式Publishツールを使ったカスタマイズ方法
  3. プラグイン（Custom Twitter Feedsなど）を利用した手軽な拡張
  4. 注意点やトラブル対処のポイント

を順にご紹介しました。

  • URL貼り付けならコード不要でサクッと導入可能
  • Publishツールでテーマカラーや表示オプションを細かく調整
  • プラグインなら豊富なデザインテンプレートとキャッシュ機能で安定表示

といったそれぞれの特徴を活かしつつ、ページ速度や著作権への配慮も忘れずに設定しましょう。

これで、あなたのWordPressサイトにも自然で魅力的なX埋め込みが実現できます。

ぜひ自分に合った方法からトライして、SNSとブログの連携を強化してください！ 😊✨

WordPress

関連記事

目次