WordPressにTwitterのツイートとTLを埋め込む方法

WordPress内にTwitter上の誰かのツイートを貼り付けて情報をまとめる。自分のアカウントのタイムラインをワードプレスのサイドバー等に埋め込んで読者を誘導する…これらの操作はプラグインを使わず簡単に行えます

本記事では、このTwitterをワードプレス内に埋め込む方法をいくつかまとめています。まずは手順から先にご覧ください。

WordPress内にツイートを埋め込む ①ツイート右下のメニューを選択
②ツイートを埋め込むをクリック
③埋め込みコードをコピー
④テキストエディタでペースト
WordPress内にタイムラインを埋め込む ①Twitter Publishを開く
②アカウントURLを入力
③サイズ等をカスタマイズ
④埋め込みコードをコピー
⑤ウィジェット設定を開く
⑥テキストウィジェットに埋め込みコードを貼り付け

WordPressの記事内にTwitterを埋め込む方法

まず最初にワードプレスの単一記事内にツイートを埋め込む手順をお伝えします。

ツイート右上のメニューからツイートを埋め込むを選択

Twitterでブログに張り付けたいツイートを見つけたら、ツイート右上のメニューをクリックします。

メニューを開いたら「ツイートを埋め込む」を選択しましょう。

埋め込みリンクをコピーする

ページが切り替わったら少し下にスクロールすると、htmlコードが現れます。

「Copy Code」と書かれたボタンを押してコードをコピーしてください。

テキストエディタに切り替えてコードを貼り付け

ワードプレスの記事作成画面に戻ったらビジュアルエディタからテキストエディタに切り替えて、先ほどコピーした埋め込みコードをペーストしてください。

ビジュアルエディタに戻すと上記のような状態で表示されていますが、プレビュー画面で記事を確認してみると正常に埋め込まれているので安心してください。

続いては、アカウントのタイムライン自体をワードプレス内に埋め込む方法を解説します。

自分のアカウントのタイムラインを埋め込む

ブログ内で自分のTwitterアカウントを埋め込んでおけば、あなたに興味を持ってくれたユーザーを誘導できるかもしれません。

ここでは、ワードプレスのサイドバーにTwitterのタイムラインを埋め込む手順を解説します。

タイムラインのソースコードを取得する

まずは、ツイート埋め込みでも登場した「Twitter Publish」にアクセス。

twitter publishからタイムライン埋め込みコードを取得

Twitter Publishを開いたら入力欄が現れるので、そちらに自分のTwitterアカウントURL(https//:twitter.com/ユーザーid)をペーストしてください。

here are your display optionsと表示されたら、左の「Embedded Timeline」を選択。

これでソースコードを取得できるのですが、デフォルトの状態だとタイムラインが長すぎてワードプレスの表示が崩れるケースがあるため、続けてカスタマイズを行います。

カスタマイズからタイムラインの長さを変更する

埋め込みコードの上部の「set customization options」をクリック。

続けてHeight(px)を設定。300~400くらいの範囲で入力するのがベターです。

こちらのカスタマイズで設定する項目はこのHeightだけで問題ありませんが、念のため全て説明しておくと…

Height 高さ
Width 横幅
How would you like this to look? 通常表示 or ダークモード
What language would you like to display this in? 言語

こんな感じですね。一番下の言語に関してはAutomaticから変更する必要はありません。

カスタマイズが完了したら「Update」をクリックしてください。

埋め込みコードが表示されたらcopy codeをクリック

ソースコードが表示されるので「Copy Code」をクリックしてコピーしましょう。

これで埋め込みコードの取得は完了ですね。続いては、実際にワードプレスに埋め込む手順を解説します。

ウィジェットにコードを挿入しよう

タイムラインをサイドバーに埋め込みたい方が大多数かと思います。

まずは、外観⇒ウィジェットの順に操作してください。

外観⇒ウィジェットの順で操作する

ウィジェットの設定ページを開くと「サイドバー」と記載された項目があるので、そちらにタイムラインを追加していきます。

サイドバーにテキストウィジェットを追加

このサイドバーの中にテキストウィジェットを追加します。

テーマによってはTwitter用ウィジェットなども用意されているかもしれません。

テキストウィジェットに埋め込みコードを挿入する

テキストウィジェットを追加したらビジュアルエディタからテキストエディタに切り替えます。

続いて、先ほどコピーした埋め込みコードを貼り付け。最後に保存をクリックして完了です。

WordPressにTwitterを埋め込む手順まとめ

記事内にTwitterのツイートを埋め込む方法は非常に簡単なので、情報をまとめたり、誰かの意見を引用したい場合は上記の手順を参考にしてみてください。

また、タイムラインの埋め込みに関しては、お使いのテーマによって若干操作が異なりますが、基本的な流れはほぼ同じかと思います。

タイムラインの高さを調節しながら自分自身のアカウントを埋め込んでみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です