WordPress

【WordPress】Twitterアカウント作成とサイドバーにタイムライン表示させる!

【WordPress】Twitter新規アカウント作成から、サイドバーにTwitterタイムラインを表示する方法のアイキャッチ画像

 

 

どうも、たべばかです。今回は、Twitterアカウント作成から、サイドバーにTwitterのタイムラインを追加する方法をご紹介します。
tabebaka

 

ツイッターをサイドバーに追加してみましょう。

 

 

本記事でわかること

Twitter新規アカウント作成する方法

WordPressでサイドバーにTwitterタイムラインを表示する方法

 

 

Twiiterアカウントを作成する(パソコン版)

 

まず、Twitterにアクセスします。

 

step
1
ログイン画面

ツイッターのログイン画面で「パスワードをお忘れですか? - アカウント作成」をクリックします。

「パスワードをお忘れですか? - アカウント作成」をクリックします。

ここから新規アカウントを作成していきましょう。

※既にアカウントをお持ちの方は、こちらからお読みください。

 

 

step
2
アカウントを作成

アカウント作成画面で、名前と電話番号またはメールアドレスを入力する

名前にツイッターネームを入力しましょう。

電話番号、または「かわりにメールアドレスを登録する」をクリックして登録しましょう。

 

 

step
3
環境をカスタマイズする

Twitterの環境をカスタマイズするで次へをクリックする

特に設定することはありません。

次へをクリックします。

 

step
4
ステップ3/5 アカウントを作成

Twitterアカウントで登録するをクリックする

登録するをクリックします。

 

step
5
認証コードを送信しました

ショートメールまたはメールアドレスへ届いたショートコードを入力します

先ほど登録した電話番号、またはメールアドレス宛に認証コードが届きます。

届いた認証コードを入力して、次へをクリックします。

 

step
6
パスワードを入力

Twitterのパスワードを入力します

任意の6文字以上の英数字でパスワードを入力します

 

step
7
プロフィール画像を選ぶ

Twitterのプロフィール画面で次へをクリックする

今はしないをクリックする。

※または、カメラをクリックしてプロフィールに使用する画像を選択しましょう。

 

step
8
自己紹介

Twitterのプロフィール文があれば入力します。

今はしないをクリックします。

※自己紹介文があれば入力しましょう。

 

※次に「アドレス帳をアップロードして友だちを探しますか?」と聞かれることがあるようです。今はしないをクリックしましょう。

 

step
9
興味のあるトピックを選ぶか、検索して追加してください

Twitterで興味のあるトピックを選ぶか、検索して追加してくださいで今はしないをクリックする

今はしないをクリックします。

※興味のあるトピックがあれば追加しましょう。

 

step
10
おすすめアカウント

Twitterのおすすめアカウントで次へをクリックします。

次へをクリック

 

 

Twitterアカウント作成完了です

お疲れさまでした。

これでTwitterアカウントの完成です。

 

Twitterのタイムラインコードを取得

Twitterのプロフィールボタンをクリックします。

プロフィールをクリックします。

 

 

Twitterのプロフィール画面のURLをコピーします。

プロフィール画面のURLをコピーします

 

 

こちらのサイトでコピーしたURLを貼付けます

https://publish.twitter.com/#へアクセスして、コピーしたURLを貼り付けEnterキーを押します。

 

 

Embedded Timelineを選択します。

Embedded Timelineをクリックします。

 

 

Set customization optionsをクリックします。

Set customization options.をクリックします。

 

 

サイドバーに挿入するタイムラインのサイズと言語を入力して、表示サンプルを確認する
  • What size would you like your timeline to be?

  Height(px)(高さ)Width(px)(幅)を入力します。

  • What language would you like to display this in?

  Automatic ⇒ Japanese に変更します。

下部にサイドバーに表示するタイムラインのサンプルが表示されます。

よろしければUpdateをクリックしましょう。

 

参考

サイドバーの横幅を確認する方法

ブログのサイドバーのサイズを確認する方法
  • 確認したいページを開き、F12キーを押してChromeのデベロッパーツール(検証機能)を立ち上げる。
  • 矢印アイコンをクリック後、サイドバーをクリックして選択する。
  • 右下のウインドウを下にスクロールして、横幅を確認しましょう。

画面の右にデベロッパーツールがある場合は、「︙」を選択します。
Dock sideを右から2番目のアイコンに変更して、デベロッパーツールを下側に移動しましょう。
 (横にあると正確な横幅が表示されません。)

Chrome Developer Toolsを横でなく下部に表示させる

 

 

 

生成したコードをCode copyをクリックしてコピーします。

生成されたコードをCopy Codeをクリックしてコピーします

 

 

 

 

WordPressのサイドメニューにTwitterタイムラインを表示

 

WordPressのメニュー外観よりウィジェットを選ぶ

WordPressの左メニューの外観からウィジェットを選択します。

 

 

サイドバーにカスタムHTMLを追加します。

「カスタムHTML」をサイドバーの表示させたい場所にドラッグして追加します。

 

 

カスタムHTMLへコピーした内容を貼付けます。

「カスタムHTML」の内容に、コピーしたコードを貼り付けます。

 保存して完了です。

 

注意ポイント

保存ボタンをクリックしても保存されない場合は、WAF設定を無効にしてみましょう。

※1 WAF設定を無効にしても、反映までに5~10分ほど時間が必要です。少し待って保存しましょう。
※2 保存が完了したら、必ずWAF設定を有効にしましょう!

ロリポップ!サーバーでは、ユーザーページからWAF設定の変更ができるよ。

ロリポップ!サーバーのWAF設定を無効にする

 

ツイッターのタイムラインが表示されました。

お疲れさまでした。

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

 

おめでとうございます!サイドバーにタイムラインが追加できましたね。
ブログ仲間を募集しておりますので、よろしければご報告ください。
tabebaka

 

 

-WordPress