こんにちは。
川口のWEB屋テダスクのSeitoです！
今回はWordPressのブログやサイトにTwitterのタイムラインを埋め込む方法をご説明します。
Twitterのタイムラインを埋め込むのにプラグインなどは不要です。
Twitterのサイトと行き来するので少し手間が掛かりますが一度覚えてしまえば簡単ですので、この記事を見てチャレンジしてみてください。
Twitterのタイムライン（窓）を埋め込むのか特定のツイートを埋め込むか
先ず、Twitterで埋め込む時、タイムラインを埋め込むのか特定のツイートを埋め込むかで作業が変わります。
タイムラインというのは、このサイトでもサイドバーに表示されている最新のツイートが流れるTwitterの窓のようなものです。
↓こんな感じのものです。
特定のツイートの場合は、スクリーンショットみたいにツイートだけを表示するものです。
↓これは実際にツイートを貼っています。
ノンプログラマーの方で、見よう見まねでWordPressのテンプレートのfunctions.phpにカスタムフィールドの追加と投稿ページにしっかり表示までやっているのをみて、ここまでやれてしまうことに正直ビビった。
— Toshi Seito＠WordPressスピード解決屋さん (@TEDASK_Toshi) May 28, 2021
ちなみに、元のツイートを削除された場合はどうなるかというと、リンク先（Twitterの公式サイト）では「このツイートは表示出来ません」となりますが、WordPressの記事上ではそのまま残って表示されます。
スクリーンショットだと画像をアップロードして一応リンク元を貼るなどもする必要があるので、このやり方の方が楽ですね。
Twitterタイムラインの埋め込み方
それではTwitterタイムラインの埋め込み方を説明していきます。
まず、埋め込みたいタイムラインの人のプロフィールページに移動します。
移動したら、赤枠の部分のアドレスをコピーします。
コピーしたら、次にTwitter publishのサイトに移動します。
入力欄に、先程コピーしたアドレスを貼り付けて、エンターもしくは入力欄右側の矢印をクリックします。
下にスクロールしたら、「Embedded Timeline」をクリックします。
そうすると、問題なければタイムラインが表示されます。
ただ、この状態だと物凄く長いタイムラインが表示されてしまうので、表示する高さをオプションから設定します。
「set customization options.」をクリックします。
そうすると、入力項目が表示されます。
左が高さで、右側が幅です。
入力するとリアルタイムで高さと幅が確認できるので、見ながら調整してみましょう。
サイズが決まったら「Update」をクリックして設定を一度完了します。
オプション設定の画面が閉じたら、今度は「Copy Code」をクリックします。
このコピーしたものが埋め込み用のコードになります。
もし、今後も別のサイトなどに貼る予定がある場合は、コードだけどこかに保存しておくと良いかもしれません。
サイドバーにTwitterタイムラインの埋め込み
それでは、WordPressに戻って埋め込みを行います。
今回はサイドバーにタイムラインを埋め込むやり方を説明します
「外観」→「ウィジェット」に移動します。
「カスタムHTML」ウィジェットを選んでサイドバーなど適宜有効にします。
カスタムHTMLのウィジェットを開いて、先程コピーしたコードを貼り付けます。
貼り付けが完了したら、「保存」をクリックします。
保存をしたら、サイドバーに表示されているか確認してみましょう。
これでサイドバーにTwitterのタイムラインを埋め込みが完了です。
今回はサイドバーに埋め込む方法を書いてきましたが、もし固定ページなどの記事に埋め込む場合はエディタのタブをビジュアルタブから、テキストタブに切り替えることで、HTMLのもーどになるので、その状態で貼り付けを行ってください。
貼り付けた後に、ビジュアルタブに戻すとエディタ上でもタイムラインが表示されているはずです。
特定のツイートの埋め込み方
特定のツイートを埋め込む場合はタイムラインの埋め込みに比べて非常に簡単です。
先にやり方を言ってしまうと、ツイートのアドレスをコピーして、記事にそのアドレス貼り付けるだけです。
それでは順を追ってやっていきます。
例えば私のこんなツイートを埋め込みたいとします。
このとき自分のタイムラインに流れていくる時のページではなく、特定のツイートのページを見ていることを確認して下さい。
そうしたら、アドレスをコピーします。
次に、WordPressに戻って、例えば投稿記事に埋め込みたいとします。
そうしたら、先程のタイムラインとは異なり、エディタが「ビジュアル」になっている事を確認して、アドレスをそのままコピーします。
すると、数秒後に画像のように勝手に埋め込みが完了します。
プレビューを見てもちゃんと表示されていることが確認できます。
こんな感じでとても簡単に埋め込むことができます。
まとめ
今回はTwitterのタイムラインの埋め込みと、特定のツイートを埋め込むやり方をお伝えしました。
今回WordPressのバージョンは5.7.2で行いましたが、もし再現しない場合はWordPressのバージョンやお使いのテーマが原因の場合もありますので、お困りの際はテダスクのレクチャーサービスにてご相談下さい。
以上、「WordPressのブログやサイドバーにTwitterのタイムラインやツイートを埋め込む方法」でした！
コメント