ブログ運営

WordPressでサイドバーにtwitterのタイムラインを表示する手順

こんにちは、はるまき(@harumaki_tuzi)です。Wordpressのサイドバーに、自分のTwitterのタイムラインを表示する方法をメモしています。

ひつじさん(@hituji_1234)のWordpressテーマ「JIN」、手順は他のテーマでも同じです。

やることは、

  1. ウィジェットに埋め込むTwitterタイムラインのコードを取得する
  2. WordPressのウィジェットでサイドバーにコードを貼りつける

の2つ。

(adsbygoogle = window.adsbygoogle || []).push({});

目次

ウィジェットに埋め込むTwitterタイムラインのコードを取得する

自分のTwitterアカウントのプロフィールページを表示する

WordPressに表示させたいTwitterアカウントのホームページを表示させます。
ログイン中なら、右上の自分のアイコンをクリックして、プルダウンメニューから「プロフィール」をクリックします。

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

プロフィールページのURLをコピーします。

貼り付けるためのコードを生成します。

次にtwitterの埋め込みコード作成ページへ。

https://publish.twitter.com/#

「Enter a Twitter URL」に先ほどコピーしたコードをペーストしてEnterキーを押します。

「Embedded Timeline」をクリックします。
これで、コードができたのですが、自動的に生成されたコードでは、サイズがWordpressのサイドバーに合わないので、カスタイマイズします。

「set custpmaization options」をクリックします。

高さ、横幅、言語を設定して、「Update」をクリックします。

2021年1月4日追記
ご指摘をいただき確認したところ、横幅は特に何も設定しなくても自動的に調整されますので、空欄のままでOKです。
こちらの記事を参考にしました。

カスタイマイズされたコードが生成されたので、

「Copy Code」をクリックします。メモ帳などに貼り付けておくといいでしょう。

WordPressのサイドバーにウィジェットを設定する

サイドバーに「テキスト」を追加する

WordPressのダッシュボードから、

外観>ウィジェット

をクリックします。

ウィジェットの中から、「テキスト」を「サイドバー」の表示させたい場所にドラッグします。

「テキスト」の編集は、ビジュアルエディタとテキストエディタが選択できます。
htmlコードを貼りつけるので、「テキストエディタ」にして、先ほどコピーしたコードを貼り付けます。

タイトルは「Twitter」などにします。

「保存」をクリックします。

これで、WordpressのサイドバーにTwitterのタイムラインが表示されます。

(ちなみに、今はこのブログにはtwitterタイムラインを表示させていません)

なお、
twitterの、右上の自分のアカウントアイコンから、

プロフィールと設定>設定とプライバシー>ウィジェット>新規作成>プロフィール

の順に進んでも、

https://publish.twitter.com/#

を表示させられますが、

せっかくこのページに来てくれた方には、
そのプロセスを省けるように、リンクを掲載しましたのでそのまま使ってくださいね。

この記事のURLをコピーする