今回はTHE THOR(ザ・トール)でTwitterのツイートやタイムラインを埋め込む方法を解説していきます。
Twitterのツイートやタイムラインを埋め込む方法は、THE THOR(ザ・トール)に限らず他のテーマでも同じなので是非覚えておきましょう!
ブログにツイートを埋め込む方法
ブログにTwitterのツイートを埋め込む方法は2通りあります。
どちらの方法でも表示されるのは同じなので、お好きな方を選んでくださいね。
Twitterにアクセスする
まずはブログにツイートを埋め込むためにTwitterにアクセスしてください。
今回は私が適当に作ったアカウントを例に取って説明していきます。
埋め込みたいツイートを選んでツイートの右上にある3点マークをクリックしてください。
メニューが展開されますので、その中の【</>ツイートを埋め込む】をクリックしてください。
クリックすると別タブでTwitterPublishというサイトが開いて、埋め込み用のURLとコードが表示されます。
これはどちらを使用しても大丈夫です。
次は【埋め込み用URL】の貼り方と【埋め込み用コード】の貼り方を解説します。
ツイートの【埋め込み用URL】を張り付ける
埋め込み用のURLはTwitterPublishの上部に表示されていますので、これをコピーしましょう。
埋め込み用URLをコピーしたら、記事の本文などの埋め込みたい箇所にそのまま張り付けるだけで完了です。
ブログ記事用のツイートです!
— 須藤毅 (@takeshi_sudooo) January 16, 2021
URLを張り付けるとURLの文字列が自動的にツイートに変換されて表示されます。
ツイートの【埋め込み用コード】を張り付ける
次は埋め込み用コードで張り付ける方法を解説します。
コードの場合はURLと少々やり方が違うので注意してくださいね。
埋め込み用コードはTwitterPublishの下部に表示されていますので、【Copy Code】をクリックしてコピーします。
次は投稿編集画面でテキストエディタを開いて埋め込みたい箇所に張り付けてください。
プレビュー画面でツイートが正常に表示されているのが確認できたら完了です。
ブログ記事用のツイートです!
— 須藤毅 (@takeshi_sudooo) January 16, 2021
タイムラインを埋め込む方法
次はTwitterのタイムラインを埋め込む方法を解説します。
タイムラインの場合は、自分のアカウントしか表示することが出来ないので注意してください。
まずはご自身のアカウントでTwitterにログインします。
左側にあるメニューの中からプロフィールをクリックしてください。
プロフィール画面のURLをコピーしてください。
次にTwitterPublishにアクセスします。
⇒TwitterPublish
赤枠内に先ほどコピーしたURLを張り付けて矢印ボタンかエンターキーを押してください。
少し下の方にオプションを選択する箇所があるので、左側の【Embedded Timeline】をクリックしてください。
オプションをクリックすると、その下に【set customization options.】と書かれたリンクをクリックしてください。
ブログに表示させるタイムラインのサイズ・背景の明暗・言語を指定します。
下にプレビューが表示されているので、これを参考にしてみてくださいね。
問題なければ【Update】をクリックしましょう。
埋め込み用コードが表示されるので、【Copy Code】をクリックしてコピーしてください。
あとは任意の箇所にコードを張り付けて完了です。
ブロックエディタ(グーテンベルク)を利用した場合
これまではClassicエディタを利用していた場合の解説でしたが、ブロックエディタを利用した場合はSNS埋め込み用のブロックが用意されています。
この埋め込み用ブロックを使用は、ツイートやタイムラインのURLを入力するだけで表示されるので簡単といえば簡単ですが、高さや幅などの指定が出来ない(CSSで指定したら出来ると思いますが)のが難点ですね。
なので、TwitterPublishを利用した埋め込みコードを活かしたい場合は、【カスタムHTML】ブロックを使ってみてください。
サイドバーやフッターエリアで表示する方法
次はサイドバーやフッターエリアなどにTwitterのツイートやタイムラインを埋め込む方法を解説します。
サイドバーやフッターエリアに埋め込む場合は、URLではなく【埋め込みコード】を利用しますので、まずは前述で解説したツイートやタイムラインの埋め込みコードを取得してください。
次はWordPressのメニュー【外観】⇒【ウィジェット】をクリックしてウィジェットメニューを出します。
左側にある【テキスト】ウィジェットをサイドバーやフッターエリアなどの任意のエリアに追加しましょう。
今回はサイトバーエリアに追加します。
- テキストタブをクリックします。
- コピーした埋め込み用コードを張り付けます。
- 保存ボタンをクリックします。
THE THOR(ザ・トール)でTwitterのツイートやタイムラインを埋め込む方法のまとめ
今回はTHE THOR(ザ・トール)…というかWordPressにTwitterのツイートやタイムラインを埋め込む方法を解説しました。
基本的には他のテーマでもやる事はあまり変わらないので、覚えておけばお役に立てると思います。