TwitterのタイムラインをWordPressのサイドバーに埋め込む方法!

Twitter

TwitterのタイムラインをWordPressのサイドバーに埋め込む手順を説明します。

↓埋め込むと以下のように表示されます。

※事前にTwitterのアカウントを作成しておいてください。

TwitterのタイムラインをWordPressのサイドバーに埋め込む手順

まずはTwitterで埋め込みコードを発行

↓埋め込みコードを取得するためにTwitterの公式サイトにアクセスしてください(英語表記ですが問題ありません)。

↓サイトが開いたら、ご自身のTwitterのURLを「What would you like to embed?」の欄に入力し、右矢印をクリックしてください。

入力例:当サイトのTwitterなら「https://twitter.com/wptec」となります。

↓「Here are your display options」の左の「Embedded Timeline」をクリックしてください。

↓埋め込みコードと表示例が確認できます。少し大き過ぎるのでサイズを調整します。

↓サイズ調整をするので「set customization options.」をクリックしてください。

↓サイズを調整するための入力ボックスが開きますので「Height(高さ)」を設定してください。「500px」ぐらいで良いと思います。「Width(幅)」は自動で調整されるので空白で問題ありません。最後に「Update」をクリックしてください。

Height(px) 高さの設定
Width(px) 幅の設定
Light/Dark 背景色の設定
Default link color リンク色の設定
What language would you like to display this in? 言語の設定です。「Automatic」を選ぶとサイトを見ている人の環境に合わせて表示されます

↓埋め込みコードをコピーしてください。

WordPressのサイドバーに埋め込みコードを貼り付ける

WordPressにログインし「外観」⇒「ウィジェット」をクリックしてください。

↓「利用できるウィジェット」⇒「カスタムHTML」をサイドバーにドラッグしてください(場所は任意)。

↓「タイトル(任意)」を入力し「内容」に先ほどコピーしたTwitterの埋め込みコードを貼り付けてください。最後に「保存」をクリックしてください。

サイドバーの表示確認

上手くTwitterのタイムラインが表示されているか確認してみます。

↓問題なく表示されていました。

WordPressの記事内にTwitterのタイムラインを表示させることも可能

↓記事投稿ページを開きエディタを「テキスト」し、埋め込みコードを貼り付けてください。

投稿ページの表示確認

↓投稿ページを確認するとTwitterのタイムラインが表示されていました。幅は自動変換されます。

さらに詳細なカスタマイズを確認

境界線の色を変更する

埋め込みコードに「data-border-color=”#******”」を追加してください。「#******」の部分の「******」には6桁のカラー番号が入ります。

※カラー番号が分からない人はこちらのサイトを参考にしてください。

↓当サイトの埋め込みコードに境界線の色(赤)を追加すると以下のようになります。

<a class="twitter-timeline" data-height="500" data-border-color="#ff0000" data-theme="light" href="https://twitter.com/wptec?ref_src=twsrc%5Etfw">Tweets by wptec</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
コードが壊れた時のために必ずバックアップを取っておいてください。

↓境界線の色が赤色に変わっているのが確認できます。

表示するツイートの数を変更する

タイムラインに表示されるツイートの数を1から20までの間で設定可能です。「data-tweet-limit=”*”」を追加して下さい。「*」の部分は1~20の数字が入ります。

↓試しに「data-tweet-limit=”*”」を「1」に設定してみました。1つのツイートしか表示されていません。

レイアウトに関するカスタマイズ

タイムラインのレイアウトをカスタマイズすることも可能です。埋め込みコードに以下のコードを追加するだけでOKです。

複数設定したい場合は「data-chrome=”noheader nofooter noborders noscrollbar transparent”」のように半角スペースを空けて記述してください。

data-chrome=”noheader” ヘッダー部分を非表示にする
data-chrome=”nofooter” フッター部分を非表示にする
data-chrome=”noborders” 境界線を消去する
data-chrome=”noscrollbar” スクロールバーを非表示にする
data-chrome=”transparent” 背景を透明にする

その他のカスタマイズ

上記以外で今後使う可能性のあるカスタマイズを紹介します。

data-show-replies=”true” リプライを表示する

最後に

手順通りに進めれば簡単にTwitterのタイムラインを設置できます。ご自身のサイトのアクセスアップに役立ててください。

以上「TwitterのタイムラインをWordPressのサイドバーに埋め込む方法!」でした!

それではまた。

コメント