この記事ではWordpressにTwitterを埋め込む方法を解説する。
WordPressのコンテンツに埋め込むTwitterには、「個別ツイート」と「タイムライン」の２種類がある。どちらも簡単に埋め込みが可能なため、ぜひ参考にしてみてほしい。
目次
WordPressにTwitterを埋め込む３つの方法
さっそく、WordpressにTwitterを埋め込む方法を解説していこう。ここでは、記事内に個別のツイートを埋め込む方法を解説する。
コピー＆ペーストで埋め込む
最も簡単に設定する方法は、コピー＆ペーストだ。ここではブロックエディターでの場合を解説していこう。
まず、埋め込みたい個別ツイートのURLを以下よりコピーする。
そして、埋め込みたい記事のブロックにそのままペーストするだけでOKだ。
これだけで以下のようにツイートを埋め込むことができる。
ちなみに、この方法はクラシックエディターでも有効だ。
ツイートをまとめて埋め込むことはできない
クリップボードやメモ帳などを利用して埋め込みたいツイートを複数メモし、それらをコピペしてまとめて埋め込むことはできないので注意が必要だ。その方法だと複数のURLがテキストとして認識されてツイートとして読み込まれないためだ。
コピペで複数ツイートを埋め込む場合は一つずつコピペして埋め込もう。
ブロックエディターの埋め込み機能使う
続いて、個別ツイートの埋め込み方法を解説していこう。
まず、記事の編集画面から、Twitterの埋め込みブロックを呼び出す。
すると編集画面に以下のようなブロックが現れる。ここに、個別ツイートのURLをコピペする。
ちなみに個別ツイートのURLは以下の箇所で取得可能だ。
「埋め込み」を押すと埋め込み完了となる。
Twitter Publishを使う
Twitter PublishはTwitterの公式サービスである。このサービスと利用すると埋め込み用のHTMLコードを取得できる。
まずは埋め込みたいツイートの右上の「…」をクリックする。
現れた項目の中から「ツイートを埋め込む」を選択する。
すると自動的にTwitter Publishのサイトに飛び、コードが表示される。表示されたコードをコピーする。
WordPressの編集画面に戻る。ブロックから「カスタムHTML」を選択する。
「HTMLを入力」の画面内にコピーしたコードを貼り付ける。
そのままだと入力画面が表示されたままになるため、上部の「プレビュー」をクリックする。
するとこのように、実際のビジュアルに更新される。
このように、Twitter Publishを利用する場合はブロックエディターで直接入力するよりも手間がかかる。ブロックエディターを使っている人は、埋め込みブロックを利用する方がいいだろう。
Twitter Publishを利用する利点としては、HTMLコードを取得できる点だ。ブロックエディターでなく以前のクラシックエディターを使っていたり、HTMLでしか表示できないウィジェットに埋め込む場合には便利だ。
WordPressにタイムラインを埋め込む方法
次は、Wordpressのサイドバーウィジェットなどに自分のTwitterのタイムラインを表示させる方法を解説しよう。
まずは、自分のTwitterのURLをコピーする。
「Twitter Publish」のトップページにアクセスし、TwitterのURLを貼り付けEnterを押す
すると、以下が表示される。タイムラインを表示させる場合は、Embedded Timelineをクリックする。
以下のように埋め込み用のコードが表示されるので、コードをコピーする。
WordPressの編集画面に戻ろう。「外観」から「ウィジェット」を選択する。
ウィジェット編集画面に移る。一番下の「+」から、「カスタムHTML」を選択する。
あとは記事の編集画面と同じだ。HTMLを入力ボックスにペーストしてプレビューを押す。
すると、ウィジェットにTwitterが埋め込まれている様子が表示される。
実際には以下の通りに表示された。
Twitterの埋め込みに失敗した場合の解決策
ここでは、Twitterの埋め込みがうまくいかなかった場合の解決策を紹介していく。
ツイートの埋め込みができない場合
URLやコードを正確にコピペしているにも関わらずツイートの埋め込みに失敗した場合、以下の3つの理由が考えられる
- Javascript設定がオフになっている
- プラグインが干渉している
- Twitterアカウントが非公開になっている
Javascript設定がオフになっている
埋め込んだツイートが表示されずに引用した文章のような形になってしまう場合は、利用しているブラウザの設定によるものの可能性が高い。
解決策としては、ブラウザのJavascript設定をオンにすることだ。
Google Chromeの場合は以下の通りに設定が可能となる。
- Google Chromeの右上のメニューアイコンから「設定」をクリック
- 「プライバシーとセキュリティ」から「サイトの設定」をクリック
- 「Javascript」項目で「サイトがJavascript を使用できるようにする」を有効にする
Javascript設定が原因だった場合はこれで解決できる。
プラグインが干渉している
使っているプラグインによっては通常の機能に干渉してしまうこともある。この場合は一つずつプラグインを停止し、解決するかどうか確認してみよう。埋め込みを妨げるプラグインを特定することで解決できる可能性がある。
Twitterアカウントが非公開になっている
それでもツイートが表示されない場合は、もしかしたらTwitterアカウントが非公開になっているのかもしれない。引用したいTwitterアカウントが非公開設定になっていないか確認してみよう。
自分のツイートを引用したい場合は公開設定にすることで埋め込むことができる。
埋め込んだツイートが表示されなくなった場合
埋め込んでいたツイートが急に表示されなくなってしまった場合は、以下の理由が考えられる。
- ツイートが削除された
- アカウントが非公開に変わった
この場合はいずれも、ツイートをしたアカウントの管理側の問題なので、こちらでは解決できない。
まとめ
以上、この記事ではTwitterをWordpressに埋め込む方法を解説してきた。
埋め込みの方法としては、以下の３種類がある。
- コピー＆ペーストで埋め込む
- ブロックエディターの埋め込み機能使う
- Twitter Publishを使う
WordPressにツイートを埋め込むのは非常に簡単だ。
Twitter Publish のほうも、HTMLコードの貼り付け方法を覚えてしまえば様々なシーンで活用できるため、ぜひ一度使ってみよう。
