web-dev-qa-db-fra.com

Impossible que le site intermédiaire affiche la même manière que le site actif. Complètement perplexe

Contexte

J'ai une situation qui m'a conduit au mur. Après de nombreuses heures (plus que je ne voudrais l'admettre), je n'ai pas pu le résoudre. Je pense donc qu'il doit y avoir une meilleure façon de s'y prendre. Il y a évidemment quelque chose que je néglige.

J'ai répliqué un site Web WordPress d'un domaine actif vers un domaine de stockage intermédiaire.

Un développeur précédent a effectué de nombreuses personnalisations importantes sur le site et les a piratées dans les fichiers de thème. C'est un thème professionnel, avec des mises à jour régulières (qu'il a désactivées), donc je ne sais pas pourquoi c'était l'approche adoptée. Mais c'est un aparté. Le propriétaire veut pouvoir mettre à jour le thème. Ma solution proposée consistait à identifier et migrer tout le code personnalisé et les fichiers vers un thème enfant.

Le problème

Pour une raison quelconque, la page d'accueil du site se charge différemment sur le site actif à partir de la copie intermédiaire. C'est un problème de style. Il existe un formulaire qui semble utiliser différentes CSS sur chaque site. Je ne comprends pas pourquoi et je suis incapable de comprendre. Cela affecte également le menu principal/en-tête.

Ce que j'ai essayé

J'utilise les outils de développement Firebug et Chrome pour parcourir en détail le code HTML et le code CSS rendus. J'utilise BBEDIT pour effectuer une recherche sur le site complet (avec une copie hors ligne de tous les fichiers) des sélecteurs CSS pertinents, etc., afin d'essayer de déterminer d'où proviennent les propriétés CSS problématiques sur le site de diffusion et de stockage. . J'ai également effectué des recherches dans un cliché de la base de données.

Malgré tous mes efforts, je n’ai pas pu comprendre comment et d’où provient le fichier CSS défectueux.

En guise de solution de contournement, j'ai commencé à ajouter de nouvelles définitions CSS, avec !important, simplement pour forcer le site intermédiaire à disposer des attributs de propriété corrects. Mais ensuite, j'ai découvert que sur le site actif, le formulaire est réactif et sur le site intermédiaire, ce n'est pas le cas. Donc, plutôt que d'essayer de comprendre pourquoi ce n'est pas réactif et de corriger le problème, je suis de retour pour essayer de comprendre comment et pourquoi ils rendent le rendu complètement différent sur chaque domaine.

Des questions

1) Comment recommanderiez-vous l'identification de la source de CSS appliquée à une page rendue? (compte tenu du fait que j'ai déjà parcouru les outils de développement Firebug et Chrome)

2) Y a-t-il quelqu'un ici qui voudrait jeter un coup d'oeil sur les sites pour moi et me montrer ce que je suis en train de négliger? Je me rends compte que ce serait plus utile pour les futurs téléspectateurs si je postais un code spécifique ici, mais WordPress étant comme cela, ce n’est pas vraiment une option. Je ne peux pas reproduire le problème dans un violon ou ici.

3)(Nouvelle question)Existe-t-il une liste, ou quelqu'un me le dira-t-il, l'ordre de priorité donné par WordPress aux sources de déclaration de style?

Je sais que style.css dans le thème enfant a la priorité sur style.css dans le thème parent. Mais qu'en est-il des styles déclarés dans le fichier functions.php et des autres feuilles de style appelées par JS ou functions.php? Il semble que même avec l'attribut !important (thème enfant), style.css n'est pas prioritaire sur les déclarations dans functions.php.

Est-il conseillé de déplacer les déclarations de style du fichier functions.php (thème enfant) vers le fichier style.css? (pour des raisons d'organisation et de facilité de modifications futures). Ou bien est-ce considéré comme une mauvaise décision car cela signifiera que beaucoup plus de déclarations de style seront analysées inutilement dans style.css (c'est-à-dire qu'elles seront analysées même si elles ne sont pas nécessaires, si la fonction correspondante n'est pas appelée)?

Instantanés du problème

L'en-tête et un formulaire sur le site actif:  snapshot of form and header on live site 

Même en-tête et formulaire sur le site intermédiaire:  staging site 

Au cas où quelqu'un voudrait vous aider en consultant directement le site, le site en direct est:

~ SUPPRIMÉ (pour la vie privée) ~

et le site de mise en scène est à:

~ SUPPRIMÉ (pour la vie privée) ~

J'aimerais vraiment savoir comment résoudre ce problème. Par conséquent, si vous jetez un coup d'œil sur le site et répondez-y avec une réponse, merci de me faire savoir comment vous l'avez résolu. ou comment je pourrais y arriver. Merci.

3
omega33

Il existe de nombreuses différences dans les fichiers CSS des deux sites Web. Par exemple, jetez un coup d’œil à la div ayant la classe et-top-navigation en l’examinant dans le navigateur.

Vous constaterez que dans le site Web de mise en scène, un remplissage supérieur et un remplissage à gauche sont appliqués alors que ce n'est pas le cas pour un site Web en direct.

De même, recherchez d’autres modifications CSS dans le site Web intermédiaire ou faites simplement une sauvegarde de tous les fichiers CSS dans le site Web intermédiaire et placez ces fichiers à partir du site Web actif.

J'espère que cela résoudra votre problème.

1
Mohit Kumar Arora

Je ne sais pas si mon expérience pourrait être utile, mais dans mon cas, le modèle personnalisé a sa propre page de configuration dans la zone d'administration de Thème Wordpress (pas la page de définition de thème intégrée à wordpress, je fais référence à la page de configuration de ce modèle) .

Ma version intermédiaire est "css différent" jusqu'à ce que j'importe (ou insère manuellement) les paramètres de ce modèle. Je ne comprends pas pourquoi les clonages DB et FTP (avec évidemment des remplacements de domaine complets) ne suffisent pas;) Mais je peux corriger manuellement les paramètres manquants de cette façon.

0
Elena

Je ne peux plus regarder les sites maintenant que les liens ont été supprimés et je ne sais pas comment vous avez déplacé des éléments vers le thème de l'enfant, mais si vous pensez que le problème est lié à l'ordre dans lequel les feuilles de style sont chargées, Jetez un coup d'œil à tous les appels add_action() qui appellent wp_enqueue_style(). Un 3ème argument parfois utilisé peut être passé à add_action() qui désigne une priorité pour le rappel. Il est possible qu'une partie de add_action() du thème parent vienne après la fonction add_action() de votre thème enfant.

WP add_action () docs

Les feuilles de style qui doivent remplacer les autres doivent être placées en dernier.

0
J Garcia