WordPressカスタマイズ｜X（旧Twitter）タイムラインログの掲載方法
WordPressにおけるX（旧Twitter）タイムラインの掲載とは、公式埋め込みコード（widgets.js）の適切な遅延制御とレイアウト固定により、Core Web Vitals（LCP/CLS）の低下を防ぎながらサイト訪問者へ最新発信をリアルタイム提示するカスタマイズである。
「ワードプレスでX（旧Twitter）のタイムラインを載せたいけれど、どうすればよいの？」
「そのままコードを貼るとサイト表示が重くなったり、たまに白画面になって崩れる……」
WordPressは柔軟なカスタマイズ性により世界中で愛用されており、X（旧Twitter）は最もリアルタイム性の高い発信プラットフォームです。この二つを連携させることで、ブログ読者をSNSの熱心なフォロワーへシームレスに誘導できます。
しかし、安易に公式ウィジェットをサイドバーに直貼りすると、「ページ読み込み速度の激減（LCP悪化）」や「スクロール時のカクつき（CLS発生）」という深刻なSEOペナルティを引き起こします。
本記事では、初心者向けの基本掲載手順から、エンジニア視点での表示高速化・トラブル回避策までを完全網羅して解説します。
X（旧Twitter）タイムラインログの基本掲載手順
Twitter Publish にアクセスし、表示したいXアカウントのURL（例: https://x.com/shitohi_blog）を入力します。
「Embedded Timeline」を選択し、「set customization options」から幅（300〜350px推奨）と高さ（500〜600px推奨）を指定して「Copy Code」をクリックします。
<a target="_blank" rel="noopener nofollow" class="twitter-timeline" data-width="320" data-height="560" data-theme="light" href="https://x.com/shitohi_blog">
Tweets by @shitohi_blog
</a>
WordPress管理画面の 「外観」➔「ウィジェット」（またはブロックエディタのウィジェット設定）を開きます。
タイムラインを表示したいエリア（サイドバー最下部またはフッター推奨）に 「カスタムHTML」ブロック を追加し、先ほどコピーしたコードを貼り付けます。
変更を保存し、実際のブログページをPCとスマホの両方で確認します。横幅がサイドバーからはみ出さず、スクロールが正常に機能していれば基本設定は完了です。
【重要】Core Web Vitalsを破壊しないための3大高速化Tips
公式の widgets.js は約150KB〜200KBの外部スクリプトをダウンロードし、大量のiframeを生成します。ページ描画ブロックを防ぐため、以下の最適化を必ず適用してください。
ファーストビュー（画面上部）に配置しない
サイドバーの最上部にタイムラインを置くと、モバイル閲覧時に記事本文より先に重いウィジェットの読み込みが始まり、LCP（Largest Contentful Paint）が劇的に悪化します。必ず「人気記事ランキング」や「著者プロフィール」の下に配置してください。
枠（コンテナ）の高さをCSSで固定してレイアウトシフト（CLS）を防ぐ
iframeが後から非同期で挿入されると、周囲のコンテンツが一気に下に押し下げられ、CLSスコアが赤点になります。ラッパー要素で高さを固定するのが鉄則です。
<div class="x-timeline-wrapper" style="min-height: 560px; max-width: 320px; overflow: hidden; border-radius: 16px;">
<!-- ここにTwitter埋め込みコードを配置 -->
</div>
公式API障害時に備えた「フォールバック静的カード」の併用
X側のAPI制限や障害により、タイムラインが読み込まれず「白い空白」だけが残る事故が多発しています。万一スクリプトがブロックされた場合でも、以下のようなフォールバック用リンクカードを用意しておくと安全です。
| 運用方式 | メリット | デメリット・注意点 | 推奨ケース |
|---|---|---|---|
| 公式動的タイムライン | 最新ツイートが自動反映される | 外部JS依存で読み込みが重い | 1日複数回アクティブに投稿するアカウント |
| 軽量静的プロフィールカード | 読み込み0秒・PageSpeed満点 | ツイート本文は直接見えない | サイト表示速度・SEOを最優先したい場合 |
| 遅延読み込み（Lazy Widget） | 読者が近づくまでJSを読まない | 若干の実装コードが必要 | 長文ブログ・回遊率を重視するメディア |
まとめ：サイト速度を維持しながらX連携でファンを獲得しよう
WordPressとXタイムラインの連携は、ブログとSNSを相互循環させる強力な武器です。ただし、読者の快適な閲覧体験を損なわないよう、表示位置と枠固定の工夫を忘れずに設定しましょう。
🦊 あわせて読みたい！草壁シトヒ公式ブログ攻略アーカイブ
WordPress・SWELL・テーマ・高速化 をさらに攻略する
SWELLカスタマイズ、必須プラグイン、爆速表示とサーバー最適化
