こんにちは。
ネット系フリーランサー mammina です。
WordPress(ワードプレス) をインストールしてテーマをセットしたら、次はサイドバーまわりを整えて行きたいですよね！
今回は、WordPress のサイドバーに twitter を表示させる方法をご紹介します
twitter の投稿内容を表示させることを専門用語で
「twitter タイムラインの『埋め込み』」
と言います。
WordPress に入れたい時も
「埋め込み」というキーワードを使って
「WordPress facebookページ 埋め込み」等で検索すると
詳しいやり方を見つけやすいですよ！
WordPress のサイドバーに twitter を埋め込むのは、大きな流れとしては、
- twitter の公式サイトで「埋め込みコード」を作ってコピーしてくる
- WordPress のサイドバーに貼り付ける
という形になります。
ではやっていきましょう！
【ステップ1】twitter の公式サイトで「埋め込みコード」を作ってコピーしてくる
twitter にログイン
twitter のログインページにアクセスしてログインします。
「埋め込みコード作成ページ」にアクセス
twitter にログインした状態で、こちら↓↓↓をクリックして、ユーザータイムライン埋め込みコード作成ページにアクセスします
twitter 埋め込みの表示方法の選択画面が表示されるので、ボタンでなくリスト表示を選びます。
各種設定を変えたい方はお好みで。
デフォルトだと、やけに縦が長くなりました……
ちなみに、私は高さを「800」にしました。
(今表示されているサイズがそれです)
出来上がったコード (HTML) をコピー
自動で埋め込みコードが表示されるので、コピーします。
次のステップは、『WordPress の管理ページにログイン』です！
(ご参考) コチラは古い情報です……
読者の HAL 様より、こんなコメントをいただきました。
初めまして。
先程手順通りに試してみたところ、
のリンクを開くと”ユーザーウィジェット”ではなく”検索ウィジェット”を作成するページが開かれてしまうようです。
ログインした状態で複数のアカウントで試してみましたが検索ウィジェットの作成サイトが開かれました。
確かに試してみると、「検索ウィジェット」作成のページになってしまいます！
2016年8月現在の最新の方法は、『「埋め込みコード作成ページ」にアクセス』にまとめましたので、参考にしてください。
「埋め込みコード作成ページ」にアクセス
こちら↓↓↓をクリックして、埋め込みコード作成ページにアクセスします
「ユーザーウィジェットを作成する」画面が表示されるので、各種設定をしてコードを作成します。
「そのまま」で大丈夫ですよ！
見た目にこだわる方だけ設定を変更しましょう
出来上がったコード (HTML) をコピー
[ウィジェットを作成]ボタンをクリックすると、自動で埋め込みコードが表示されるので、コピーします。
【ステップ2】WordPress のサイドバーに貼り付ける
ステップ1 は、twitter のページでの作業でした。
今度は、WordPress の管理ページで作業します。
WordPress の管理ページにログイン
管理ページはたいてい
http://(ドメイン名)/wp-login.php
もしくは
http://(ドメイン名)/wp/wp-login.php
で、「ユーザー名」「パスワード」を入れることで
管理画面にアクセス (ログイン) できます。
そのサイトを作った方にご相談ください m(__)m
WordPress 管理メニューの[外観] – [ウィジェット]をクリック
![WordPress の [ウィジェット] にアクセス](http://37min.com/wp/wp-content/uploads/2016/03/twitter-sidebar-3.jpeg)
[テキスト] ウィジェットを [サイドバー] に追加
ここがちょっと難しいのですが……
[テキスト]ウィジェットというのが画面の左の方にあるはずです。
それをドラッグして……
マウスで１回クリックして、
そのままの状態で移動させることです。
画面の右の方にある[サイドバー]ウィジェットにドロップします。
クリックしたまま移動していたマウスのボタンを
パッと離すことです。
twitter 公式サイトで作った「埋め込みコード」を [テキスト]ウィジェットに貼り付け
サイドバーに追加した[テキスト]ウィジェットの入力欄が自動で開きます。
そこで、[内容] 欄に、twitter 公式サイトで作った「埋め込みコード」を貼り付けます。[タイトル] 欄は、twitter が表示される部分の見出しになるので、とりあえず「twitter」とでも入れておきましょう。あとで変更もできるので。
[テキスト]ウィジェットに[内容] と [タイトル] を入力したら、忘れずに [保存] ボタンをクリックしましょう。これで埋め込み作業は完了です！
【完成イメージ】
自分のサイトにアクセスしてみましょう。サイドバーに twitter が表示されているのを確認したら作業完了です。おつかれさまでした！
ちなみに、ツイッターを本文中に埋め込む方法はこちらが詳しいです。ご参考まで。
twitter をサイドバーに埋め込むメリットは？
twitter は一般に、ブログよりも更新頻度が高く、リアルタイムで情報発信をするメディアです。そのため、ブログの更新頻度が高くないときでも、画面に変化をつけやすい、ビジネスとして「動いてる感」があるというメリットがあります。
また、コメント欄でなく twitter を使って、質問を受け付けたり、フォローしたり等、ファンの方との交流をはかる目的で使っている方もいらっしゃいます。タイムラインでどんどん流れていってしまうので、その時その時の状況に合わせて、柔軟に対応出来るというわけですね。
日本では、なぜか twitter が大流行です。今は「交流」というよりも、「リアルタイムな情報収集」メディアとして使っている方も増えています。ぜひ、活用していきたいですね！
コメント
できました♪ありがとうございます！
お役に立てて嬉しいです(^^)
ご連絡ありがとうございました！
初めまして。
先程手順通りに試してみたところ、
https://twitter.com/settings/widgets/new
のリンクを開くと”ユーザーウィジェット”ではなく”検索ウィジェット”を作成するページが開かれてしまうようです。
ログインした状態で複数のアカウントで試してみましたが検索ウィジェットの作成サイトが開かれました。
HAL様、はじめまして。
そして、ご報告ありがとうございます！
> 先程手順通りに試してみたところ、
> https://twitter.com/settings/widgets/new
> のリンクを開くと”ユーザーウィジェット”ではなく”検索ウィジェット”を作成するページが開かれてしまうようです。
ホントですね！ いつの間に……？
ちょっと私も調べてみたところ、
今だと、 twitter にログインした状態で、こちら↓↓↓をクリックすると
https://twitter.com/settings/widgets/new/user
ユーザータイムラインの埋め込みコードを取得できるようです。
(英語ですが……)
すでにご解決されているかもしれませんが、ご参考まで。
記事の更新もしたので、良かったらご覧ください。
この度は、貴重な実践報告をありがとうございました m(__)m
参考になりました！ありがとうございます。
お役に立てて良かったです！
コメントありがとうございました。
うまく表示できません。
検索ウィジェットを作成するとか、外観等、表示されないので、全くわからない状況です。。
ご質問ありがとうございます。
もう解決されているかもしれませんが……
最新の情報はこちら↓です。
http://37min.com/wordpress-twitter-sidebar/#embeded
ページ内に古い情報があり、混乱させてしまい、失礼しました。
成功している方もいらっしゃるので、ぜひご参考になれば幸いです。
この度は、メッセージ、ありがとうございました！
無事サイドバーに登録できました！ありがとうございます。
無事にサイドバーに登録できたとのこと、よかったです！
ご連絡ありがとうございました(^^)
はじめまして。
mamminaさんの記事を沢山参考にして、やっとWordPressサイトの開設に漕ぎ着けた５０のオッサンです。
初めてで分からないことばかりなので、こちらのサイトなど、沢山の先輩方の記事が本当にありがたいです。
自分も早く、誰かの役に立てるような記事を書けるようになりたいです。
Twitterのサイドバーも無事に設置できました。
では、これからもよろしくお願いします！
あき99さま、コメントありがとうございます。
Twitter のサイドバー設置が無事にできて良かったです！
私もたくさんの先輩方の記事に助けられています^^
ネットって、楽しいですよね。
WordPress サイトのご開設おめでとうございます♪
[…] WordPress サイドバーに twitter を入れる方法【2016年8月更新】WordPress(ワードプレス) […]
でしました！とてもわかりやすかったです！ありがとうございます！
良かったです！
わかりやすかったとのこと嬉しいです(^^)
ありがとうございました☆
[…] http://37min.com/wordpress-twitter-sidebar/ […]
[…] WordPress サイドバーに twitter を入れる方法【2016年8月更新】 […]
[…] WordPress サイドバーに twitter を入れる方法【2016年8月更新】 […]