お金の悩み

【図解付き】ワードプレス/JINでTwitterを埋め込む正しい方法と対処法

  /

Twitterのツイートをブログに埋め込むと、画面の表示が遅くなっていませんか？

ツイートの正しい埋め込み方法は、URLをコピペではなく【埋め込み用のコード】を使用します。

ぱる子
ぱる子
し、知らなかった〜
夫氏
夫氏
JIN公式にも書いてあるURLをそのまま貼り付ける方法は、簡単だけど複数貼ると表示が遅い状態になるんだよ！

理由は後ほど。特に私は普段ツイートした内容をブログに複数貼り付けて記事を作成するので、表示が遅くなりがち。

しかもこちらの

グレーボックスのタイプではなく

こちらのTwitterそのままの形で表示したかったので、今回改善されて本当に良かったです(；▽；)

・表示が遅い。複数のツイートをスムーズに表示したい

・ツイートがたまにコードに戻って焦る

・埋め込みのグレーボックスではなく、ツイートそのままの形で表示したい

そんな方はぜひ、サクッと問題解決しちゃいましょう！

ワードプレス/JINでTwitterを埋め込むと表示が遅い原因

ツイートを埋め込む時、ほとんどのワードプレステーマでは、ツイートのURLを貼り付けるだけで表示することが可能です。

ぱる子
ぱる子
自動カード出力と言って、新しく追加された機能なんだ！

ただし、複数のツイートを埋め込む場合、先ほど書いたように【埋め込み用コード】を使用しないと、とんでもなく表示が遅い状態に・・・

実際貼り付けたツイートコードはこんな感じで処理されています。

が、赤線を引いたこの部分↓

<script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>

このコード、コードが書かれているたびにTwitterのフォーマットで表示できるように、Twitterにお伺いをたてに行く役割。

複数ツイートを貼るとその度に動いてしまうので、表示が遅い状態に。

実際はそのページに埋め込んだツイートのうち１つ目だけあればOKなので、２つ以上のツイートを埋め込む場合は、このコードを削除しましょう！

ぱる子
ぱる子
消すだけで良いなんて助かる～！
夫氏
夫氏
超絶機械オンチだもんね

ワードプレス/JINでTwitterを埋め込む時に表示が遅い状態を回避する方法

さっそく複数のツイートを貼り付ける時に、必要のない部分を削ってしまいましょう！

まずはTwitterで引用したいツイートの右上をチェック。

「ツイートをサイトに埋め込む」を選択。

表示されるコードをコピー。ここまではいつもと同じです。

ワードプレスの記事作成画面、テキストを開き、貼り付け。

下段の方にある、下のコードを削除！

<script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>

作業は以上です。サクッと１分で完了。お疲れ様でした！(*´ω`*)

それでもワードプレス/JINでTwitterの表示が遅い時は、フォント・アニメーションの設定変更を！

簡単にワードプレスで記事表示を速くする方法が、あと2点あります。

ブログの雰囲気が多少変わりますので、様子を見ながら試して見てください。

ウェブフォントをデフォルトに

ブログの設定の文字フォントは、デフォルト（初期設定）のオリジナルフォントを推奨します。

オリジナルフォントだと、読者側のWEB環境に合わせて最適なフォントを、短時間で表示することが可能です。一方オリジナル以外の凝ったフォントに設定してしまうと、文字データの読み取りに時間がかかり、表示が遅くなってしまいます。

ブログ最速化のためにも、初心者のうちは特に、デフォルト設定をおすすめします。

アニメーションを止める

記事をクリックするとぴょこんと動いたり、さっとページがめくれるようなオシャレな動き、憧れますよね。

私もアニメーションを入れていましたが、どうしても数秒間ができてしまい、表示が遅い状態に。

表示まで3秒以上待たせてしまうと、56%もの訪問者が離脱するデータが出ています。

まずは記事を読んでもらわないことには、ブログ自体を覚えてもらえません。ブログ初期は表示が遅くなる過度なアニメーションの設定は外しておきましょう。

ワードプレス/JINでツイート埋め込み時に表示が遅い時の対策は２点だけ！

というわけで、ワードプレスでTwitterを埋め込む際の正しい手順は

①「ツイートを埋め込む」からコピーする

②貼り付ける時に２つめ以降のコードから不要部分を削除

この２点だけOKです！

※ちなみに、間違えて記事内ツイート１つめのコードを間違って消してしまうと、全てのツイートがグレーボックスで表示されてしまいます。

この状態になるため、必ず２つめ以降のツイートからコードを削除してくださいね。

この問題を解決してくれた２名の神様

今回のこの表示が遅い問題に困りに困った私のためにが、所属するGOGOサロンのメンバーが解決に導いてくれました。

私の機械音痴っぷりにも呆れず、優しく対応してくれたこなゆきちゃん（@conayuki_nanibl）

＞＞趣味の域を超える！知識豊富なこなゆきちゃんブログ

 

そして、Twitterで表示が遅いとヘルプした時に助けてくれたソルティーさん（@Solty_gn）

＞＞WordPressブログ構築の入門マニュアル運営中！ソルティさんブログ

本当に本当に、ご協力いただきありがとうございました！＼＼\\٩( ‘ω’ )و //／／

※私が加入しているGOサロ、５期性の募集が５月２５日からはじまります！気になる方はTwitterのDMよりお気軽にお問い合わせください〜！

関連記事：記事作成を時短！ブログのネタ切れを防ぐ方法
同カテゴリ内おすすめ記事