WordPressでTwitterのタイムラインの埋め込みが表示されない時の対処方法

Twitterのタイムラインを埋込時に
正常に表示されない場合の対処方法。
テーマ「SWELL」を使用している場合に
width:1pxになってしまう場合の対処方法をご紹介。

WordPressでTwitterのタイムラインの埋め込みが表示されない時の対処方法
目次

現象

WordPressでTwitterのタイムラインの埋め込みが表示されない時の対処方法

WordPressのサイドバーやフッターエリアなどにTwitterのタイムラインの埋め込みをしようとしたら
画面上にこんな線だけが表示されて上手く表示されない現象です。

WordPressでTwitterのタイムラインの埋め込みが表示されない時の対処方法
WordPressでTwitterのタイムラインの埋め込みが表示されない時の対処方法

WordPressのウィジェットにある「埋め込み」「Twitter」「カスタムHTML」「テキスト」で
どの方法でも上手くいきません。

原因と解決方法

WordPressでTwitterのタイムラインの埋め込みが表示されない時の対処方法

Chromeのデベロッパー画面で埋め込んだ要素を検証してみると
「width:1px;」
となっています。
親要素から幅を上手く取得できていない?ためだと思います。

WordPressでTwitterのタイムラインの埋め込みが表示されない時の対処方法

色々と試し見たところ下記CSSを追加で上手く表示できるようになりました。
テーマのカスタマイズから「追加CSS」で

.twitter-timeline {
    display: flex!important;
}

と記述します。
これで正常に表示できると思います。
正常に表示できない場合のご参考になればと思います。

よかったらシェアしてください!

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次