WordPress

Twitterのタイムラインをワードプレスブログに表示させる方法【画像で解説】

WordPressにTwitterを表示させたいけど簡単に設置できる方法はないかな?

 

こんな疑問を解消します。

 

 

 

こんにちはスズトシです。

 

今回の記事は「ワードプレスで自分のツイートをブログに表示させる方法」をお伝えします。

 

今回はアフィンガーのテーマでの解説となりますがワードプレスでブログ作成しているのであれば手順は同じですのでトライしてみましょう!

 

ワードプレスでツイートを表示させる手順

ワードプレスでTwitterを表示させるには以下の手順で作業を進めます。

  • Twitter Publishにアクセス
  • Twitter Publishでコード取得とカスタマイズ
  • ワードプレスにコードを貼り付ける
  • スマホ表示の編集(レスポンシブ)

昔は専用のプラグインをインストールして表示させる方法が主流でしたがプラグインを多用すると、サイト表示速度も落ちてSEO的にも良くないのでこちらの手順でやりましょう。

 

Twitter Publishにアクセス

まず始めにTwitter Publishにアクセスしますが、現時点でtwitterにログインをしてくださいね。

 

アカウント確認手順

自分のtwitterアカウントを確認しましょう。

twitterにログイン後「プロフィール」をクリックするとURLが表示されますから、コピペして先ほどの画面に貼り付けます。

上のアカウントは、僕のURL表示となっていますが【https://twitter.com/〇〇〇〇」←〇の箇所が自分のアカウント表示になっているか確認してください。

これからtwitterアカウント作成するかたは始めにアカウントを作りましょう。

 

それでは準備はできましたか?

 

まずはTwitter Publishにアクセスします。

 

アクセスすると次に画像は表示されるので、先ほど確認した自分のtwitterアカウントを入力しましょう。

 

Twitter Publishにログイン

 

アカウントを入力すると「表示オプションは次の通りです」と表示されるので左側の「埋め込みタイムライン」を選択しましょう。

英語表記の場合

サイトが英語表記されている場合もありますが表示画像は同じなので間違いはないと思います。

  • 表示オプションは次の通りです⇒【Here are your display options】
  • 埋め込みタイムライン⇒【Embedderd Timeline】
使用しているパソコンのOSによって表記が違いますが問題はないですね!

Twitter Publishでコード取得とカスタマイズ

左側の【埋め込みタイムライン】をクリックすると以下の画像になります。

コードをコピーする前に「カスタマイズオプションを設定する」をクリックして表示してタイムラインの表示サイズを変更します。

 

変更しないとTwitterのタイムライン表示が永遠と縦に表示されてしますので、ここで設定をしましょう。

  1. タイムラインの高さ調整
  2. 見せ方の設定
  3. 言語の表示設定
  4. コードコピー

【カスタマイズオプション設定】をクリックをすると上記の画像が表示されますので①~③を編集します。

①タイムラインの高さ調整

高さの設定は600~800(px)あたりがオススメです。すぐ下で表示画面を確認で来ます。

*幅の設定はスマホ表示の関係上、最後にCSSで編集しますので無視してかまいません。

見せ方の設定

twitterデザインタイプの選択です。「光」「闇」のどちらかを選びますが基本「光」のままで良いと思います。

*英語表記だと「Light」or「Dark」を表記されてます。

言語の表示

日本語を選択しましょう。

他の言語表示で投稿をしてるのであれば、お好みで変更しましょう。

コードコピー

最後に「コードコピー」をすれば完了です。

Twitter Publishでも設定は以上となります。

次はウィジットで編集しましょう

 

ワードプレスにコピーしたコードを貼り付ける

コピーしたコードをワードプレスに貼り付けます。

ワードプレスのダッシュボードから(外観)⇒(ウィジット)を選択してみましょう。

利用できるウィジットから「テキスト」を表示させたい場所へ「ドラッグ&ドロップ」します。

 

「サイドバー」もしくは「フッターウィジット」あたりがいいですね。

 

ちなみに、僕のサイトはサイドバーよりもフッターに表示させていますので、ここではフッターにドロップして紹介します。

 

「テキスト」を表示するエリアにドロップできたら

①:テキストボタンを押します
②:Twitter Publishで取得したコードをペーストしましょう
③:保存を押して完了

これで希望する場所にtwitterのタイムラインが表示されるようになりました。

 

このままだとパソコンやスマホ・タブレットの表示サイズが調整されてないので最終調整をします。

 

twitter表示の編集(レスポンシブ)

表示のサイズ調整をCCSに追加してみましょう。

まず始めにダッシュボードに戻り(外観)⇒(カスタマイズ)⇒(追加CSS)と進みましょう。

(外観)⇒(カスタマイズ)を選択

(追加CSS)をクリック

次に表示するコードをコピーして(追加CSS)にペーストしましょう。

 

+ クリック(コピーするコードが表示されます)

@media screen and (max-width: 768px) and (min-width: 480px) {
iframe .twitter-timeline-rendered{
width: 490px !important;
}
}

@media screen and (max-width: 480px) {
iframe.twitter-timeline-rendered {
width: 450px !important;
margin:0 auto;
}
}

.timeline-Widget {
max-width: 300px!important;
width:200px !important; }

コピーしたコードを貼り付けたらすぐ上の「公開」ボタンを押しましょう。

注意ポイント

追加CSSに違うコードが表示されている場合は「スペースを1つ空けてペースト」してください。

 

これでtwitterのタイムラインもブログに表示できたと思います。

 

僕はサイドバーよりもフッターに表示させてますが、この辺りはお好みでいいと思います。

 

また、アフィンガーのカスタマイズするとブログの見栄えも変わりますね。

【AFFINGER5】プロフィールカード(自己紹介)を設置する方法を説明したり、アフィンガーの初期に悩む問題【AFFINGERのデフォルトサイドバー】最新エントリーリスト削除方法なども紹介してますので時間のある時に見てくださいね(/・ω・)/

-WordPress

© 2020 Toshiblog Powered by AFFINGER5