備忘録シリーズ。
WordPressによるたこすえいぷりる.comをどのように作っていったか、細かいことでも記録に残しておこうと思う。
なんでも知ったことはメモっておくと良いって、偉い人も多分言っていたんじゃないかな。
WordPress完全初心者、HTMLなんて知らんみたいな人でも読めるように書く予定。
本題。今回は当ブログのサイドにTwitterのタイムラインを埋め込んでいく。
Twitterタイムラインを埋め込みたい位置
この部分に入れたい。
埋め込み用HTMLの取得（タイムライン）
Twitterのタイムラインを埋め込むには、まず埋め込み用のHTMLを用意する必要がある。
①Twitter Publishにアクセスする
Twitter Publish ※別タブ
②埋め込みたいTwitterのURLを入力する。
今回は https://twitter.com/Tacos_Eorzea となる。
入力してエンター。
③Embedded Timeline を選択
赤枠の方。
ちなみに「Twitter Buttons」を選択すると、フォローやリプライができるボタンを生成できる。
④埋め込み用HTMLが生成される
Copy Codeをクリックするとコピーできる。
このHTMLを後で使う。
Twitterタイムラインの埋め込み方法
実際に埋め込んでいく。
①WordPressダッシュボード > 外観 > ウィジェットを開く
この画面ではWordPressサイトを編集できる。
②Right Sidebarを開く
③ 「+」 > カスタムHTML を開く
これで好きにHTMLを埋め込める
④埋め込み用のHTMLを入力する
赤枠の部分に先ほど取得したHTMLを入力する。
<a class="twitter-timeline" href="https://twitter.com/Tacos_Eorzea?ref_src=twsrc%5Etfw">Tweets by Tacos_Eorzea</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
ただ、このままだと縦長になる。
モノは試しなのでこのまま更新ボタンを押してみてほしいが、さすがに邪魔なので表示するツイート数に制限を設けよう。
⑤埋め込みタイムラインに表示するツイートの数を設定する
data-tweet-limit="n"
上記の記述を追加する。
nは表示したいツイートの数。
ひとまずは”3″に設定してみた。
↓追加後。
<a class="twitter-timeline" href="https://twitter.com/Tacos_Eorzea?ref_src=twsrc%5Etfw">Tweets by Tacos_Eorzea</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
これでOK。あとは忘れずに右上の更新ボタンを押そう。
⑥無事、タイムラインが表示された
その他
最終的に上述のウィジェットから、以下の項目を増やした。
・見出し「ツイッター」
・カスタムHTML「フォローボタン」
結果的にこんな見た目に。
簡素すぎてアレだった見た目から、少しはマシになったか。
後はヘッダー画像の追加と、自アイコンを置くとこを作りたい。
ちょうど良いものあるかな・・・。