WordPress のブログに Twitter のツイートを埋め込みたいとき、結構ありますよね。
てっきりプラグインなどが必要なのかと思っていましたが、WordPress では簡単にツイートを埋め込むことができます。
この記事では THE THOR というテーマを使ってツイートを埋め込む方法を記載しています。ツイートの埋め込みはTwitter公式に記載されている方法なので THE THOR に限らず埋め込みができるはずです。
使用してるテーマ THE THOR レビュー
WordPress に Twitter のツイートを埋め込む方法
ツイートは誰のツイートでも埋め込むことができます。口コミ紹介的にツイートを複数表示しているレビューサイトを良く見かけますね。
肝心のツイートの埋め込み方法はTwitter公式サイトに記載がありました。
Twitter公式ツイートの埋め込み（WordPress日本語サポート）
詳細は公式サイトを見てもらうとして、よく使いそうなパターン例を上げていきます。
ツイートの埋め込み方法
ここで紹介するツイートの埋め込み方法は2つ。ツイートのURLをそのまま使用する方法とpublish.twitter.com/を利用する方法です。
URLをそのまま使用する方法【基本の埋め込み】
- 埋め込みたいツイートのURLをコピー
- 埋め込みたい場所にペースト
※クラシックエディター使用
クラシックエディターのテキストでURLをペーストする。もしくは ビジュアルエディターで THE THOR のHTMLを挿入 <> を使用する。ペーストする際は、URLのまわりには他の文字などがないよう一行にURLのみとしてください。
publish.twitter.com/を利用した埋め込み【ツイートのカスタム表示】
publish.twitter.com/を利用することでツイートをカスタマイズして表示することができます。
ツイート 埋め込み サンプル
ここではツイートのサンプルとして URL：https://twitter.com/karaagebow1214/status/1309161751535992832 を使用しています。
【基本の埋め込み】のサンプル
https://twitter.com/karaagebow1214/status/1309161751535992832 を単純にペーストすると以下のようになります。通常はこれで十分ですね。
the thor のフレームをカスタマイズ
フレームでスマホ画面が狭いと感じる人へ。
なかなか全てに対応は難しそうですがざっくりとはできあがると思います。#thethorhttps://t.co/ceX0QE0oip— からあげ棒 (@karaagebow1214) September 24, 2020
【ツイートのカスタム表示】ダークモードで表示する
ツイートの右上にある∨ からツイートを埋め込むを選択すると publish.twitter.com/ に移り、ツイートをカスタマイズすることができます。
生成されたコードを【基本の埋め込み】と同様に貼り付けすれば完成です。当サイトで確認できたカスタマイズは「ダークモード」と「言語の変更」だけでした。コードを直接変更することで他のカスタマイズもできるようなので興味のある方は試してみてください。
the thor のフレームをカスタマイズ
フレームでスマホ画面が狭いと感じる人へ。
なかなか全てに対応は難しそうですがざっくりとはできあがると思います。#thethorhttps://t.co/ceX0QE0oip— からあげ棒 (@karaagebow1214) September 24, 2020
WordPressにTwitterのタイムラインを埋め込む方法
タイムラインを埋め込む場合はツイートからではなく直接 publish.twitter.com を開きます。
埋め込まれたタイムライン（ちょっと日本語がおかしい）にTwitterのURLを入力するとコードが生成されるのでテキストエディタで貼り付けすればタイムラインが表示されるようになります。
タイムラインのサンプル
横幅サイズ80％、中央配置に変更しています。
