Javascriptや画像表示の不具合

> 先週末に作業を終えて、今日サイトを表示してみたら、
> 先週修正した個所がまた同じ不具合を起こしており、
> さらに画像も表示されなくなっています。

元々の問題点はどういったことで、どのような修正を行いましたか？

> PC・スマホ両方とも画像のパスは間違いなく合っていました

これはPCとスマホそれぞれ実機で確認されたということでよいでしょうか？
画像自体は、PCであってもスマホであっても同じものを参照しているので、画像が変わると言うことについては、PCとスマホどちらも同じ画像が表示されていて、かつ画像自体が想定しているものと異なると言う理解で良いのでしょうか？

念の為確認作業としては、友人のPCやスマホ、あるいはネカフェや知り合いのPCなど、異なる環境で見てみて画面がどうなっているかを確認しておく方が良いかも知れません(キャッシュなどの影響を考慮して)。

初めて鈴木さんのサイトに訪れるPCなりスマホがどのような表示になっているかが、現在の状態かと思うので、その状態と鈴木さんが想定している状態とが違う場合、初めてサイトに訪れた方のPCの方に修正しないといけないのですが、そういう場合の問題点はたいていはキャッシュです。

ブラウザ・サーバー設定・wordpressのプラグイン等色々な所でキャッシュは利用されているかと思います。例えばオンラインのゲームでも、何かしら問題があると巻き戻ることってありますよね？
場合によってはサーバーでそういうことが行われたかも知れません。

ただキャッシュは、有効期限もありますし、だいたいの場合手動で切ることもできますから、サーバーのメンテナンスやその他諸々を調べる、あるいは設定を見直すのが良いかと思います。

サイトのアドレスを公開してもらえれば、たいてい初めて鈴木さんのサイトに訪問することになるでしょうから、現在どうなっているのかは調べることができたりするかも知れません。
その時に、どこが問題であるかが予めわからないと、そういうサイトだと思う可能性もあるので、最初の「何をどうしてどうなった」を明確に書いておいてもらうのが良いのではないかと思います。

ご返信有難うございます。
Simplicityを入れるに至った目的が既存サイトのリニューアルです。
元のテーマ専用ウィジェット等で表示させていた内容をSimplicityに移す作業中です。

作業内容としては
———————–
Simplicityをインストール
↓
ライトカラムに画像を入れる
↓
ヘッダーメニューを設定
↓
既存サイトのページ内容をコピペする
↓
コピペした内容にcss&Javascriptを書き込んでいたので、上手く動くように設定し直す
↓
PC版正常に動作、スマホ版はcss&Javascriptがうまく適用されていない。
———————–

本日手を付けるまで上記の状態でした。

＞元々の問題点はどういったことで、どのような修正を行いましたか？
元々は私がページをコピペした時点からの不具合なので、Simplicityに原因があるのではなくコピペしたページ内のcss&Javascript周りに原因があったので、それを修正してPC版は正常に動作してました。
先程確認したらスマホ版はJavascriptが適用されていませんでした。cssは恐らく適用されています。

＞これはPCとスマホそれぞれ実機で確認されたということでよいでしょうか？
画像に関してですが、PCでは表示自体されません。
他のPCですと表示されるので、私のPCがおかしいのかもしれません。
しかし、imgタグで設定してあるパスはPCとスマホ共通であれば、スマホ版でまったく別の画像が表示される事は無いはずです。
そこが今まで体験したことが無いので頭を悩ませています…

先週まで問題は無く、本日見たらそういう状態なので「何をどうしてどうなった」というのは正直ご説明が難しいです。申し訳ありません。

一度キャッシュやサーバーのメンテナンス等を調べてみます。
サイトは代行で編集、修正を頼まれているので、公開してもよいのか聞いてみます。

その際改めてご報告させて頂きますが、それまでに思い当たる事が御座いましたらご連絡頂けたら幸いです。
お手数ですが宜しくお願い致します。

ページにコピペする前のjavascriptはどのような動作をするものでしたか？
例えばlazyload系の画像を遅延表示させるものであれば…
・元のスクリプトを活かすのであれば、Simplicityのカスタマイザーでlazyloadを止める
・Simplicityのlazyloadを活かすのであれば、元のスクリプトの処理部分をひとまずコメントアウトしてみる

画像関係で思い当るフシはこれぐらいでしょうか。コピペされたjavascriptの内容にもよりけりなので深くは言えない部分ではあるんですけれども。

またもうひとつ。javascriptのコピペはどのようにされましたか？
例えば、記事内に埋め込みとか、headタグにインラインとか、あるいはwordpress推奨のフック等による読み込みとか。

それらスクリプトは単一のファイルにまとめて書いてあるのか、その都度scriptタグで書き込んであるのか等の情報も欲しい所です。

スライドショーみたいなもので、大きい画像の下に小さい画像が横並びで配置してあり、小さい画像をクリックするとその画像の拡大画像が大きい画像部分に表示される…といったものを使っていました。

コピペ方法ですが、上記のスライドショーを設置しているページが3つありまして、各ページ毎に読み込ませている状況です。
コードを直接書き込んではいません。
ファイルは複数です。

子テーマのヘッダー部分にも読み込ませているのですが、ソース上で確認すると読み込ませる記述が無いです。

一つ書き忘れてたんですが、当該サイトにアクセスすると画像のみフェードインするようになってました。
これはSimplicityに変える前のテーマで似たようなスクリプトが使われていたんですけど何か関係がありそうでしょうか。

> 各ページ毎に読み込ませている状況です

これは例えば、header-javascript.phpとかに、外部スクリプトの読み込ませる方法(scriptタグ利用)で読み込ませてるんですかね？
それともwp_enqueue_scriptsで読み込ませてますか？

javascriptの中身の処理の兼ね合いもあったりするかも知れないんですが、生のjavascriptならアレですけれども、jQueryの場合は、jQueryが読み込まれてないと動作はしないのと、document.writeが利用されていたりする場合にasyncだと動作しないこともあったりします。

Simplicityが動作しているかどうかは、読み込ませているjavascriptを一旦停止して(コメントアウトなり、読み込み自体を一旦削除)、動作するかどうかを確認したほうが良いかも知れません。まぁされているとは思うんですけども。

もし仮にjQueryで読み込ませるjavascriptの中身が書いてあって、headでそのファイルを読み込ませているなら、header-javascript.php辺だったと思いますが、wp_enqueue_scriptsの最後のtrueをfalseにしてheadで読み込ませ、読み込ませる外部スクリプトもwp_enqueue_scriptsで読み込ませて、依存関係をjQueryにする必要があります。

wp_enqueue_scriptsでjQueryと依存関係を作れば、jQueryが読み込まれてから動作するようになります。また、headで読むかfooterで読むかも指定できます。
まぁjQueryであるならばですけれどもね。

読み込む順番の関係で問題が出ている可能性はあります。またasyncでdocument.writeが利用されている場合はdeferにして下さい。

Hidekichiさん
わいひらさん

ご返信有難うございます。
依頼主に聞いたら開示はできないとの事です…申し訳ありません。

Hidekichiさんから助言を頂いてますので、それを元に頑張ってやってみます。
もし無理なら一から一つ一つ確認しながらやるなり別のスクリプトで試すなりしてみようと思います。