【WordPress】ウィジェットでTwitterを埋め込む方法

このサイトのサイドにTwitterを埋め込もうかと思ったので、折角なのでその方法をメモしておこうと思います。

1.プロフィールのURLをコピーする

ログインする

引用:twitter

Twitterからログインします。

アイコンをクリック

引用:Twitter

Twitterにログインすると、ホームが開かれるかと思います。

「いまどうしてる?」の横の自分のアイコンをクリックします。

プロフィールのURLをコピー

引用:Twitter

すると、プロフィール画面が開かれます。上のように「プロフィール」が太字になっていればOKです。

引用:Twitter

このページ(埋め込みたいツイッターのプロフィールページ)のURLをコピーします。

では、次に進みます。

2.埋め込みタグ取得

引用:Twitter Publish

Twitter Publishというサイトを開きます。Twitterさんが管理するサイトです。

プロフィールのURLを貼り付ける

引用:Twitter Publish

先ほど1で取得したプロフィールのURLを貼り付けて、Enterをクリックします。

引用:Twitter Publish

すると、埋め込みタグを作るための設定画面に移ります。

Embedded Timelineをクリック

引用:Twitter Publish

今回はタイムラインの埋め込みタグを入れるので、左側の「Embedded Timeline」をクリックします。

引用:Twitter Publish

すると、埋め込みタグがコピーできる画面が開きます。上の「Copy Code」(赤枠)をクリックすれば、埋め込みタグを取得することができます。

引用:Twitter Publish

WPのウィジェットに貼り付けてサイドに表示する方法は後述します。ただし、このままの場合少し高さが低い場合があります。実際にタイムラインを表示してみて思った形ではなかった場合は下記詳細設定を確認してみてください。

詳細設定

引用:Twitter Publish

set customization options」をクリックします。

引用:Twitter Publish

高さや幅、色、言語を指定することができます。

高さ

引用:Twitter Publish

このサイトに埋め込んでいるタイムラインの高さが「350」です。参考になれば幸いです。

引用:Twitter Publish

指定しなくてOKです。幅に合わせて伸縮します。当サイトでは指定しませんでした。

コンテンツ幅より小さくしたい場合など、幅を指定すると良いと思います。

引用:Twitter Publish

見た目に関して明るめか暗めかを選択できるので、好きな方を選びます。

引用:Twitter Publish

↑Light

引用:Twitter Publish

↑Dark

言語

引用:Twitter Publish

日本語で投稿しているのであれば、「Japanese」でいいかなと思います。

Update(設定完了)

引用:Twitter Publish

右下の「Update」をクリックして設定完了です。

設定が完了したら、先ほどと同じ手順でタグをコピーします。

引用:Twitter Publish

Copy Code」(赤枠)をクリックすれば、埋め込みタグを取得することができます。

引用:Twitter Publish

では、Wordpressのウィジェットにタグを貼り付ける方法に進みます。

3.Wordpressのウィジェットにタグを設定

引用:Twitter Publish

外観>ウィジェットを開きます。

旧ウィジェットで対応していますm(__)m
引用:WordPress.org

最新のWordpressですと、ウィジェットが新しくブロックタイプになっているかと思います。ただ、僕の場合は、元々旧ウィジェットで設定していたので、プラグイン「Classic Widgets」を入れて旧ウィジェットにて対応しています。

新しいウィジェットの方が気になる方はコメントいただければと思います。可能な場合は新ウィジェットの方も確認してみます。

カスタムHTMLをサイドバーに入れる

引用:wordpress

利用できるウィジェットの中から「カスタム HTML」をドラッグしてサイドバーの表示したい場所にドロップします。

タグを入力して保存

引用:wordpress

先ほど2でコピーした埋め込みタグを「内容」に貼り付けて、「保存」をクリックしたら作業完了です。

表示成功

引用:wordpress

無事タイムラインを埋め込むことができました。

まとめ

比較的簡単な操作でWordpressのサイドバーにTwitterのタイムラインを埋め込むことが出来ました。

参考になれば幸いです。僕自身も忘れていたらまた見直しながら対応したいと思います。