頑張らない!でも諦めない!必死にならずにええかげん

WordPressサイドバーにTwitter™タイムライン(timeline)ウィジェットを表示する

      2014/11/22

Twitter™の様々な種類のタイムライン(timeline)ウィジェットを設置する場所と言えば、
サイドバーが一般的ではないかと思います。
WordPressのサイドバーには簡単にウィジェットを設置することができます。

はじめに

Twitterのウィジェットをサイドバーに設置と聞いて特に悩むことはないでしょう。

普通にテキストウィジェットに対して取得したタグを設定して完了です。

ただ、こうしたWebサービスは使い方は貴方次第といったものなので、
本文中に挿入することも可能ですので、必要とあれば投稿中で紹介することも可能です。
WordPress投稿本文中にTwitter™タイムライン(timeline)ウィジェットを表示する

ウィジェットのサイドバーへの挿入方法

まずはTwitterアカウントを取得していることが前提です。当たり前ですが。
まだアカウントをお持ちでないようでしたら、以下を参考に取得をご検討されてください。
twitter™共有サービス(SNS)の利用登録

またTwitterのウィジェットにも様々な種類がありますので、
用途に応じてせんたくされるといいでしょう。
Twitter™で作成が可能なウィジェットの例

さて、実際にサイドバーに対してウィジェットを設置する場合、
WrodPressを利用している場合には特に新しくプラグインをインストールしたりする必要はありません。

まず、WordPressのダッシュボードから[外観]-[ウィジェット]を選択します。

01_外観・ウィジェットの選択

外観・ウィジェットの選択

ウィジェットが表示されたら「利用できるウィジェット」から「テキスト」ウィジェットを、
サイドバーエリアなどにドラッグし配置します。

02_テキストウィジェットの配置

テキストウィジェットの配置

テキストウィジェットを設置したら「タイトル」を入力し、
フィールドにTwitterから取得したウィジェットのタグ(ソース)を貼り付けます。

ウィジェットタグの取得方法については以下でご紹介しています。
Twitter™でブログに設置するタイムライン(timeline)ウィジェットを作成する
貼り付けが完了したら[保存]をクリックして反映します。

03_Twitterタグの貼り付け

Twitterタグの貼り付け

サイトを開くと設定したウィジェットが表示されます。

04_Twitterウィジェットの表示

Twitterウィジェットの表示

尚、ウィジェットの表示幅に関しては、サイドバーなど設置した場所の要素幅に合わせて、
適宜調整されて表示されます。

05_Twitterウィジェット幅の例

Twitterウィジェット幅の例

もし設置した領域が520px以上の幅がある場合で幅の調整を行いたい場合には、
以下の投稿で幅調整の方法をご紹介しています。
Twitter™ウィジェットの表示幅を変更する方法

WordPressのサイドバーにTwitterタイムラインウィジェットを設置する方法は以上です。

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

こうして簡単に設置することができますが、
他にも専用の機能としてTwitterのウィジェットを表示する機能を提供しているプラグインもあります。

ご興味があればそちらも検討されてはいかがでしょうか。
Twitter™ タイムラインウィジェットをJetpackを利用して表示する


twitterおよび、twitterロゴは、トゥイッター インコーポレイテッドの登録商標です。
登録番号は以下の通りです。
第5188811号、第5469003号
ツイッター、およびツイッターロゴはトゥイッター インコーポレイテッドの登録商標(商願2012-70641)です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介
すべて展開 | すべて省略

Rakuten Promotion

ページ
すべて展開 | すべて省略

 - SNS, twitter, WordPress

  関連記事

eye_wordpress
指定したWordPressカテゴリやタグの投稿でバナー(Google AdSesne)を表示しない方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_google
Google URL Shortener URL短縮サービスの利用

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_sns
facebookやtwitterの投稿連携などを試験する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_local_wordpress
ローカル(localhost)環境wordpressでjetpackの有効化

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
RSS購読ボタンをサイドバーウィジェットにJetpackを利用して表示する

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
WordPressのインストールディレクトリに配置される.htaccess作成タイミング

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
09.共有-Jetpack by WordPress.com

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
国際版 WordPressの日本語化手順

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
Welcart e-Commerce_v1.3.15プラグインの必須初期設定

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_twitter
(iPhone)Twitter™のPC版サイトをiPhone®で表示する方法

Google or AdMax Promotion(cel) 禁断の機能がau公 …