ホームページの作成・作り方

【簡単2ステップ】WordPressのサイドバーにツイッターを埋め込む【図解で説明】

【簡単2ステップ】Wordpressのサイドバーにツイッターを埋め込む【図解で説明】

この記事では、Wordpressのサイドバーにツイッターを埋め込む方法を図入りで解説しています。

とても簡単なので、ぜひ参考に実装してみてください。

WordPressと他SNSの連携は、だいたいプラグインがあればなんとかなる印象です。
しかしツイッターに関しては、プラグインすらも不要…!

簡単な2ステップであっという間にタイムラインの表示が可能です。
図解していきますので、一緒に見ながらやっていきましょう。

STEP1:ツイッター側の準備

まずはツイッター側から準備していきましょう。
基本的に、必要なものはたった1つです。

  • 自分のツイッターのURL

これさえあれば問題ありません。

埋め込みコードはツイッターが用意してくれる

自分のツイッターのURLがわかったら、次はこちらにアクセス。

https://publish.twitter.com/#

これでツイッター側で埋め込み用のコードを用意してくれます。

多くの操作は必要ないですが、簡単に解説していきます。

①自身のツイッターのURLを張り付ける

②どっちの表示か選ぶ

これは「Emebedded Timeline」を選びましょう。

③コードをコピーすればOK

これで埋め込み用のコードが表示されるので、コピーすればOKです。
非常に簡単ですね。

余談ですが、このままだと、かなり長いタイムラインが表示されてしまいますので、簡単なカスタマイズ方法もお伝えします。

ツイッターの埋め込みを簡単にカスタマイズ

ここの「set customization Options」をクリックすると簡単なカスタマイズ画面が出てきます。

カスタマイズできるもの

  1. 表示する高さ(px)
  2. 表示する幅(px)
  3. 表示する見た目(lightテーマかDarkテーマか)
  4. リンクの色
  5. 言語

サイドバーに埋め込むのであれば、表示する高さを少し制限してあげた方がいいでしょう。
理由は、制限がないとタイムラインが読み込める分だけ読み込んでしまい、縦に長くなってしまうからです。
500pxくらいにしておくと、写真付き1ツイートか、文字だけ2ツイートくらいが表示されるので、ちょうどいいです。

STEP②:Wordpressのサイドバーに張り付け

ツイッターの埋め込みコードをコピーできたら、今度はWordpressに張り付けていきましょう。

ログインしたら、以下のように移動します。

外観 > ウィジェット

ウィジェットに移動したら、カスタムHTMLでサイドバーを編集

ウィジェットに移動できましたか?

移動できたら、利用できるウィジェット一覧に「カスタムHTML」があるので、そちらをドラッグ&ドロップ。
好きなところに表示させましょう。

カスタムHTMLを開くと、コードを入力する画面になるので、そちらに先ほどコピーしたツイッターの埋め込みコードを張り付けましょう。
タイトルは何でもいいです。今は簡易的に「ツイッター」とでもしましょうか。

あとは「保存」→「完了」でOKです。

ちゃんとできているか、確認してみましょう。

割と簡単にできるので、ツイッターを使っているなら連携してみよう

コードを張り付けるだけなので、Wordpressはもちろん、それ以外のサイトでも簡単にできます。
ツイッターを使っているなら、ぜひ埋め込んでみましょう。