WordPressの使い方

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

会社辞めたい人におすすめなネットビジネス(資産型ブログ)で起業した元OL美紀のメルマガ講座

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

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

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

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

プラグイン同士が干渉し合って起こる不具合もある。

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

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

下準備として

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

 

WordPressの画面で設定をする以外に

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」をクリック

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

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

「Height」に好きな数値を入力。

この数値はサイドバーに表示させる時の高さですが、おすすめの数値は600〜800ぐらいです。

私はあまり長いとバランスが良くないように思えたので600にしていますが、色々試してお好みの数値を入力してください。

 

「Update」をクリック

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

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

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

 

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

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

ワードプレスに貼り付け

WordPressのダッシュボードの「外観」をポイント
 ↓
「ウィジェット」をクリック

 

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

 

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

WordPressのウィジェットは、左側にある項目のボックスを右側へ移動させることで「サイドバーに表示させる」と認識するためです。
逆にサイドバーから消したい項目があれば、右側にある項目を左へドラッグ&ドロップすることで表示させないようにできます。

 

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

 

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

 

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

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

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

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

「保存」をクリック

 

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

コメントを付けたい場合

もし、このような感じ↓にコメントを入れたい場合は…Twitterをワードプレスのサイドバーにプラグイン無しで表示させる方法

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

保存をクリック

 

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

さいごに

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

 

手順は

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

です!

 

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

【超簡単!】WordPressサイドバーにプロフィール&画像を設置する方法WordPressのブログのサイドバーにプロフィールの文章や画像を簡単に設定する方法を分かりやすく解説します。...
YouTube
【超かんたん】YouTubeチャンネル登録ボタンをWordPressサイドバーに埋め込む方法!YouTubeのチャンネル登録ボタンをWordPressのサイドバーに埋め込む方法を紹介します。...

 

無料メルマガでは、派遣OLだった私が自宅やカフェでゆったり働く今のライフスタイルを叶えた経緯をお話ししています。

月収40万円のブログを始めるためにまず私が何をしたかをまとめたオンラインコンテンツも無料でプレゼントしているので、ぜひ下記からメルマガに登録してみてください!


■読者限定コンテンツ「月収40万円のブログの始め方-HOW TO START A BLOG-」は第1通目でプレゼントしています。
■メルマガはメール内のリンクよりいつでも配信解除することができます。
■個人情報は厳重に管理し、プライバシーを遵守いたします。



POSTED COMMENT

  1. はぴこん より:

    美紀様

    Twitterを埋め込む方法を探していてこちらにたどりつきました。
    プラグインを使わずにできるのは嬉しいですね!
    本当にとても参考になりました。

    ありがとうございました^^

    また遊びにこさせて頂きます♪
    ありがとうございました。

    • 美紀 より:

      はぴこん様
      コメントありがとうございます!
      私もプラグインをなるべく使わずにワードプレスを運営していきたいと考えていますので、参考になったと言っていただけて嬉しいです。

      またのご訪問、お待ちしています♪
      こちらこそありがとうございました(*^^*)

  2. なお より:

    初めまして!3日前にブログをはじめた、なおです。
    動画での説明がとてもわかりやすかったです。
    ありがとうございました。

    • 美紀 より:

      なおさん

      動画が分かりやすいとのコメント、嬉しいです(^^)
      こちらこそありがとうございます!

      3日前にブログをはじめられたんですね。
      一緒にがんばっていきましょうね!

      今後もなおさんのお役に立てるように、価値のある情報を提供していきますので、またぜひ遊びにきてください!
      お待ちしています。

  3. 紙袋 より:

    分かりやすくて助かりました!
    他の記事も見させていただきます。
    ありがとうございました。

    • 美紀 より:

      紙袋さん

      コメントありがとうございます。
      分かりやすいと言っていただけて嬉しいです^^
      はい、また他の記事もご覧になってみてくださいね〜♪

  4. […] 基本的にはサイドバーにTwitter埋め込み用のスペースを作って、埋め込みコード生成用のサイトで大きさを設定して生成したコードを貼り付けるだけです。参考サイトはこちら(https://behappier-miki.com/twitter-sidebar)。 […]

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です