WordPress サイドバーに twitter を入れる方法【2016年8月更新】

サイドバーに twitter が追加されました

こんにちは。
ネット系フリーランサー mammina です。

WordPress(ワードプレス) をインストールしてテーマをセットしたら、次はサイドバーまわりを整えて行きたいですよね!

今回は、WordPress のサイドバーに twitter を表示させる方法をご紹介します(2016年3月現在 → 2016年8月に情報更新しました!)

まみーな
ちなみに、WordPress など、twitter の外で、
twitter の投稿内容を表示させることを専門用語で
「twitter タイムラインの『埋め込み』」
と言います。
まみーな
twitter に限らず、facebook や Instagram などを
WordPress に入れたい時も
「埋め込み」というキーワードを使って
「WordPress facebookページ 埋め込み」等で検索すると
詳しいやり方を見つけやすいですよ!

WordPress のサイドバーに twitter を埋め込むのは、大きな流れとしては、

  1. twitter の公式サイトで「埋め込みコード」を作ってコピーしてくる
  2. WordPress のサイドバーに貼り付ける

という形になります。

ではやっていきましょう!

【ステップ1】twitter の公式サイトで「埋め込みコード」を作ってコピーしてくる

twitter にログイン

twitter のログインページにアクセスしてログインします。

twitter ログインページ

「埋め込みコード作成ページ」にアクセス

twitter にログインした状態で、こちら↓↓↓をクリックして、ユーザータイムライン埋め込みコード作成ページにアクセスします

twitter 埋め込みの表示方法の選択画面が表示されるので、ボタンでなくリスト表示を選びます。

Here are your display options (どうやって表示させますか?)

各種設定を変えたい方はお好みで。

Twitter_Publish_2

Twitter_Publish_1

まみーな
「高さ」だけは調整した方がいいかも、です。
デフォルトだと、やけに縦が長くなりました……

ちなみに、私は高さを「800」にしました。
(今表示されているサイズがそれです)

出来上がったコード (HTML) をコピー

自動で埋め込みコードが表示されるので、コピーします。

Twitter_Publish_3

Twitter_Publish

次のステップは、『WordPress の管理ページにログイン』です!

(ご参考) コチラは古い情報です……

読者の HAL 様より、こんなコメントをいただきました。

初めまして。
先程手順通りに試してみたところ、

のリンクを開くと”ユーザーウィジェット”ではなく”検索ウィジェット”を作成するページが開かれてしまうようです。
ログインした状態で複数のアカウントで試してみましたが検索ウィジェットの作成サイトが開かれました。

確かに試してみると、「検索ウィジェット」作成のページになってしまいます!

2016年8月現在の最新の方法は、『「埋め込みコード作成ページ」にアクセス』にまとめましたので、参考にしてください。

まみーな
HAL 様、ご連絡ありがとうございました m(__)m

「埋め込みコード作成ページ」にアクセス

こちら↓↓↓をクリックして、埋め込みコード作成ページにアクセスします

「ユーザーウィジェットを作成する」画面が表示されるので、各種設定をしてコードを作成します。

twitter でユーザーウィジェットを作成する

まみーな
基本的には設定はいじらなくて
「そのまま」で大丈夫ですよ!
見た目にこだわる方だけ設定を変更しましょう
まみーな
設定などについて詳しく知りたい時は、
下記の公式サイトを見てみてくださいね!
https://dev.twitter.com/ja/web/embedded-timelines

出来上がったコード (HTML) をコピー

[ウィジェットを作成]ボタンをクリックすると、自動で埋め込みコードが表示されるので、コピーします。

twitter ウィジェットが作成されました

【ステップ2】WordPress のサイドバーに貼り付ける

ステップ1 は、twitter のページでの作業でした。
今度は、WordPress の管理ページで作業します。

WordPress の管理ページにログイン

管理ページはたいてい

http://(ドメイン名)/wp-login.php

もしくは

http://(ドメイン名)/wp/wp-login.php

で、「ユーザー名」「パスワード」を入れることで
管理画面にアクセス (ログイン) できます。

まみーな
もしも出来なかったら、
そのサイトを作った方にご相談ください m(__)m

WordPress 管理メニューの[外観] – [ウィジェット]をクリック

WordPress の [ウィジェット] にアクセス

[テキスト] ウィジェットを [サイドバー] に追加

ここがちょっと難しいのですが……

[テキスト]ウィジェットというのが画面の左の方にあるはずです。
それをドラッグして……

まみーな
「ドラッグ」というのは
マウスで1回クリックして、
そのままの状態で移動させることです。

テキストウィジェットを選択

画面の右の方にある[サイドバー]ウィジェットにドロップします。

まみーな
「ドロップ」というのは、
クリックしたまま移動していたマウスのボタンを
パッと離すことです。

テキストウィジェットをサイドバーウィジェットに追加

twitter 公式サイトで作った「埋め込みコード」を [テキスト]ウィジェットに貼り付け

サイドバーに追加した[テキスト]ウィジェットの入力欄が自動で開きます。

そこで、[内容] 欄に、twitter 公式サイトで作った「埋め込みコード」を貼り付けます。[タイトル] 欄は、twitter が表示される部分の見出しになるので、とりあえず「twitter」とでも入れておきましょう。あとで変更もできるので。

[テキスト]ウィジェットに[内容] と [タイトル] を入力したら、忘れずに [保存] ボタンをクリックしましょう。これで埋め込み作業は完了です!

テキストウィジェットに twitter 埋め込みコードを貼り付け

【完成イメージ】

自分のサイトにアクセスしてみましょう。サイドバーに twitter が表示されているのを確認したら作業完了です。おつかれさまでした!

サイドバーに twitter が追加されました

ちなみに、ツイッターを本文中に埋め込む方法はこちらが詳しいです。ご参考まで。

twitter をサイドバーに埋め込むメリットは?

twitter は一般に、ブログよりも更新頻度が高く、リアルタイムで情報発信をするメディアです。そのため、ブログの更新頻度が高くないときでも、画面に変化をつけやすい、ビジネスとして「動いてる感」があるというメリットがあります。

また、コメント欄でなく twitter を使って、質問を受け付けたり、フォローしたり等、ファンの方との交流をはかる目的で使っている方もいらっしゃいます。タイムラインでどんどん流れていってしまうので、その時その時の状況に合わせて、柔軟に対応出来るというわけですね。

日本では、なぜか twitter が大流行です。今は「交流」というよりも、「リアルタイムな情報収集」メディアとして使っている方も増えています。ぜひ、活用していきたいですね!

コメント

  1. TUDURA より:

    できました♪ありがとうございます!

  2. HAL より:

    初めまして。
    先程手順通りに試してみたところ、
    https://twitter.com/settings/widgets/new
    のリンクを開くと”ユーザーウィジェット”ではなく”検索ウィジェット”を作成するページが開かれてしまうようです。
    ログインした状態で複数のアカウントで試してみましたが検索ウィジェットの作成サイトが開かれました。

    • mammina より:

      HAL様、はじめまして。
      そして、ご報告ありがとうございます!

      > 先程手順通りに試してみたところ、
      > https://twitter.com/settings/widgets/new
      > のリンクを開くと”ユーザーウィジェット”ではなく”検索ウィジェット”を作成するページが開かれてしまうようです。

      ホントですね! いつの間に……?

      ちょっと私も調べてみたところ、
      今だと、 twitter にログインした状態で、こちら↓↓↓をクリックすると
      https://twitter.com/settings/widgets/new/user

      ユーザータイムラインの埋め込みコードを取得できるようです。
      (英語ですが……)

      すでにご解決されているかもしれませんが、ご参考まで。
      記事の更新もしたので、良かったらご覧ください。

      この度は、貴重な実践報告をありがとうございました m(__)m

  3. Kokuei より:

    参考になりました!ありがとうございます。

  4. シャーナ より:

    うまく表示できません。

    検索ウィジェットを作成するとか、外観等、表示されないので、全くわからない状況です。。

    • mammina より:

      ご質問ありがとうございます。

      もう解決されているかもしれませんが……
      最新の情報はこちら↓です。
      http://37min.com/wordpress-twitter-sidebar/#embeded

      ページ内に古い情報があり、混乱させてしまい、失礼しました。
      成功している方もいらっしゃるので、ぜひご参考になれば幸いです。

      この度は、メッセージ、ありがとうございました!

  5. のらねこ より:

    無事サイドバーに登録できました!ありがとうございます。

    • mammina より:

      無事にサイドバーに登録できたとのこと、よかったです!
      ご連絡ありがとうございました(^^)

  6. あき99 より:

    はじめまして。
    mamminaさんの記事を沢山参考にして、やっとWordPressサイトの開設に漕ぎ着けた50のオッサンです。
    初めてで分からないことばかりなので、こちらのサイトなど、沢山の先輩方の記事が本当にありがたいです。
    自分も早く、誰かの役に立てるような記事を書けるようになりたいです。

    Twitterのサイドバーも無事に設置できました。
    では、これからもよろしくお願いします!

    • mammina より:

      あき99さま、コメントありがとうございます。
      Twitter のサイドバー設置が無事にできて良かったです!
      私もたくさんの先輩方の記事に助けられています^^
      ネットって、楽しいですよね。
      WordPress サイトのご開設おめでとうございます♪

  7. […] WordPress サイドバーに twitter を入れる方法【2016年8月更新】WordPress(ワードプレス) […]

  8. QBL より:

    でしました!とてもわかりやすかったです!ありがとうございます!

    • mammina より:

      良かったです!
      わかりやすかったとのこと嬉しいです(^^)
      ありがとうございました☆

  9. […] WordPress サイドバーに twitter を入れる方法【2016年8月更新】 […]