ホームページに不具合が発生していました

昨日気付いたのですが、このホームページに不具合が発生していました。具体的には、以下の2点。

1.スマホやタブレットを縦表示にしてホームページを開くと、本来メニューバーに格納されているはずのコンテンツの階層だけがズラズラと表示され、クリック(タップ?)してもどのページにも行けなくなっていたということ(横画面や、ブラウザのPCサイトモード、パソコンで開いた時は問題なし)。

2.お気付きかと思いますが、メニューバーをスッキリとさせるため、お問い合わせ用のメールフォームをメニューバーから削除し、右上に「お問い合わせ」ボタンを設置。すると、メニューバーや「お問い合わせ」ボタンが右にずれてしまっていたこと。

今まで安定稼働していたので、この不具合を確認した時は愕然としました。特に1.の問題は、一体いつから発生していたのでしょう・・・。背筋が凍りました。これは、大至急対処しないとモバイル端末から一切このホームページへアクセスできなくなります。2.の問題も左側に不要な余白ができて、みっともないですからね。そこで、またまた夜を徹しての原因究明が始まりました。当然のことながら、作業は困難を極めました。今まで何度もこのブログに書いていますが、こういった不具合の原因は1つではなく複合的要因の重なりが原因であることが多いからです。ホームページのカスタマイズは、元のテーマ(親テーマ)に手を入れるのではなく、「子テーマ」を作って行うのが原則です。何故なら、親テーマを直接カスタマイズしてしまうと、親テーマがアップデートした時苦労してやったカスタマイズが全て失われるからです。当然私も「子テーマ」を作って色んなカスタマイズを沢山していたのですが、一体どこが不具合を起こしているのか突き止めないことには先へ進めません。プラグイン(拡張機能)が競合している可能性も考え、一旦全て無効化し、1つ1つ有効化して確認してみましたが、状況は変わらず。そうなると、あとは使用しているテーマファイルに問題があることになります。ここまで絞り込めただけでもラッキーです。私が基本的に手を入れるのは、「functions.php」、「header.php」そして「style.css」の3つのファイル。それ以外は(今のところ)特に弄ることはありません。従って、この3つのファイルの中のどこかに原因があるということになります。しかし、この3つのファイルの中には膨大な数のコードが書かれており、怪しい部分を目視とCtrl+Fで検索しながら探していくことになるのですから、これはかなり大変でした。特に、自分が手を加えた箇所は重点的に調べなければいけません。目を皿のようにしてあれこれ調べていくうちに、どうやら「header.php」が怪しい、と見当が付きました。このファイルには、以前コメント欄にリアルタイムプレビュー機能を搭載しました。jQueryというJavaScriptライブラリを導入したのですが、試しに何も手を加えていない「親テーマ」を有効化して検証したところ、「リアルタイムプレビュー」のコードを削除すればきちんとモバイル端末で表示されました~\(^o^)/スマホやタブレットを縦にしても横にしても、キャッシュなどをクリアしてサイトを再読み込みしても大丈夫でした!そこで「子テーマ」に戻し、問題のコードを削除して「header.php」をFTPでサーバーにアップロードしたら見事、解決!「リアルタイムプレビュー」、なかなか良いアイデアだと思ったのですが、不具合の原因になるようでは困りますものね。単に私のやり方がまずかったのでしょうが・・・。「リアルタイムプレビュー」は、ボツにしました(^_^;)これでとりあえず、1.の問題は解決しました(*^^)v続いて2.の問題です。結論から言いますと、この不具合の原因も「header.php」にありました(~_~;)「お問い合わせ」のボタンを表示させるためのコードに、余計なタグが入っていたのです。

犯人(?)はコイツ↓

これも、このタグを削除して、FTPで「header.php」をサーバーにアップロードしたら無事、解決しました☆普段、縦画面でスマホ・タブレットを使用されている方、大変ご迷惑をお掛け致しましたm(_ _)m 2.のレイアウト崩れも無事、直すことができて一安心です。もし、皆様がこのホームページに何かしらの不具合を発見されましたら、右上にある「お問い合わせ」ボタン(メールフォームが開きます)やブログのコメント欄などでお知らせいただけると幸いです。宜しくお願い致します(^-^)

The following two tabs change content below.

めぐみん

「宇治のお茶まる」の広報。ホームページの作成、管理、メンテナンスを担当。

最新記事 by めぐみん (全て見る)