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

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

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

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

WordPressでツイートを埋め込む

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

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

ツイートのURLを取得

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

ツイートのURLを取得する

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

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

クラシックエディタにURLを貼り付ける

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

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

埋め込みブロックを追加してURLを貼り付ける

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

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

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

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

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

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

「Twitter Publish」にアクセス

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

Twitter PublishにアクセスしてURLを貼り付ける

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

タイムラインを選択する

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

カスタマイズ項目

What size would you like your timeline to be?
Height(px):タイムラインの高さ
Width(px):タイムラインの横幅
How would you like this to look?
Light(明るいデザイン)か Dark(暗いデザイン)を選択
What language would you like to display this in?
表示する言語を選択。「Automatic」は自動で合わせてくれます。
Opt-out of tailoring Twitter
チェックを入れると、Twitterに閲覧データを送信します。入れなくても大丈夫です。

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

生成した埋め込みコードをコピーする

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

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

テキストエディタに埋め込みコードを貼り付ける

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

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

カスタムHTMLブロックに埋め込みコードを貼り付ける

サイドバーに表示する

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

カスタムHTMLウィジェットを追加して埋め込みコードを貼り付ける

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

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

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

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