WordPressにTwitterを埋め込む方法

sponsored links



こんにちは、fumiyaです

ブログのトップページのヘッダーやサイドバー、フッター部分のカスタマイズを無性にやりたくなっている今日この頃です。

記事のコンテンツもさながら、ブログのデザインも乏しく質素なブログ【PUSH】になってきています。

fumiya
やかましわ!これからやる予定です

今回はもう少しおしゃれなブログにしたいと思いカスタマイズしたので、その設定方法の紹介をしていきたいと思います。

WordPressにTwitterを埋め込む

今回は、記事中にTwitterのツイートを埋め込むのではなく、サイドバーかフッターに埋め込む方法を説明します。

記事中にツイートを埋め込みたい方は、以下を参考にしてください。

効率よく記事を書く方法【ブログ部】

2017.08.14

Twitterを埋め込むって?

イメージとしては、このような感じです。

WPにツイッターを埋め込む

 

Twitter側でコードを取得

まずは、WordPress側に必要なコードをTwitter側に取りに行きます。

ツイッター設定

①をクリックしてから、②をクリックすると、

ワードプレスにツイッターを埋め込む方法

ウィジェットをクリックして新規作成します。

ワードプレスにツイッターを埋め込む

プロフィールをクリックします。すると、以下の画面に切り替わります。

ツイッター 埋め込み手順

空欄に自分のtwitterのURLを入力します。(https:///twitter.com/〇〇〇〇〇ってやつです

すると、以下のような画面になります。

WPにツイッターを埋め込む方法

ここでは、Embedded Timelineを選択します。

ブログで表示するためのカスタマイズ(Twitter内での設定)

ブログ内でTwitterを表示する大きさを設定します。

WPにツイッターを埋め込む方法

上の画像のように、set customization optionsをクリックします。

WPにツイッターを埋め込む方法
高さはお好みで
私は高さを600と設定しましたが、少し大きく感じます。もう少し小さくしても良いかもしれません。

Widthは横幅なので空白で問題ありません。

updateをクリックするのを忘れずに。

(追記:やっぱり600だとSPでスクロールしにくかったので400に変更しました)

ツイッター側のコードをコピー

コード作成までもうわずかです。

WPにツイッターを埋め込む方法

右上の青枠のcopy codeをクリックすれば、コピー完了です。

WPにツイッターを埋め込む方法
fumiya
Twitterでコードを取得する方法は以上で完了です

次はこのコードをWord Pressに設置する方法を説明します

Word Pressに設置する方法

取得したコードをWord Pressに設置する必要があります。

Word Press管理画面→【外観】→【ウィジェット】

ウィジェット
fumiya
私の場合は、メインサイドバーに設置することに決めましたので、上の画像のようにテキストをメインサイドバーにドロップ&ドラッグしていきます

ドロップ&ドラッグした【テキスト】をクリックします。

WP ウィジェット
注意
コピペする場所は、ビジュアルではなく、テキストにします。

コピペが終わったら、保存を忘れずに。

また、同じようにSP用に表示されるように設定を行うことも忘れずにしましょう。

WPにツイッターを埋め込む

このように表示されていればOKです。

fumiya
めっちゃおしゃれやん!

以上で設定は完了です。ちょっとブログのトップページの印象を変えたい場合のお役に立てたら幸いです

お疲れ様でした

 

以上、fumiyaでした

sponsored links



ABOUTこの記事をかいた人

はじめまして、理学療法士のfumiyaです。1986年生まれ/妻と子供2人の4人家族。ブログ【PUSH】を運営しています。30代のただのサラリーマンが、行動することでどのように変化していくのか、変化できるのか。向かったベクトルがあちこち進んで迷走中ですが、できるだけ暖かい目で見守ってほしいです。