「WordPressブログ記事内にTwitterを表示させたい」
「WordPressブログのサイドバーにTwitterのタイムラインを表示させたい」
「エディタが変わってTwitterをどう貼り付けるか分からない」
本記事では、ブログの記事内にこのようなTwitterを表示させたり、
私がブログの外注化を始めたのは、
— pina｜妊娠・出産・育児中でも外注化ブログで月20万円稼ぐ人 (@pina_cylife) February 8, 2021
「生活の変化」と「収入」を無関係にするため😊
極端な例(実話)ですが…
自分は陣痛と戦っていても
外注化で記事が更新されて
「いつも通り」の収入が手に入る💰
トレンドブログで稼ぐ
↓
外注化の仕組み作り
↓
自分の時間を別に使う
の流れが本当にオススメ✨
サイドバーにTwitterのタイムラインを載せる方法を図で解説しています。
また、投稿時のエディタによっても、Twitterを埋め込む方法が異なります。
- 新エディタ『Gutenberg（グーテンベルク）』での手順
- 旧エディタ『クラシックエディタ』での手順
それぞれに分けて紹介しています。
【新エディタ】WordPressブログ記事内にTwitterを埋め込む方法
WordPressの新エディタ『Gutenberg（グーテンベルク）』で記事内にTwitterを埋め込む方法を２つ紹介します。
pina2018年以降にWordPressを始めた方は新エディタです。
方法① 「カスタムHTML」にコードを埋め込む
１つ目は「カスタムHTML」にTwitterのコードを埋め込む方法です。
貼り付けたいTweetを開き、右上の「…」をクリックします。
「ツイートを埋め込む（Embed Tweet）」をクリックします。
画面が変わるので「コードをコピー（Copy Code）」をクリックします。
続いて、WordPressの投稿画面に移動しましょう。
WordPressの投稿画面に移動し、「+」マークから「フォーマット＞カスタムHTML」をクリックします。
先ほどコピーしたTwitterのコードを貼り付けます。
表示されるか不安な人は、左上の「プレビュー」をクリックします。
これでWordPressブログ記事内にTwitterが埋め込まれました！
方法② 「Twitter」にURLを貼り付ける
２つ目は投稿画面の「Twitter」に直接URLを貼り付ける方法です。
Twitterから、埋め込みたいTweetのURLをコピーします。
続いて、WordPressの投稿画面に移動しましょう。
WordPressの投稿画面に移動し、「+」マークから「埋め込み＞Twitter」をクリックします。
コピーしたTweetのURLを貼り付けます。
これでWordPressブログ記事内にTwitterが埋め込まれました！
「TwitterのURLを貼り付ける」方法が遥かに簡単ですね！
オススメの方法は「カスタムHTML」
簡単なのは「方法② URLを貼り付け」という方法ですが、オススメは「手順① カスタムHTML」です。
元のTweetが削除された時、
「URLを貼り付け」では記事内にURLだけが残るので、読者には何のことか分かりません。
「カスタムHTML」の場合だと、元のTweetが削除されても引用としてTweetの内容が残ります。
読者にとっては、こちらの方が親切ですよね。
【旧エディタ】WordPressブログ記事内にTwitterを埋め込む方法
WordPressの旧エディタ『Classic Editor (クラシックエディタ) 』で記事内にTwitterを埋め込む方法を２つ紹介します。
方法① 「テキスト」にコードを埋め込む
１つ目は投稿画面の「テキスト」にTwitterのコードを埋め込む方法です。
Twitterのコードを取得する流れは、新エディタの「カスタムHTML」と全く同じです。
貼り付けたいTweetを開き、右上の「…」をクリックします。
「ツイートを埋め込む（Embed Tweet）」をクリックします。
画面が変わるので「コードをコピー（Copy Code）」をクリックします。
続いて、WordPressの投稿画面に移動しましょう。
旧エディタ（クラシックエディタ）の投稿画面を「テキスト」モードにし、取得したTweetのコードを貼り付けます。
Twitterが正しく埋め込まれているかを「ビジュアル」モードで確認します。
ブログ記事内に貼り付けたいTweet内容が「引用」されていれば、正しく埋め込まれています。
方法② 「ビジュアル」にURLを貼り付ける
２つ目は投稿画面の「ビジュアル」に直接URLを貼り付ける方法です。
TwitterのURLをコピーする流れは、新エディタの「URLを貼り付ける」と全く同じです。
Twitterから、埋め込みたいTweetのURLをコピーします。
続いて、WordPressの投稿画面に移動しましょう。
WordPressの投稿画面に移動し、「ビジュアル」モードの記事内にコピーしたTwitterのURLを貼り付けます。
「テキスト」モードとは違い、URLを貼り付けた瞬間に、表示させたいTwitterが出現します。
これで完了です！
旧エディタ（クラシックエディタ）でも、２つ目に紹介した「URL貼り付け」の方が遥かに簡単です。
しかし、オススメは１つ目の「テキストにコードを埋め込む」方法。
オススメの方法は「テキスト」にコード埋め込み
旧エディタに関しても、簡単なのは「方法② URLを貼り付け」という方法です。
しかし新エディタと同様、オススメは「手順① テキストにコード埋め込み」です。
元のTweetが削除された時、
「URLを貼り付け」では記事内にURLだけが残るので、読者には何のことか分かりません。
「テキストにコード埋め込み」の方法だと、元のTweetが削除されても引用としてTweetの内容が残ります。
読者にとっては、こちらの方が親切ですよね。
WordPressブログのサイドバーにタイムラインを埋め込む方法
このように、
ブログのサイドバーへTwitterタイムラインを埋め込む場合は、新エディタ・旧エディタとも同じ方法になります。
- タイムラインのコードを取得
- ウィジェットに貼り付ける
という手順で説明します。
Twitterタイムラインのコードを取得する
Twitterタイムラインのコード取得には「Twitter Publish」というサイトを使用します。
「Twitter Publish」にアクセスし、別のタブでTwitterを開いてください。
Twitterで埋め込みたいタイムライン（プロフィール画面）を開き、URLをコピーします。
「Twitter Publish」に移動し、コピーしたURLを貼り付けます。
画面が下がるので、左側「タイムライン」をクリックします。
タイムラインのコードをコピーする前に、表示サイズを「カスタマイズ」する必要があります。
「Set customization options」をクリックしましょう。
Twitterのタイムラインの表示サイズを決めます。
pina長〜いタイムラインが載ってしまうので「高さ」だけは決めましょう。
私は高さを「400px」にしています。
特にこだわりがなければ、高さ以外はデフォルトでOKです。
「Update」をクリックします。
Twitterのタイムラインのコードをコピーします。
続いて、WordPressのウィジェットへ移動します。
WordPressの「ウィジェット」に貼り付ける
取得したTwitterタイムラインのコードを「ウィジェット」に貼り付けます。
ウィジェットでは、
- サイドバー
- ヘッダー
- フッター
- トップページや固定ページの上部、下部
など、ブログの外側の外観（デザイン）設定ができます。
「外観」＞「ウィジェット」＞「テキスト」を選択します。
Twitterタイムラインをサイドバーに表示したいので、「共通サイドバー」を選択。
「ウィジェットを追加」をクリック。
ブログのテンプレートによっては、「サイドバー」と表示される場合もあります。
先ほど取得したTwitterタイムラインのコードを「テキスト」に貼り付けます。
コードを貼り付けたら「保存」をクリック。
これでブログにTwitterのタイムラインが表示されるようになりました。
以上が、WordPressブログ記事や、サイドバーにTwitterを埋め込む方法です。
慣れれば簡単なので、ぜひ試して見てくださいね！
