WordPress

WordPressにTwitterを表示するには?【記事内・ウィジェット】

更新日:

WordPressにTwitterを表示する方法

今回は、WordPressへTwitterのツイートを埋め込む方法から、サイドバーやフッターなどのウィジェット内にタイムライン・フォローボタンを表示する方法まで、まとめて解説します。

YUU
Webの知識がなくても、簡単に設置できますよ!

 

TwitterのツイートをWordPressの記事内に埋め込む方法

まずは記事内へのツイート埋め込み方法からです。

↑これですね。(雨と寒いの苦手)

 

1.Twitterで埋め込みたいツイートのURLを取得

まずは埋め込みたいツイートのURLを取得します

ホームでもマイページでもどこでもいいので、埋め込みたいツイートをクリック。

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

するとポップアップ(ツイートが浮き上がる)表示になり、アドレスバーにツイートのURLが表示されますので、コピーします

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

これで、ツイートのURL取得は完了です。

 

2.記事内にツイートを埋め込む

つづいて、記事内に埋め込む方法です。

記事編集画面で、先ほどのコピーしたURLを貼り付けるだけです。

ビジュアルエディタになっていれば、貼り付けてすぐに表示されます。テキストエディタの場合は、プレビュー又はビジュアルエディタに戻って確認してくださいね。

これで記事内にツイートが埋め込まれましたね!とっても簡単です。

 

WordPressにTwitterのタイムラインを表示する方法

つづいて、Twitterのタイムラインを表示する方法です。

こちらは記事内にツイートを埋め込む方法に比べるとやや手間ですが、それでも親切な設計になっていますので是非挑戦しましょう。

 

1.Twitterで自分のURLを取得

今度は記事ではなく自分のURL(マイページ)を取得します。

URLを確認するために、マイページを開きます。

ホーム画面にいたら、自分の名前をクリックすればマイページにいくので、クリックしてください。

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

マイページで表示されているURLが自分のURLです。

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

マイページのURLをコピーします

 

2.Twitterタイムラインの設定

次に埋め込みタイムラインの設定ですが、publish.twitter.com というサイトで設定をします。

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

上記はTwitter内で表示されるメッセージです。Twitterのサブドメインですので怪しいサイトではないです。

設定とプライバシー → ウィジェット から確認できます。

 

publish.twitter.com を開きます。

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

開くと、↑の画面がでますので、先ほどコピーしたマイページのURLを貼り付けて、Enterキーもしくは画面上の「→」を押します。

すると、

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

↑の表示オプションを選択する画面がでてきますので、「埋め込みタイムライン」をクリックします。

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

↑これで、タイムライン埋め込み用のURLが発行されました。簡単ですね!

ちなみに「カスタマイズオプションを設定する」を押すと、表示の詳細設定ができます。

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

細かく設定しなくて良いですが、Height(高さ)は設定した方が良いと思います。何も設定しないと、無駄に長くなりますので。

ちなみに当サイトでは500(px)に設定しています!

 

埋め込みタイムラインの高さを後から変更したい場合

埋め込んでみてから、やっぱり高さを変えたい!となった時に、再度コードを発行しなおすのは手間ですよね。

その場合は上記のように、すでに貼り付けてあるコードに「data-height="500"」(500の個所は任意の数字)を足してあげれば簡単に変更できますよ。(前後に半角スペースを忘れずに)

 

3.WordPressにコードを貼り付ける

埋め込み用のコードを発行し終わったら、あとはWordPressの好きな場所に貼り付けるだけです。

ウィジェットでサイドバーやフッターに貼り付ければ、タイムラインが表示されるようになります。

「テキスト」で貼り付ける際は、ビジュアルエディタではなくテキストエディタにタブ切り替えをしてから貼り付けてくださいね。

 

Twitterのフォローボタンを設置する

次に、Twitterのフォローボタンの設置方法です。

 

1.Twitterで自分のURLを取得し、フォローボタンの設定をする

WordPressにTwitterのタイムラインを表示する方法(ページが少し戻ります)

の「1.Twitterで自分のURLを取得」の手順を踏み、

「2.」の設定画面でURLを入力したあと、「Twitterボタン」を選択します。

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

クリックすると、次のような画面がでますので、お好きなボタンを選択してください。

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

今回は「フォローボタン」を選択しました。

あとは、必要に応じてカスタマイズを行えばコードの発行完了です。

 

2.WordPress内の任意の場所にコードを貼り付け

タイムラインを表示する場合と同じく、WordPress内のお好きな場所にコードを貼り付ければ完了です!

Twitterフォローボタン

このように表示されたでしょうか?

 

まとめ

今回はWordPressにTwitterのツイートを埋め込む方法から、タイムライン・フォローボタンを表示する方法までご紹介しましたが、無事に設定できたでしょうか?

まだ設置していない方も、とても簡単に設置できるので是非やってみてくださいね!

 

-WordPress
-,

Copyright© Webjo blog , 2020 All Rights Reserved.