AMPによるスマホ表示の崩れ修正　備忘録

PCによる正しい表示

スマホ表示だとこんなに崩れる

フロント画像がない。窓枠も、丸囲みも出ない。
いきなり記事が表示される。
しかも、その下に以前の記事がダラダラと連なる。

先日、テーマ、およびプラグインのアップグレードが原因と思い込んでいた不具合に遭遇しました。（実は全く関係ありませんでした）

現象

PCでは全く問題ないのに、スマホで見るとフロントページのトップ画像やウィジェットが表示されず、更に、ブログは記事が直接表示され、しかも過去の記事がずらずらと後ろに連なっています。記事のCSSも崩れていて、表題の区切れがわからない状態でした。（上記写真およびビデオ参照）

直前の作業

この現象を認識する前の行動は、写真を多く使用した2000文字以上の記事を2本書いて投稿しました。また、テーマ及びプラグイン５個（確かそれくらい）をアップグレードしました。

思ったこと

ソフトの不具合では

制作者に失礼千万な話ですが、ソフトに問題があるのではと疑いました。そこで、ソフト制作会社の不具合報告に状況を投稿しました。

プラグインとの相性

アップグレードしたテーマとプラグインで相性が悪くなった為に起こったのではないか。そこで、別のサイトで同様にアップグレードをし、問題ないことを確認した上で、本サイトとのプラグインの有り無しを確認し、本サイトのみにあるプラグインを停止してみましたが、治りませんでした。

子テーマが原因

私は子テーマを利用しているのですが、親テーマの更新をしても、子テーマに反映されてないのではとも考えました。ネットを調べ、子テーマをアップグレードする方法が有ったのですが、それには、一旦親テーマを有効にして、その後子テーマを有効にするとのこと。別サイトでやってみたのですが、子テーマで設定したはずのフッター表示が消えてしまいました。どうも、このやり方は違いそう。最悪、子テーマを止めて、親テーマで運営すれば治るかも・・とも考えました。が、早まるのは止めて、有識者の意見を求めようと思いました。

乗っ取られたのでは

誰かが意図的に壊しているのではないか。昨今、セキュリティ－リスクは高いので、万が一、とも思いました。が、どのようにしてそれを確認するのかが分かりませんでした。FBでトホホ記事を出した所、詳しい方が教えてくださいました。wp-config phpの中を見て、データーベース名が変わっていないかを見て判断がつくそうです。
幸い、乗っ取りではなかったです。

何をすべきかを考えました

バックアップから戻す

バックアップをBackWPupプラグインを使い、ファイルをDropBoxに定期的に保存していました。しかし、丁度記事を書く前に容量が一杯になり、自動保存が止まっていました。従って、十数時間かけて書いた記事のバックアップはありません。なので、これは最後の手段として考えました。それに、バックアップの仕方もよくわからないので、しっかり勉強しなければ着手できない物です。

有識者に伺う

かつて、WordPressの講義を受けた時の講師らに、問い合わせをしました。また、ドリームゲートへの問い合わせもしました。制作会社への問い合わせもしました。更に、スポットで不具合対策をしてくれるタイニービット社にも対応依頼を出しました。
（今回、ネットを調べて、タイニービット社を見つけましたが、これは、今後何か有った時の駆け込み寺として有用だと思いました。）

ソフトを入れ直す

ソフトのアップグレード時に、何か問題が有ったのでは。であれば、ソフトを入れ直せば良いかも。しかし、どのようにして入れ直したら良いのかが分かりませんでした。親テーマを削除して再度入れるのが流れかと思いますが、他のテーマに変えた途端に、今までの設定がどうなってしまうのか不安。これも、有識者の意見を伺ってから考えようと思いました。

有識者の回答

制作会社から回答をもらいました。APMプラグインが有効になっているため、スマホ表示がおかしくなっている。これを外せばもとに戻る。とのことでした。

AMPとは

AMPはAccelerated Mobile Pagesの略称。スマホでウェブページを高速表示するためのソフトだそうです。GoogleやTwitterが2016年から取り入れているそうです。

私のサイトでは、AMPは入れていないので（そもそもAMPが何かも知らない）、一体何処でそうなったのかを考えました。そこで、はたとひらめいたのが、Jetpackでした。

Jetpackでの操作

実は大作の記事を書いた後に、それをFaceBookに連携投稿したのですが、抜粋表記になっておらず、2,000文字がズラッと表記されていました。どうしたら抜粋表記になるのかを考えながらJetpackを調べていました。すると、Jetpack設定＞テーマの拡張＞writing＞モバイルテーマの有効化　にある「投稿の全文ではなく抜粋を使用」という文言が有ったので、それを有効にすればうまくいくのではと考えました。そこで、モバイルテーマの有効化をクリックしました。しかし、うまく反応せず、エラーが出たりしたので、それ以上触らないことにしました。ところが、モバイルテーマの有効化がオンになっていたのです。これが全ての原因でした。