【プラグインなし】TwitterをWordPressのサイドバーに埋め込む方法が超簡単!

こちらの記事では、ワードプレスのサイドバーにTwitterを埋め込んで表示させる方法を解説します。

少し前まではプラグインを使わなければできなかったのですが、現在はプラグインを使わずに設定ができるようになりました!

 

WordPressにインストールするプラグインは1つでも少ない方が良いので、私もこの方法で埋め込んでいますよ。

 

プラグインは少ない方が良い2つの理由

  1. プラグイン同士が干渉し合って起こる不具合もある。
  2. サイトが真っ白になるエラーはプラグイン更新時に起こることが最も多いので、今後ずっとブログを運営していく上でプラグインの更新は1回でも少ない方が良い。

 

TwitterをWordPressのサイドバーにプラグイン無しで埋め込む方法を動画で解説!

下準備

Twitterにログインしておいてください。

アカウントを複数持っている場合は、WordPressに埋め込みたいアカウントでログイン。

 

WordPressの画面で設定をする以外に、Twitter Publishにもアクセスします。

TwitterをWordPressのサイドバーにプラグイン無しで埋め込む方法を画像で解説!

画面のスクリーンショットを用いて解説していきます。

細かな画面遷移せんいが記事投稿時と異なる場合もあります。

ツイッターにログインしておく

Twitterにログインしておいてください。

アカウントを複数持っている場合は、WordPressに埋め込みたいアカウントでログインしておいてくださいね。

Twitter Publishでコードを取得

Twitter Publishにアクセス

What would you like to embed?と表示されています。

Twitterをワードプレスのサイドバーにプラグイン無しで埋め込む方法

環境によっては日本語で「何を埋め込みたいですか?」と表示されることもあります。

下記の状況に応じて操作を行ってください

状況操作
自分のTwitterアカウントが自動で表示されているURLが正しいか念のため確認
自動で表示されていない先ほどログインしておいたツイッターの画面から自分のURLをコピーしてきてペースト

「エンター」キーを押下

Here are your display optionsと表示されています。

Twitterをワードプレスのサイドバーにプラグイン無しで埋め込む方法

日本語で「表示オプションは次のとおりです」と表示されることもあります。

 

下記2通りから選ぶことができるので、埋め込みたい方をクリック

左側右側
Twitterのタイムラインが埋め込まれる
(こちらがオススメです)
Twitterの”フェイス部分”が埋め込まれる

当記事では、左側(オススメ)をクリックしたという前提で解説を進めます。

Twitterをワードプレスのサイドバーにプラグイン無しで埋め込む方法「set customization options」をクリック

日本語で「カスタマイズオプションを設定する。」と表示されることもあります。

ツイッターをサイドバーにプラグインなしで埋め込む方法

Heightハイト」に好きな数値を入力
(上図では650と入力しました)

「Light」or「Dark」からデザインタイプを選択

言語を選択

  1. この数値はサイドバーに表示させる時のHeight(高さ)のおすすめは600〜800ぐらいです。
    色んな数値を入れて確認してみると良いですね。
  2. Heightの右側にあるWidthワイズはブランクで大丈夫です。
    (後でスマホにも合うようにするコードを紹介します)

「Update」をクリック

日本語で「更新」と表示されることもあります。

Twitterをワードプレスのサイドバーにプラグイン無しで埋め込む方法「Copy Code」をクリック

日本語で「コードをコピーする」と表示されることもあります。

これで、コードが取得(コピー)できました!

続いて、WordPressのサイドバーにTwitterを設置していきます。

 

ワードプレスに貼り付け

WordPressのダッシュボードの「外観」をポイント

「ウィジェット」をクリック

 

画面左下の方にある「テキスト」というボックスを右側へドラッグ&ドロップ

右側へドラッグ&ドロップすることで、ブログのサイドバーにその項目を表示させることができます。

 

WordPressのウィジェットは、左側にある項目のボックスを右側へ移動させることで「サイドバーに表示させる」と認識するためです。

逆にサイドバーから消したい項目があれば、右側にある項目を左へドラッグ&ドロップすることで表示させないようにできます。

サイドバー内の表示位置は上下にドラッグすることで好きな位置に設置することができます。

ウィジェット内での上下位置がそのままサイドバーでの上下位置になります。


Twitterをワードプレスのサイドバーにプラグイン無しで埋め込む方法

タイトル欄にTwitterやツイッターなどと入力

「テキスト」タブをクリック

Twitterをワードプレスのサイドバーにプラグイン無しで埋め込む方法先ほど取得(コピー)してきたコードをペースト

「保存」をクリック

 

これで、プラグインを使わずにWordPressのサイドバーにTwitterを埋め込むことが出来ました!

 

コメントを付けたい場合

もし、このような感じ↓にコメントを入れたい場合は…

Twitterをワードプレスのサイドバーにプラグイン無しで表示させる方法

ビジュアルタブをクリックし…Twitterをワードプレスのサイドバーにプラグイン無しで表示させる方法入れたいコメントを入力

保存をクリック

 

これでサイドバーにコメント付きでTwitterを埋め込むことができました!
プレビューで確認してみてくださいね。

スマホなどで見るとTwitterがはみ出る問題を解消

先ほど、

後でスマホにも合うようにするコードを紹介します

と書きましたが、パソコンやスマホの横幅ってデバイスによって異なるので数値で指定しない方が良いです。

スマホで見てちょうど良いと思っても、パソコンで見たら「細すぎっ」となってしまったり、パソコンに合わせるとスマホで見た時にはみ出してしまったり。

その問題を解消する(レスポンシブにする)には、下記のコードをCSSに追加します。

@media screen and (max-width: 768px) and (min-width: 480px) {
iframe .twitter-timeline-rendered{
width: 490px !important;
}
}

@media screen and (max-width: 480px) {
iframe.twitter-timeline-rendered {
width: 450px !important;
margin:0 auto;
}
}

.timeline-Widget {
max-width: 300px!important;
width:200px !important; }

 

CSSの追記の仕方はテーマによって異なると思いますが、The ThorやJINであれば

WordPressダッシュボード

外観

カスタマイズ

追加CSS

のところにコピペして「公開」をクリックすればOKです。

 

「追加CSS」のところに既にコードが入っている場合は、1番上or1番下の行にペーストすれば大丈夫です。

 

さいごに

ワードプレスのサイドバーにTwitterを表示させるのはプラグインを使わなくても簡単にできましたね。

 

手順は

  1. Twitterにログインしておく
  2. Twitter publishでコードを取得
  3. コードをWordPressのウィジェットに貼り付け

です!

 

WordPressに導入するプラグインは1つでも少ないに越したことはないので、この方法で設定するのはとてもオススメです!

関連記事

こちらの記事では、YouTubeのチャンネル登録ボタンをWordPressのサイドバーに埋め込む方法を紹介いたします! 特化型ブログを運営していたり情報発信していると、YouTubeで動画を配信する機会もあ[…]

YouTube
 
\この記事のURLとタイトルをコピーする/