ブログ運営

【図解付き】ワードプレス/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にお伺いをたてに行く役割。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アニメーションを止める

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

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

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

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

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

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

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

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

この2点だけOKです!

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

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

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

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

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

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

 

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

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

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

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

関連記事:記事作成を時短!ブログのネタ切れを防ぐ方法