web-dev-qa-db-ja.com

ライブサイトと同じようにステージングサイトを表示することはできません。完全に困惑

バックグラウンド

私は壁を突き上げている状況があります。何時間も経った後に(私が認めたい以上に)、私はそれを解決することができませんでした。だから私はそれについて取り組むより良い方法があるはずだと思っています。私が見逃しているのは明らかです。

WordPress Webサイトをライブドメインからステージングドメインに複製しました。

以前の開発者は、このサイトに対して多くの重要なカスタマイズを行い、それらをテーマファイルにハッキングしました。これはプロのテーマであり、定期的なアップデート(彼は無効にしています)を持っているので、なぜそれが採用されたのか私にはわかりません。しかし、それは脇役です。所有者はテーマを更新できるようにしたいです。私が提案した解決策は、すべてのカスタムコードとファイルを識別して子テーマに移行することでした。

問題

何らかの理由で、サイトのホームページがステージングコピーとは異なる方法でライブサイトにロードされます。それはスタイルの問題です。サイトごとに異なるCSSを利用しているように見える形式があります。私はその理由を理解していないので、それを理解することができませんでした。メインメニュー/ヘッダーにも影響します。

私が試したこと

FirebugとChromeの開発者ツールを使用して、レンダリングされたHTMLとCSSを詳細に調べました。ライブおよびステージングサイトで問題のあるCSSプロパティがどこから来ているのかを特定するために、関連するCSSセレクターなどのフルサイト検索(すべてのファイルのオフラインコピー)を行うためにBBEDITを使用しています。 。データベースのダンプでも検索を実行しました。

私の全力を尽くしても、私はどのようにして、どこから問題のあるCSSが発生しているのか把握することができませんでした。

回避策として、ステージングサイトに正しいプロパティ属性を強制するために、!importantを使用して新しいCSS定義を追加し始めました。しかしそれから、ライブサイトではフォームがレスポンシブで、ステージングサイトではそうではないことがわかりました。そのため、なぜ応答しないのかを突き止めて解決するのではなく、ドメインごとにレンダリングの仕方と理由がまったくわからなくなります。

質問

1)レンダリングされたページに適用されているCSSのソースを特定することをどのように推奨することをお勧めですか? (私はすでにFirebugとChrome Developer Toolsでそれを見てきました)

2)自分のサイトを見て、私が見逃しているものを見せてくれる人はいますか?私がここに特定のコードを投稿すれば、将来の視聴者にとってより有用であろうと思いますが、WordPressはそれがどのようなものであるかということは本当に選択肢ではありません。私は全体的な問題をいじるか、ここで再現することはできません。

3)(新しい質問)リストはありますか、それともWordPressがスタイル宣言ソースに与える優先順位は誰かに教えてもらえますか。

子テーマのstyle.cssが親テーマのstyle.cssより優先されることを私は知っています。しかし、functions.phpファイルで宣言されたスタイル、およびJSまたはfunctions.phpが呼び出す他のスタイルシートはどうでしょうか。 !important属性(子テーマ)があってもstyle.cssはfunctions.phpの宣言より優先されないようです。

(子テーマの)functions.php内のスタイル宣言をstyle.cssファイルに移動することをお勧めしますか? (編成のためおよび将来の変更を容易にするために)。それとも、不要な方法でstyle.cssから解析されるスタイル宣言が他にもたくさんあることを意味するので、これは悪い動きと見なされます(つまり、関連する関数が呼び出されていない場合は不要です。)。

問題のスナップショット

ライブサイトのヘッダーとフォーム: snapshot of form and header on live site 

ステージングサイトの同じヘッダーとフォーム: staging site 

誰かがサイトを直接見て支援しても構わないと思っている場合、ライブサイトは次の場所にあります。

〜(プライバシーのために)〜削除されました〜

ステージングサイトは次の場所にあります。

〜(プライバシーのために)〜削除されました〜

実際にこの問題を解決する方法を知りたいのですが、サイトを見て答えを返せば、どうやって解決したのか教えてください。それともどうやってそれを考え出すことができますか。ありがとう。

3
omega33

両方のWebサイトのcssファイルには多くの違いがあります。例えば、クラス et-top-navigation を持つdivをブラウザで調べてみましょう。

ステージングWebサイトでは、ライブWebサイトの場合ではありませんが、上部パディングと左パディングが適用されていることがわかります。

同様に、ステージングWebサイトで他のCSSの変更をチェックするか、ステージングWebサイトのすべてのCSSファイルをバックアップして、ライブWebサイトからそれらのファイルを配置します。

これであなたの問題が解決することを願っています。

1

私の経験が役に立つかどうかはわかりませんが、私の場合はカスタムテンプレートのWordpressテーマ管理エリアに独自の設定ページがあります(テーマ設定ページに組み込まれたWordpressではなく、そのテンプレートの設定ページを参照しています)。 。

私のステージングバージョンは、そのテンプレートの設定をインポート(または手動で挿入)するまでは "css different"です。 DBとFTPのクローン作成(明らかに完全なドメインの置き換え)では十分ではない理由がわかりません;)しかし、不足している設定を手動で修正することができます。

0
Elena

リンクが削除され、子テーマに移動する方法がわからない場合は、サイトを見ることはできませんが、スタイルシートのロード順序に問題があると思われる場合は、 add_action()を呼び出すwp_enqueue_style()呼び出しを見てください。ときどき使われる3番目の引数をコールバックの優先順位を指定するadd_action()に渡すことができます、あなたの子供のテーマのadd_action()の後に親テーマからのadd_action()が来る可能性があります。

WP add_action()docs

他のものを上書きする必要があるスタイルシートは、最後にエンキューする必要があります。

0
J Garcia