プラグインが必要だと思って後回しにしてたけど、実はtwitter公式サイトでウィジェットのコードを発行するだけでよかった模様。
機能追加などで作成方法がよく変わるみたいなので、意味があるかどうか不明だけど
2016年12月11日現在での作成方法をメモとして残しておく。
twitter公式サイトでコードの作成
１．ツイッター公式サイトの自分のページの設定画面を開く
２．メニューからウィジェット選択⇒新規作成⇒プロフィールを選択
又は、
https://publish.twitter.com/
へ直接アクセス
３．自分のツイッターURLを入力
４．オプションの選択
今回はタイムラインを表示させたいので、Embedded Timeline を選択。
この時点で、下にコードが表示されるが まだコードをコピーせず
set customization options. を選択して詳細オプションの設定をする。
５．詳細オプションの設定
- 詳細設定は上から順に、
- 表示サイズ
- 表示カラー
- 言語
- おすすめユーザー欄に表示してもいいかどうか
（チェックを入れると表示しない）
以上の中で、Height だけは入力することを推奨。
入力しないと、ものすごく長いタイムラインが表示されます。
入力したら、Update を押す。
６．表示されてるコードをコピーする
WordPressでウィジェットの設定
表示させたい場所へ、テキストウィジェットを配置し、内容の部分にコードを貼り付ければ完了！！
実に簡単でした。
追加でカスタマイズ
twitterウィジェットの標準背景は白or黒 しか設定できないのですが、手動オプションを設定することで、外観のカスタマイズが可能です。
コンパクトなツイートのリストの周囲に表示される枠を制御するには、data-chrome属性を設定します。外観を表す各要素のトークンをスペースで区切って指定します。
noheader タイムラインのヘッダーを非表示にします。Twitterのアトリビューションやソースタイムラインへのリンクなど、Twitterの表示要件は、実装するサイト側で独自に追加する必要があります。
nofooter タイムラインのフッターとツイートコンポーザーのリンクを非表示にします (選択したタイプのタイムラインウィジェットに含まれている場合)。
noborders ウィジェット領域を囲む境界線やツイートの区切り線など、ウィジェット内の境界線をすべてなくします。
noscrollbar メインタイムラインのスクロールバーを非表示にします (表示される場合)。標準のユーザーインターフェースコンポーネントを非表示にすると、ウェブサイトのアクセシビリティに影響する可能性があるので注意してください。
transparent ウィジェット背景を透明にします。
との事なので、現在のページデザインにあわせる為に、背景色を透視化してみました。
コードに
data-chrome=”transparent”
を挿入するだけでOK。
ツイッターウィジェット内のボタン類が見難いという、若干の問題点はありますが とりあえず満足。
