TwitterリストをWordPressに埋め込みたい

TwitterリストをWordPressに埋め込みたい!
自分のアカウントたくさんあってリストでまとめてあるからそれ表示させたい!

埋め込んだTwitterリストの高さ調節をする

埋め込みたいリストの画面から、リストのURLをコピー。

↓ここ(投稿編集画面のビジュアルエディタの段落ブロック)にリストURLを貼ったら、
投稿に埋め込み成功してしまったw すごいw ↓

※そのまんま高さ調節せずに表示させてるから長いよ!

コードエディタにしてコードを見てみると↓

<!-- wp:embed {"url":"https://twitter.com/i/lists/1083218643616391168?s=20","type":"rich","providerNameSlug":"twitter","responsive":true} -->
<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter">
 <div class="wp-block-embed__wrapper">
  
 </div>
</figure>
<!-- /wp:embed -->

ちょっと投稿に埋め込むには高さがありすぎるので、
高さ調節を試みる。
figureタグ・divタグにstyle=”height:300px;”を入れてもだめ。
その内容のiframeタグに以下styleがかかっていた。

1000pxて!w

iframeタグはコードエディタで編集できないし、無理では?

Card Validatorの存在を思い出す

ツイートオンリーのツールらしく、リストは無理っぽい。

Twitter Publish発見

Twitterのヘルプページ「タイムラインを埋め込む方法」にて、
Twitter Publishというツールを発見。

さっきのリストのURLを入力して、
Return押下すると、スクロールされ、
埋め込みコードと下に当該リストがダラダラと表示される。

カスタマイズがしたいので、「set customization options.」へ。

すると高さ等のカスタマイズができるように!
わー!これこれ!
とりあえず高さ500pxでカラーリングはダークに。

そして「Update」を押下し、出てきた埋め込みコードをコピーし、
そのコードを投稿編集画面のコードエディタで貼り付け、
ビジュアルエディタに戻してブロック変換すると↓

投稿編集画面(ビジュアルエディタ)ではリストのiframeの表示はされてないけど、
プレビュー、実際の記事ページでは表示されてた!

ブロック変換するとaタグの周りにpタグ追加されちゃうけど、
見たところ正常なのでそのままに。

ちなみにコードの内容はこちら↓

<a class="twitter-timeline" data-height="500" data-theme="dark" href="https://twitter.com/kobunata/lists/list4?ref_src=twsrc%5Etfw">A Twitter List by kobunata</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

TwittterリストをWPウィジェットに埋め込む

こっちが本来やりたかったこと。
WordPressウィジェット部分にTwitterリストを表示させたい!

試しに、WordPressウィジェットのテキストウィジェットに
TwitterリンクのURLをペーストするとどうなるか。

ビジュアルエディタでURLをペーストすると、一瞬でリストが表示された!
もちろん実際のウィジェット部分にも反映されてます!

テキストエディタにペーストする場合も成功!

でもこれだとリストのカラーリングが白…

カラーリングをダークに

さっき上記で投稿に埋め込んだ時はダークカラーにできたので、
ダークカラーにしたい!

先ほどTwitter Publishからコピーしてきたコードから、
高さ調節の部分を省いたコードを、
テキストウィジェットのテキストエディタにペーストしてみる。
コードはこちら↓

<a class="twitter-timeline" data-theme="dark" href="https://twitter.com/kobunata/lists/list4?ref_src=twsrc%5Etfw">A Twitter List by kobunata</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

すると…

ダークで表示できたはいいが、スクロールできない!
そしてめちゃ縦長w

そこで、高さ指定をしたら、スクロールできるようになるのではと、
さっきのコードに高さ1000pxを指定するコードを入れてみた↓

<a class="twitter-timeline" data-height="1000" data-dnt="true" data-theme="dark" href="https://twitter.com/kobunata/lists/list4?ref_src=twsrc%5Etfw">A Twitter List by kobunata</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
いい感じ!

スクロールできるようになった!

おまけ

また、Twitter Publishで生成したコードには、
たくさんのカスタマイズ用コードがあるらしい。

高さdata-width=””
data-height=””
ダークモードdata-theme=””
リンク色data-link-color=””
ボーダー色data-border-color=””
ヘッダー非表示data-chrome=”noheader”
フッター非表示data-chrome=”nofooter”
ボーダー非表示data-chrome=”noborders”
スクロールバー非表示data-chrome=”noscrollbar”
背景透過data-chrome=”transparent”
引用:Twitterタイムラインの埋め込みとデザインカスタマイズの方法

参考にさせていただきました

タイムラインを埋め込む方法

ADS