ワードプレスで作ったサイトをスマホで見てみると、うまく表示されないことがあります。
ウェブブラウザにキャッシュが残ってしまうとスマホ表示が崩れる不具合が起こってしまうことがあるんです。
サイトを閲覧する人はスマホで見ている人がほとんどなので、表示が崩れてしまうとアクセス減少に繋がってしまいます。
この記事では、ワードプレスでスマホ表示が崩れてしまう原因や対処法について解説するので参考にしてみてくださいね。
ワードプレスでスマホ表示が崩れるかどうか確認方法
ワードプレスのサイトをスマホで表示したとき、ページが崩れていることがありますが、もしかしたら使用しているデバイスのみの不具合の可能性もあります。
まずは、別の端末でも同じようにスマホ表示が崩れるのか確認してみましょう。
ワードプレスでスマホ表示が崩れてしまう原因
ワードプレスでスマホ表示が崩れてしまう原因について見ていきましょう。
キャッシュが残っている
キャッシュというのは、ウェブブラウザ上で過去に表示したサイトのデータを一時的に保存しておく仕組みのことです。
キャッシュを残しておくと、再びウェブサイトを訪問したときに表示速度が速くなるというメリットがあります。
しかし、古いバージョンのウェブサイトを表示している状態がスマホ表示を崩れさせる原因になることもあります。
AMP化されている
ワードプレスのサイトがスマホ表示で崩れる場合、ページがAMP化されている可能性があります。
AMP化とは、正式名称「Accelerated Mobile Pages」で、Googleが推奨する「モバイルサイト用に最適化されたページ」のことです。
スマホやタブレットでサイトを表示するとき、ページがAMP化されていればSEO対策がしっかりできていると見なされます。
しかし、AMP化はワードプレスに完全に適応できておらず、スマホでサイトを開くと表示が崩れてしまうことがあるんです。
スマホ表示が崩れてしまった場合は、AMP化されているかどうかチェックしてみてください。
- URLの冒頭にカミナリのマークがついている
- URL語尾に「/amp」がついている
このような状態の場合は、AMP化されている可能性があります。
ワードプレスでスマホ表示が崩れるときの対処法
ワードプレスでスマホ表示が崩れる場合、どのような対処法を試したらいいのかについて見ていきましょう。
ブラウザを更新する
ブラウザに不具合が起きている場合は更新や再起動をすると直る場合があります。
ブラウザ上に古いデータが残っているときは、更新してページを最新の状態にしてみましょう。
ワードプレスのキャッシュクリアをするためのプラグインを使う
ワードプレスにはキャッシュクリア機能が標準装備されていないので、専用のプラグインを入れる必要があります。
キャッシュ用のプラグインには、ページ速度最適化を行えるものもあるのでおすすめです。
- WP Fastest Cache
- Autoptimize
これらのプラグインは無料で使えるのでチェックしてみてくださいね。
端末上のキャッシュクリアをする
スマホ端末でのキャッシュクリアの方法も紹介します。
スマホ端末側のキャッシュをクリアすると、閲覧履歴なども一緒にクリアされてしまいますので注意してください。
「設定」のアプリからSafariを選び、「履歴とWebサイトデータを消去」をタップします。
対象のブラウザを開き、画面右上の3つの点マークをタップ⇒「履歴」から「閲覧履歴データ」を削除⇒「Cookieとサイトデータ」と「キャッシュされた画像とファイル」にチェックを入れる⇒「データを削除」
これでOKです。
AMP化されたページを正常に戻す
もしワードプレスのサイトがAMP化されてしまった場合は、正常に戻す必要があります。
- AMP化用のプラグインが入っている場合は無効化する
- テーマのfunction.phpにリダイレクト用のコードを書き込む
これらの方法を試してみてください。
リダイレクト用のコードを書き込む方法を紹介します。
ワードプレスの「外観」⇒「テーマファイルエディタ」からサイトに使用しているテーマの「fanction.php」にコードを書き込みます。
function omame_redirect_to_nomalpage_from_amp() {
$url_amp = $_SERVER[“REQUEST_URI”];
if ( substr( $url_amp, -5 ) === ‘/amp/’ ) {
$url_nomalpage = substr( $url_amp, 0, strlen( $url_amp ) – 4 );
if ( wp_redirect( $url_nomalpage, 302 ) ) {
exit;
}
}
}
add_action( ‘parse_request’, ‘omame_redirect_to_nomalpage_from_amp’ );
こちらのコードを、ワードプレステーマの「function.php」に貼り付けます。
こうすることで、AMP化されたページのURLが、AMP化される前のURLにリダイレクトされるようになり、スマホ表示の崩れが改善します。
対処法を全て試してもまだスマホ表示が崩れているときはどうする？
対処法を全て試してみても解決しない場合は、次の方法を試してみてください。
プラグインを無効化する
ワードプレスで新しいプラグインを導入したり、インストールしすぎたりしている場合、それらが干渉してしまうことがあります。
スマホ表示が崩れる原因にも…。
プラグインを入れたら急におかしくなってしまったなど心当たりがある場合は、新しいプラグインから順番に『無効化』してみましょう。
バグを確認する
ワードプレスでは、モバイル表示のとき画面レイアウトを自動的に調整されるようになっています。
スマホでサイトを表示すると、サイバーウィジェットが下にくるように自動的に配置されていますが、これが不具合を起こしている可能性も考えられます。
バグの改善は専門知識がないと難しいです。
広告やバナーサイズを適切にする
スマホで画像などがうまく表示されない場合は、挿入や形式が問題になっている可能性もあります。
サイズが大きすぎないかなどを確認してみましょう。
モバイルレスポンシブなテーマを入れる
モバイルレスポンシブというのは、スマホ表示に対応したデザインに自動的に調整してくれることを言います。
モバイルレスポンシブのテーマを導入すると、スマホ表示が正常になることがあります。
スマホ表示速度を改善する
スマホでは、パソコンで開くよりも重くスピードが遅くなることがあります。
スマホ表示が遅すぎるとページが読め込めないエラーが発生することも。
スマホでの表示速度の遅延でモバイルフレンドリーではなくなることもあるので、すぐに改善しましょう。
WordPress（ワードプレス）でスマホ表示が崩れるときの原因と対処法を解説！まとめ
ワードプレスでスマホ表示が崩れるときの原因と対処法を解説しました。
- まずは、全ての端末でスマホ表示が崩れるのかどうか確認する
- スマホ表示が崩れてしまうのはキャッシュが残っている、AMP化されているなどの原因が考えられる
- プラグインを無効化したり、AMP化されたページをリダイレクトするようにしてみると直ることがある
スマホでサイトを閲覧する人が増えている中で、表示が崩れてしまうのはかなりのダメージです。
しっかり対策して、正常な状態に戻しておきましょう。
対処法を実践したら、きちんとスマホ表示が戻っているかどうかしっかり確認しておくことが大切です。
是非、参考にしてみてください。
ホームページを今より活用して集客に繋げたい方、
WEBマーケティングを展開してきたい方はWebHEROにお任せください！
ホームページを活用して、もっと売上アップしたい…！
そう考えているあなたは、こんなお悩みをお持ちではないでしょうか？
そのお悩み、WebHEROにお任せください！
WEBマーケティングにおける重要なポジションを担っている「ホームぺージ」を
優秀なWEBマーケターの視点をいれて制作をさせていただきます！
まずは無料相談！
いつでもお気軽にご相談ください！
