web-dev-qa-db-fra.com

Pourquoi la feuille de style du thème pour enfants ne se charge-t-elle pas?

J'utilise le thème HashOne et j'ai créé un thème pour enfants afin d'apporter diverses modifications de couleur à notre site Web.

Toutefois, les modifications que j'ai apportées à la feuille de style de thème enfant ne se produisent que dans certaines sections du site, tandis que d'autres modifications sont reportées au thème parent. J'ai créé un fichier functions.php qui, à mon avis, est correctement formaté. Voir ci-dessous:

<?php
add_action( 'wp_enqueue_scripts', 'hashone_enqueue_styles' );
function hashone_enqueue_styles() {
wp_enqueue_style( 'hashone-parent-style', get_template_directory_uri() . 
'/style.css' );
}

Lorsque j'ai utilisé le mode Inspecter pour voir quel CSS remplaçait le thème enfant, j'ai pu confirmer qu'il s'agissait bien du thème parent. Cependant, trois fichiers CSS fonctionnent en même temps et je ne sais pas comment remédier à cela.

  1. stage.ottrial.pitt.edu/wp-content/themes/hashone/style.css?ver=4.7.1
  2. stage.ottrial.pitt.edu/wp-content/themes/hashone-theme-child/style.css?ver=1.0
  3. stage.ottrial.pitt.edu/wp-content/themes/hashone/style.css

Celui qui mène le peloton est le n ° 3. Je ne suis pas sûr de ce que je fais mal ici.

csschild-themewp-enqueue-stylestylesheetparent-theme
5
Sakena

Il n'y a pas besoin de plus de code dans votre fichier functions.php pour mettre en file d'attente le css de thèmes parent à partir de votre thème enfant. Le problème est qu'en ajoutant ce code, vous mettez en file d'attente le code CSS du thème parent une seconde fois, mais il se charge maintenant après le thème enfant. Cela signifie que toutes les modifications apportées au thème de l'enfant n'auront aucun effet.

Supprimez simplement cette ligne et vous devriez voir les changements dans votre thème enfant.

Ajouté: Voici les deux fichiers que j'ai utilisés avec uniquement les bases pour mettre correctement en file d'attente le thème enfant css.

fichier style.css:

/*
 * Theme Name: HashOne Child
 * Template: hashone
 * Text Domain: hashone-chile
 */

fichier functions.php:

<?php
add_action( 'wp_enqueue_scripts', function() {
  wp_enqueue_style( 'hashone-parent-style', get_template_directory_uri() . '/style.css' );
});
5
Nathan Johnson

Vous n'avez pas besoin de charger la feuille de style de votre thème enfant sauf si vous souhaitez lui attribuer un libellé différent de style.css.

Par défaut, WordPress charge automatiquement style.css (dans le répertoire racine du thème) du thème parent et du thème enfant.

Assurez-vous que votre thème enfant est activé et ajoutez votre code CSS au style.css du thème enfant.

Veillez à utiliser inspecteur pour identifier facilement les règles CSS. Redéfinir les règles CSS du thème parent peut parfois être délicat. L'utilisation de !important peut aider à remplacer certaines des règles CSS dans le thème parent.

Exemple d'utilisation de !important en CSS

Disons que le thème parent définit cette règle:

#site-title {
    color: #000000;
    background: #ffffff;
}

Vous pouvez forcer le remplacement de cette règle dans votre thème enfant de la manière suivante:

#site-title {
    color: #ffffff !important;
    background: #000000 !important;
}
3
Michael Ecklund

Gardez à l'esprit le nouveau quatro à partir de WP 4.7:

get_theme_file_uri()
get_parent_theme_file_uri()
get_theme_file_path()
get_parent_theme_file_path()

est venu remplacer la vieille quatro:

get_stylesheet_directory_uri()
get_template_directory_uri()
get_stylesheet_directory()
get_template_directory()

Dans l'ordre respectif. Le gain est la meilleure convention d'appellation.

1
prosti