Problemas de prioridad CSS en temas hijo sin usar !important

Question

Problemas de prioridad CSS en temas hijo sin usar !important

12 feb 2015, 00:18:52

Vistas: 34.6K

Votos: 11

Cambié mi sitio de WordPress para usar temas hijo, pero el estilo del tema padre tiene prioridad sobre cualquier cambio que hago en el CSS del tema hijo. Puedo solucionarlo usando !important, sin embargo, esta es una solución provisional y los temas hijo deberían funcionar como el primer recurso del sitio.

Por ejemplo, en mi sitio, el borde que incluye .wp-caption es del mismo color que el fondo usando la etiqueta !important, pero no funciona sin ella.

¿Tiene esto que ver con el archivo functions.php?

Este es el contenido de mi archivo PHP:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Dharkov

113

css tema hijo

Comentarios

¿cómo estás agregando el style.css de tu tema hijo?

Milo

12 feb 2015 02:18:15

Estoy usando el sistema que WordPress recomienda en esta publicación: http://codex.wordpress.org/Child_Themes

Dharkov

12 feb 2015 03:06:00

parece que tu hoja de estilos del tema hijo se carga muy temprano, ¿la estás poniendo en cola o agregando la etiqueta link directamente en el encabezado? Debe ponerse en cola para que aparezca después de la hoja de estilos del tema padre, así puedes usar los mismos selectores CSS para sobrescribir el padre sin usar !important o mayor especificidad. Mira la respuesta de rambillo más abajo.

Milo

12 feb 2015 03:35:29

Todas las respuestas a la pregunta

Comentarios

Muchas gracias, el nuevo array funciona perfectamente y también es más limpio y claro.

Dharkov

13 feb 2015 19:36:52

todavía no funciona... qué extraño. 40 minutos y al menos 20 tutoriales sobre el tema twentysixteen. No logro que los estilos se sobrescriban. body, select { color: red !important; font-size:200% !important; }

roberthuttinger

8 mar 2016 20:53:37

Adelante, publica un codepen y lo revisaremos.

rambillo

10 mar 2016 08:02:17

PHP_INT_MAX resolvió el problema en mi caso. Obliga a que el CSS del hijo se cargue después del del padre.

mefiX

18 oct 2016 22:41:19

roberthuttinger ¿alguna vez resolviste este problema?

Cognibuild

19 abr 2020 04:49:05

Respuesta rápida: el primer parámetro de cada wp_enqueue_style() no debe dejarse como 'parent-style' y 'child-style'. Deben ser renombrados para que coincidan con el nombre del tema padre y su hijo.

Problema

Si no renombras los parámetros, el tema hijo se encolará por segunda vez, lo que puede resultar en que las reglas aparezcan duplicadas en Firebug y que los cambios realizados en la versión incorrecta no tengan efecto aparente, lo que podría hacerte pensar que tus reglas del tema hijo no están sobrescribiendo las del padre.

Lo esperado

La página del Codex sobre Temas Hijos indica correctamente que si no haces nada, el CSS del hijo se enlaza automáticamente. Así es, pero solo eso. El flujo de trabajo con CSS es un poco diferente: quieres sobrescribir, no reemplazar. Es lógico (funciona como los demás archivos del tema), pero podrían haber incluido una nota al respecto.

Solución

Renombra los parámetros. Yo lo hago como se muestra a continuación para tener (un poco) más control, nota que debes reemplazar twentysixteen y twentysixteen-child con los nombres de tu tema y tema hijo:

function theme_enqueue_scripts() {
    //PRIMERO
    wp_enqueue_style( 'twentysixteen-style', get_template_directory_uri() . '/style.css' );

    //...encolado personalizado de .js y .css para plugins de Javascript y similares aquí

    //ÚLTIMO
    wp_enqueue_style( 'twentysixteen-child-style', get_stylesheet_directory_uri() . '/style.css', array( 'twentysixteen-style' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

(También ten en cuenta que no tienes control sobre el orden de enlace de algunos (¿todos?) los plugins de WP en esta acción. Se enlazan después).

Feliz caza de selectores ;)

Henrik Erlandsson

502

8 abr 2016 17:02:01

Comentarios

Me parece que esta es la respuesta correcta porque utiliza correctamente el framework de WordPress sin forzar nada.

quasi

8 dic 2019 15:09:07

Puedes utilizar un selector más específico en el CSS de tu tema hijo para que tenga prioridad.

En lugar de:


.wp-caption {
     background: #2d2d2d !important;
}

Usa:


.entry .wp-caption {
     background: #2d2d2d;
}

También debes asegurarte de encolar la hoja de estilos de tu tema hijo en tu archivo functions.php si no lo has hecho ya.

http://codex.wordpress.org/Function_Reference/wp_enqueue_style

Twodogstar

1

12 feb 2015 02:06:55

La solución propuesta por Rambillo no funcionó para mí. Hice esto y ahora está bien:

function my_theme_enqueue_styles() {
        wp_enqueue_style( 'name-child-style', get_stylesheet_directory_uri() . '/style.css' );
    }
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', PHP_INT_MAX );

Azodium

101

11 feb 2022 17:08:51

rambillo 357 · Accepted Answer · 2015-02-12T03:17:34Z

Intenta encolar los estilos CSS de tu tema hijo de esta manera:

// Encolar primero el estilo del padre y luego el estilo del hijo/personalizado
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/styles/child-style.css', array( 'parent-style' ) );
}

Observa algunos detalles importantes:

1) PHP_INT_MAX como prioridad para que esto se ejecute al final

2) get_stylesheet_directory_uri() vs. get_template_directory_uri() que apuntará a la carpeta de plantillas del tema hijo en lugar de la del padre.

He añadido una subcarpeta /styles/ porque normalmente mantengo mis CSS en una subcarpeta de mi tema.

3) seguido de array( 'parent-style' ) para hacer que el CSS hijo tenga como dependencia el CSS padre, lo que tiene el efecto de colocar primero el tema padre en el head y luego el CSS del tema hijo. Por esto, cualquier regla que aparezca en el tema hijo y que ya exista en el tema padre sobrescribirá la versión del tema padre.