WordPress ブログのページが崩れる原因と解決策
いきなりですが、WordPessでブログなり、Webサイトなりを運営していて
スマホのGoogleアプリやChromeでページを閲覧すると、ページのレイアウトが崩れて表示されてしまう…
悩みをお持ちの方、いませんか？
あるいは…
急にページへのアクセス数（訪問数）が減少し原因が分からない…
といった現象に、お困りの方。
スマホで開くとページが崩れる。
ページのアクセス数が減少し始めた。
WordPessで4年間ブログを運営してきた私自身、4年目にしてこの問題にぶち当たりました💦
解決策をネットでいろいろ調べ、いろいろ試し、失敗し、それでも何度もリトライ。
そうしてようやくたどり着いた、解決方法がありました。
本記事では、私の経験をもとに、
WordPressで作成したWebサイトやブログのページが、パソコンから閲覧すると正しいレイアウトで表示されるのに、スマホのGoogleアプリやChromeで開くと、なぜか崩れて表示されてしまう…
しかも、そのせいでページのアクセス数が減少し、ページを訪問してくれるユーザーがどんどん自分のサイトから離れていく…
と悩んでいる方に向けて、その原因と解決する術を２つご紹介したいと思います。
ページが崩れる原因は『AMP化』
まず、WordPressで作成したWebサイトやブログのページがスマホで開くと崩れてしまう現象が起きた場合、
そのページが『AMP化』されているかどうかを確認しましょう。
AMP化されていることにより、そのページがスマホのGoogleアプリやChromeで開くと崩れて表示される可能性が考えられます。
AMP化とは、Googleが推奨する「モバイルサイト用に最適化されたページ」のことを指します。
正式には『Accelerated Mobile Pages』といいます。
スマホやタブレットなどのモバイル端末でページが開かれる場合、そのページがAMP化していれば、高速に表示され“SEO対策に有効である”と、一般的に言われています。
ところが、このページの『AMP化』が実はまだ完全にWordPressに適応しておらず、WordPressで作ったサイトやブログのページをiPhoneやAndroidなどのスマホでGoogleアプリやChromeで開くと、ページ全体のレイアウトが崩れてしまうという現象が生じます。
実際、私が運営しているブログでも「AMP化」によるページ崩れの現象が起きました。
もしWordPressで構築したWebサイトやブログのページがスマホで開いて崩れている場合は、『AMP化』されていることが原因である可能性が高いので調べてみてください。
ページが「AMP化」されているかどうかの調べ方は簡単。
開いたページのURLに注目してください。
開いたページのURLに以下の２つの特徴があれば、そのページはAMP化していることになます。
URL冒頭に「⚡（カミナリ）」マークが付いている。
URL語尾に「/amp」が付いている。
上記の特徴が開いたページのURLにみられたら、そのページはAMP化しています。
そして、AMP化によってそのページのレイアウトは崩れている可能性があります。
崩れたWordPressのページを正常に戻す方法「その１」
WordPressで構築したWebサイトやブログのページが「AMP化」により崩れてしまっている場合は、WordPressにインストールしているプラグインの中に、AMP化のためのプラグインが有効になっていないかどうかを確認してみてください。
もしAMP化用のプラグインがあれば、そのプラグインを『無効化』してください。（=アンインストールしてもＯＫです。）
AMP化プラグインの有効化・無効化の手順は、以下の記事にてご確認できます。
崩れたWordPressのページを正常に戻す方法「その２」
AMP化プラグインを無効化したけれど、ページが崩れたまま・・・（泣）
安心してください。
そういった方は、ぜひ以下の方法を試してみてください。
テーマのfunction.phpに
リダイレクト用のコードを書き込む
上記の詳しい手順については以下のリンク先から確認することができます。
AMP化用のプラグインを無効化してもなぜページが崩れたままなのか、その理由を知りたい方は、以下のリンク先をご覧ください。
まとめ
今回は、WordPressでブログを運営して4年目にして気づいた、ページ崩れの原因とその解決策についてまとめてみました。
本記事の内容がどなたかのお役に立てることを願っております。