遅ればせながらBlogの運用を始めた僕ですが、他人のBlogを見ていて、Twitterのタイムラインを表示させたいなと思いました。
▼このような感じです。
ネットとかで検索すると、ツイートを記事内に埋め込む方法は良く出てくるのですが、サイドバーやフッターにタイムラインを表示させる方法を探すのに少し苦労したので、自分自身への備忘録も兼ねて書きます。
※僕は「JIN」のWordPressテーマを使用していて、管理画面の表示が通常とは若干違うかもしれないのでご了承くださいm(_ _)m
プラグインを使用しない設定方法
プラグインを使用して設定する方法もあるのですが、僕はできるだけ必要以上のプラグインを使用しないようにしています。
使用するプラグインが増えすぎてくると、プラグイン同士が干渉して不具合が起きたり、動作が重たくなったりします
使用するプラグインは必要最低限にしましょう!
Twitter Publishからコードを取得します
まず初めに、Twitter Publishにアクセスしてください。
するとこのような画面に遷移します。
「What would you like to embed?」→「何を埋め込みますか?」という内容のようです(そのまま翻訳しただけなので間違っていたらすません><)。 こちらにはTwitterの「マイページ」のURLをコピペします。
Enter押下!(Macならreturnですね)すると下記の画面に遷移します。
今回はタイムラインを表示させたいので左側を選択してください。
そのまま「code copy」をクリックする前に「set customization options.」をクリックして埋め込むTwitterのカスタマイズを行います。
上記の画面になるので赤枠で囲った4箇所を調整します。
【Hight(px)】→こちらは高さなので任意の値を入力します。だいたい500〜800くらいですかね。
【Width】→こちらは幅なのですが、300〜400くらいでしょうか。
【Light】か【Dark】の選択→デザインのことですね。ダークなデザインがお好みの方は【Dark】を選択!
最後に【Automatic】となっている部分は【Japanese】へと変更をしておきましょう。
この4つの設定が完了したら「Update」をクリック!
以上で設定が完了したので、「Copy Code」をクリックしてコードを取得しましょう!
※今コピーしたコードをWordPressに設置します!
WordPressの設定
ここからは、WordPressのダッシュボードの設定に入ります。(僕が設定しているWordPressテーマの関係で、みなさんとは多少画面が違う可能性もありますのでご了承ください)
外観→ウィジェットと進みます。
「カスタムHTML」もしくは「テキスト」をサイドバーの任意の場所までドラッグ&ドロップしましょう!(どちらを選んでも大丈夫ですが、僕は「カスタムHTML」の方で設定しています。)
サイドバーに追加したら右側の▼をクリックして、
タイトルには【Twitter】や【ツイッター】などを入力して、内容の所に先ほどTwitter Publishから取得したコードを貼り付けます。
最後に保存をクリックして作業は完了です!お疲れさまでした!