Ajout de HTML et CSS dans l'éditeur Wordpress?

Question

J'utilise un thème enfant de "freestore". (https://en-gb.wordpress.org/themes/freestore/)

Je tente d'ajouter du contenu à l'une de mes pages en utilisant du HTML et du CSS. J'ai réussi à changer les styles CSS dans le thème via style.css, mais j'essaie d'ajouter mon propre code HTML, puis CSS pour le styler.

J'ai créé la page 'home' et à travers l'éditeur de texte wordymce wordymce je peux ajouter mon code HTML. Lorsque j'essaie d'ajouter le CSS via mon style.css, il n'applique pas les styles. Je peux cependant ajouter les styles en ligne, mais je voudrais ajouter les styles en externe.

Exemple:

Sur l'éditeur de texte wordpress Je voudrais ajouter la ligne:

<div id="cssTest">TEXT</div>

Dans mon fichier style.css je voudrais ajouter:

#cssTest { 
    background-color: red; 
} 

Le style CSS n'est pas appliqué. Cependant ce qui suit à l'éditeur HTML fonctionnera correctement:

<div id="cssTest" style="background-color: red;">TEXT</div> 

Ma question est:

1. Comment puis-je appliquer mes styles via une feuille de style externe?
2. Dois-je créer mon propre modèle pour cette page et y ajouter le code HTML?

Answer 1

Vérifiez si les thèmes enfant style.css a Text Domain: freestore-child parentthemename-child. Tout élément css id/class que vous ajoutez sera implémenté.

La meilleure façon serait de créer un fichier custom.css et de le sauvegarder dans la fonction wp_enqueue_style de votre thème enfant.

Je crois que c'est la meilleure pratique pour créer un modèle de page pour des pages spécifiques comme la maison.

Answer 2

Il est fort probable qu'une règle CSS appartienne à votre thème d'origine, ce qui est plus "spécifique" que la règle que vous essayez d'appliquer. Pour vérifier cela, inspectez l'élément avec les outils du navigateur et regardez quelle règle CSS est appliquée à cet élément.

Si cette règle serait par exemple

.content main .section_1 .gxt1 { 
    background-color: black; 
} 

, vous auriez à écraser l'ajout d'une règle qui a une plus spécifité, comme

.content main .section_1 .gxt1 #cssTest { 
    background-color: red; 
} 

Si la règle d'origine contient un !important, vous devez également ajouter !important. Donc, pour remplacer

.content main .section_1 .gxt1 { 
    background-color: black !important; 
} 

, vous besoin de quelque chose comme

.content main .section_1 .gxt1 #cssTest { 
    background-color: red !important; 
}