WordPressでTwitterのツイート・タイムラインを埋め込む方法

2021/2/12 情報を更新いたしました。

WordPressでは、Twitterのコンテンツを非常に簡単に表示させることができます。当記事では、Twitterの投稿やタイムラインを埋め込む方法について解説していきますので、参考にしてください。

Twitterで埋め込む代表的なコンテンツは２つ

サイト上にTwitterを表示する場合は、下記の2つが一般的でしょう。ツイートに加え、タイムラインもプラグイン不要で挿入することができます。目的のコンテンツを選択して、導入手順を確認しましょう。

WordPressでツイートを埋め込む

ツイートを埋め込む場合は、埋め込みコードを取得する必要もありません。ツイートのURLをエディタに貼り付けるだけで簡単に埋め込むことができるんですね。

ただし、この方法ではエディタ上で埋め込みコードを編集することができません。CSSでスタイルを調整したい方は、下記のタイムラインと同様の手順で埋め込んでください。

また、この方法で複数のツイートを埋め込むとページの表示速度が極端に遅くなる可能性もございます。対策とその原因については下記記事でご紹介しております。

ツイートのURLを取得

まずは、Twitterをブラウザで開き、埋め込みたいツイートのURLをコピーしましょう。後はエディタにURLを貼り付けるだけですね。

クラシックエディターの場合

Classic Editorの場合は、テキストエディタにURLをそのまま貼り付けてください。埋め込み時のスタイルに自動で変換されます。（その他の文字列が混ざると正常に変換されません。）

ブロックエディターの場合

ブロックエディターの場合は、埋め込みブロックを使用します。Twitterのアイコンが記載されたブロックを追加して、取得したURLを貼り付けます。

Twitterのタイムラインを埋め込む

実はタイムラインもツイートと同様の手順で挿入できるのですが、横幅や高さなどを調整したい方が多いと思います。そんな方は「Twitter Publish」で埋め込みコードを取得します。

こちらを使えば、埋め込み時のスタイルを簡単に調整できます。ツイートも同じ手順で埋め込めますので、こちらの方法もぜひ覚えて起きましょう。

プロフィールページのURLを取得

タイムラインの場合は、Twitterアカウントのプロフィールページにアクセスして、URLを取得します。

「Twitter Publish」にアクセス

次は、埋め込みコードを取得するため、「Twitter Publish」にアクセスします。先程コピーしたURLを下記の赤枠部分に貼り付け、Enterキーを押しましょう。

下記の画面になるので、「Embedded Timeline」を選択した後、「set customizeation options.」をクリックします。こちらを押すとタイムラインをカスタマイズできます。

カスタマイズ項目が表示されますので、下記を参考に各項目を埋めた後に「Update」を押してください。

「Update」を押すと埋め込みコードが生成されるので、「Copy Code」をクリックします。これで埋め込みコードをコピーできましたので、エディタに貼り付けていきます。

クラシックエディターの場合

クラシックエディターをお使いの方は、テキストエディタに埋め込みコードを貼り付けます。

ブロックエディターの場合

カスタムHTMLブロックを追加して、埋め込みコードを貼り付けます。

サイドバーに表示する

サイドバー等に表示する場合は、外観 > ウィジェットで、表示したいウィジェットエリアに「カスタムHTML」を追加し、埋め込みコードを貼り付けます。

テーマによって、用意されているウィジェットエリアは異なります。

Twitter Cardsの設定はお済みですか？

Webサイトの運営にTwitterを活用するなら、Twitter Cardsの設定も合わせて行っておきましょう。

こちらを設定することで、Twitterでページをシェアした際にタイトルやサムネイル画像等も表示させることができるようになります。まだ設定されていない方は、下記に設定方法を解説してますので、こちらも合わせてご覧ください。（TCDテーマをお使いの方は、管理画面から簡単に設定できます。）