¿Por qué no se carga la hoja de estilos del tema hijo?

Question

¿Por qué no se carga la hoja de estilos del tema hijo?

23 ene 2017, 19:13:15

Vistas: 34.7K

Votos: 7

Estoy usando el tema HashOne y creé un tema hijo para hacer varios cambios de color en nuestro sitio web.

Sin embargo, los cambios que he realizado en la hoja de estilos del tema hijo solo están teniendo efecto en ciertas secciones del sitio, mientras que otros cambios se mantienen como en el tema padre. Creé un archivo functions.php que creo está correctamente formateado. Ver a continuación:

<?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' );
}

Cuando usé el modo de inspección para ver qué CSS estaba sobrescribiendo al tema hijo, pude confirmar que definitivamente es el tema padre. Sin embargo, hay tres archivos CSS operando a la vez y no tengo idea de cómo rectificar esto.

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

El que está liderando es el #3. No estoy seguro de qué estoy haciendo mal aquí.

Sakena

73

tema hijo wp enqueue style css tema principal

Todas las respuestas a la pregunta

Comentarios

¿Puedes proporcionar un ejemplo de cómo se escribiría la línea enqueue en functions.php?

Sakena

23 ene 2017 22:19:00

Disculpa si no fui claro. Lo que tienes arriba es correcto. Pero el mismo archivo se está encolando más tarde (ese es el segundo archivo /hashone/style.css que ves). Encuentra dónde se está encolando nuevamente y elimínalo. En una instalación limpia de HashOne con un tema hijo que solo consiste en un style.css en blanco y un archivo functions.php como el que tienes arriba, los estilos se encolan correctamente para mí.

Nathan Johnson

24 ene 2017 01:27:39

@NathanJohnson tu solución es idéntica al código del OP excepto por la función anónima. ¿Qué es diferente?

pcodex

2 nov 2018 03:12:49

No necesitas cargar la hoja de estilos de tu Tema Hijo a menos que quieras nombrarla de forma diferente a style.css.

Por defecto, WordPress carga automáticamente el archivo style.css (en el directorio raíz del tema) tanto del Tema Padre como del Tema Hijo.

Asegúrate de que tu Tema Hijo esté activado y añade tus estilos CSS al archivo style.css del Tema Hijo.

Asegúrate de usar el inspector para identificar fácilmente las reglas CSS. Sobrescribir las reglas CSS del Tema Padre puede ser complicado en ocasiones. Usar !important puede ayudar a sobrescribir algunas de las reglas CSS del Tema Padre.

Ejemplo de uso de !important en CSS

Supongamos que el Tema Padre define esta regla:

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

Podrías sobrescribir forzosamente esa regla en tu Tema Hijo de esta manera:

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

Michael Ecklund

6.8K

23 ene 2017 19:26:55

Comentarios

Gracias, Michael. Verifiqué nuevamente que mi tema hijo está activado y que mi CSS fue añadido únicamente a mi tema hijo. ¿Dónde debería escribir "!important" en mi CSS para anular mi Tema Padre?

Sakena

23 ene 2017 19:40:08

He actualizado mi respuesta con un ejemplo de uso.

Michael Ecklund

23 ene 2017 19:45:55

Ten en cuenta el nuevo cuarteto a partir de WP 4.7:

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

vino a reemplazar el antiguo cuarteto:

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

En el respectivo orden. La ventaja es la mejor convención de nomenclatura.

prosti

4.31K

16 feb 2017 20:26:59

Nathan Johnson 6.53K · Accepted Answer · 2017-01-23T20:00:19Z

No es necesario agregar más código en tu archivo functions.php para encolar los estilos CSS del tema padre desde tu tema hijo. El problema es que al agregar ese código, estás encolando los estilos CSS del tema padre por segunda vez, pero ahora se cargan después del tema hijo. Esto significa que todos los cambios que hayas hecho en el tema hijo no tendrán efecto.

Simplemente elimina esa línea y deberías ver los cambios en tu tema hijo.

Agregado: Aquí están los dos archivos que usé con solo lo básico para encolar correctamente los estilos CSS del tema hijo.

Archivo style.css:

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

Archivo functions.php:

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

Nathan Johnson

6.53K

23 ene 2017 20:00:19