WordPress記事投稿

WordPressのブログやサイドバーにTwitterのタイムラインやツイートを埋め込む方法

WordPressのブログやサイドバーにTwitterのタイムラインやツイートを埋め込む方法 WordPress記事投稿

こんにちは。

川口のWEB屋テダスクのSeitoです!

今回はWordPressのブログやサイトにTwitterのタイムラインを埋め込む方法をご説明します。

Twitterのタイムラインを埋め込むのにプラグインなどは不要です。

Twitterのサイトと行き来するので少し手間が掛かりますが一度覚えてしまえば簡単ですので、この記事を見てチャレンジしてみてください。

Twitterのタイムライン(窓)を埋め込むのか特定のツイートを埋め込むか

先ず、Twitterで埋め込む時、タイムラインを埋め込むのか特定のツイートを埋め込むかで作業が変わります。

タイムラインというのは、このサイトでもサイドバーに表示されている最新のツイートが流れるTwitterの窓のようなものです。

↓こんな感じのものです。

WordPressのブログやサイドバーにTwitterのタイムラインやツイートを埋め込む方法

 

特定のツイートの場合は、スクリーンショットみたいにツイートだけを表示するものです。

↓これは実際にツイートを貼っています。

ちなみに、元のツイートを削除された場合はどうなるかというと、リンク先(Twitterの公式サイト)では「このツイートは表示出来ません」となりますが、WordPressの記事上ではそのまま残って表示されます

スクリーンショットだと画像をアップロードして一応リンク元を貼るなどもする必要があるので、このやり方の方が楽ですね。

Twitterタイムラインの埋め込み方

それではTwitterタイムラインの埋め込み方を説明していきます。

まず、埋め込みたいタイムラインの人のプロフィールページに移動します。

WordPressのブログやサイドバーにTwitterのタイムラインやツイートを埋め込む方法

移動したら、赤枠の部分のアドレスをコピーします。

コピーしたら、次にTwitter publishのサイトに移動します。

Twitter Publish

WordPressのブログやサイドバーにTwitterのタイムラインやツイートを埋め込む方法

入力欄に、先程コピーしたアドレスを貼り付けて、エンターもしくは入力欄右側の矢印をクリックします。

WordPressのブログやサイドバーにTwitterのタイムラインやツイートを埋め込む方法

下にスクロールしたら、「Embedded Timeline」をクリックします。

WordPressのブログやサイドバーにTwitterのタイムラインやツイートを埋め込む方法

そうすると、問題なければタイムラインが表示されます。

ただ、この状態だと物凄く長いタイムラインが表示されてしまうので、表示する高さをオプションから設定します。

set customization options.」をクリックします。

WordPressのブログやサイドバーにTwitterのタイムラインやツイートを埋め込む方法

そうすると、入力項目が表示されます。

左が高さで、右側が幅です。

入力するとリアルタイムで高さと幅が確認できるので、見ながら調整してみましょう。

サイズが決まったら「Update」をクリックして設定を一度完了します。

WordPressのブログやサイドバーにTwitterのタイムラインやツイートを埋め込む方法

オプション設定の画面が閉じたら、今度は「Copy Code」をクリックします。

WordPressのブログやサイドバーにTwitterのタイムラインやツイートを埋め込む方法

このコピーしたものが埋め込み用のコードになります。

もし、今後も別のサイトなどに貼る予定がある場合は、コードだけどこかに保存しておくと良いかもしれません。

サイドバーにTwitterタイムラインの埋め込み

それでは、WordPressに戻って埋め込みを行います。

今回はサイドバーにタイムラインを埋め込むやり方を説明します

「外観」→「ウィジェット」に移動します。

 

「カスタムHTML」ウィジェットを選んでサイドバーなど適宜有効にします。

WordPressのブログやサイドバーにTwitterのタイムラインやツイートを埋め込む方法

WordPressのブログやサイドバーにTwitterのタイムラインやツイートを埋め込む方法

カスタムHTMLのウィジェットを開いて、先程コピーしたコードを貼り付けます。

貼り付けが完了したら、「保存」をクリックします。

保存をしたら、サイドバーに表示されているか確認してみましょう。

これでサイドバーにTwitterのタイムラインを埋め込みが完了です。

今回はサイドバーに埋め込む方法を書いてきましたが、もし固定ページなどの記事に埋め込む場合はエディタのタブをビジュアルタブから、テキストタブに切り替えることで、HTMLのもーどになるので、その状態で貼り付けを行ってください。

貼り付けた後に、ビジュアルタブに戻すとエディタ上でもタイムラインが表示されているはずです。

特定のツイートの埋め込み方

特定のツイートを埋め込む場合はタイムラインの埋め込みに比べて非常に簡単です。

先にやり方を言ってしまうと、ツイートのアドレスをコピーして、記事にそのアドレス貼り付けるだけです。

それでは順を追ってやっていきます。

WordPressのブログやサイドバーにTwitterのタイムラインやツイートを埋め込む方法

例えば私のこんなツイートを埋め込みたいとします。

このとき自分のタイムラインに流れていくる時のページではなく、特定のツイートのページを見ていることを確認して下さい。

そうしたら、アドレスをコピーします。

次に、WordPressに戻って、例えば投稿記事に埋め込みたいとします。

WordPressのブログやサイドバーにTwitterのタイムラインやツイートを埋め込む方法

そうしたら、先程のタイムラインとは異なり、エディタが「ビジュアル」になっている事を確認して、アドレスをそのままコピーします。

すると、数秒後に画像のように勝手に埋め込みが完了します。

プレビューを見てもちゃんと表示されていることが確認できます。

WordPressのブログやサイドバーにTwitterのタイムラインやツイートを埋め込む方法

こんな感じでとても簡単に埋め込むことができます。

まとめ

今回はTwitterのタイムラインの埋め込みと、特定のツイートを埋め込むやり方をお伝えしました。

今回WordPressのバージョンは5.7.2で行いましたが、もし再現しない場合はWordPressのバージョンやお使いのテーマが原因の場合もありますので、お困りの際はテダスクのレクチャーサービスにてご相談下さい。

以上、「WordPressのブログやサイドバーにTwitterのタイムラインやツイートを埋め込む方法」でした!

 

WordPressマンツーマンレクチャーサービス
WordPressで書きたいブログが決まり、さてブログを立ち上げようと意気込んだのは良いけど、WordPressは意外と立ち上げから全ての設定を終わらせるまでのプロセスが初心者には難しく感じ、中には挫折してしまった方も少なくないと思います。...

 

 

この記事を書いた人
Toshi Seito

TEDASK代表
WordPressに関する相談実績のべ300件以上、タイムチケットのWEB部門4年連続販売数1位!
WordPressのカスタマイズからWEBアプリ制作、ホームページ制作までWEBの事ならなんでもお気軽にご相談下さい。
》相談する

Toshi Seitoをフォローする

いいね!をしてWordPressの
お役立ち情報を受け取る!

WordPress専門ホームページ制作事務所

コメント

タイトルとURLをコピーしました