WordPressのサイドバーにTwitterのタイムラインを表示させる方法【図解】

スポンサーリンク
WordPress

他ブログでもワードプレスのサイドバーにタイムラインを表示させているのをよく見かけて、タイムラインなら動きも見えてなんかイイ!!という理由で埋め込むことにしたら凄く簡単に設定できたのでご紹介します。

プラグインやコードは不要!簡単なので設定したい方はお試しください。

スポンサーリンク

TwitterからWordpressへコピペで簡単設定

私のようなブログ初心者は簡単といっても設定完了までだいたいスムーズにいけないの定番の流れなのですが(汗)今回はつまずくことなくすんなり設定できました♪

Twitter側

設定

プロフィールと設定>設定とプライバシー>ウィジェット>publish.twitter.comをクリック

TwitterのURL(https://twitter.com/ユーザー名)を入力>→をクリック

自分の最新のタイムラインが表示されるようにする。

Embedded Timeline(埋め込みタイムライン)をクリック

set customization options.(カスタマイズオプションを設定)をクリック

下記設定後>Update

①Height(px):タイムラインの高さ(一般的な推奨数値600~800)

②Width(px):タイムラインの幅(個人的な推奨数値300)

③背景色の設定:Light(ホワイト)・Dark(グレー)

④リンクの文字色の設定:デフォルト6色、カラーコード入力でもOK

⑤言語の設定:Automatic(自動)

コードを取得

Copy Cord(コピーコード)をクリックWordPressに埋め込みコードがコピーされました。

Twitter側での処理はこれで完了です。あとはこのままWordpressに移動してコピーしたコードを埋め込みます。

WordPress側

もしかしたら、サイトによって見え方が違うかもしれないので、念のため。当サイトは人気無料テーマ「Cocoon」を使ってます。以下、Wordpressログイン後の設定です。

コードの埋め込み設定

ダッシュボード>外観>ウィジェット>カスタムHTMLをドラッグ&ドロップ

※カスタムHTMLがない場合は黄色枠のテキストでもOKです。

カスタムHTMLの▼をクリック>タイトル入力(任意のタイトル)>コードを貼付け>保存

設定完了

サイトを更新後、表示されてるのが確認できたら設定完了です。

動作確認後の処理に注意

動作確認のためにtestツイートしたりすると思いますが、その際にツィートを非公開にしてtestした場合は、非公開のチェックを戻すのをお忘れなく!

WordpressでTwitterの埋め込み表示がされない!?まずは確認すべき設定【図解】
Wordpressでブログを作成して、サイドバーにタイムラインを表示させていたのに突然非表示になってしまた!そんな時、基本的な設定の確認するだけで問題が解決した方法をご紹介します。ブログ初心者のありがち初歩的ミスパターンです。

 

コメント