¿Cómo poner en cola mis hojas de estilo del tema hijo *después* de cada hoja de estilo/declaración del tema padre?
Estoy usando el bien escrito tema Oenology de Chip Bennett como tema padre para mi propio tema hijo.
En mi proceso de desarrollo, he descubierto que hay algunos desafíos para las personas que escriben temas hijos cuando se trata de controlar los estilos.
Acabo de descubrir que mi archivo style.css principal se carga antes que cualquier otro enlace u declaración de hoja de estilos en <head>, y esto explica por qué estaba teniendo problemas para sobrescribir algunos de los estilos del tema padre.
Un estudio más detallado del problema muestra que varias hojas de estilo y estilos del tema padre se pueden poner en cola en el <head> en tres lugares; add_action('wp_print_styles',
, add_action('wp_enqueue_scripts',
, y luego add_action('wp_head',
.
Para mantener las cosas simples, planeo crear dos hojas de estilo. La primera hoja 'style.css' principal solo incluiría el comando @import url()
, necesario para cargar la hoja de estilo principal de Oenology.
La segunda hoja de estilo contendría mis reglas del tema hijo. Para asegurarme de que se cargue después de todas las otras reglas, la pondría en cola usando add_action( 'wp_head',
.
¿Esto suena razonable? ¿O hay una manera mejor (más correcta) de hacerlo?
Por cierto, ¿alguien sabe qué significa '/parent-theme/style.css?MRPreviewRefresh=723'?
Actualización
wp_enqueue_style() parece no funcionar en wp_head().
Saludos,
Gregory

Solo para tu información, esta pregunta probablemente raya en lo demasiado localizado, ya que es específica del tema Oenology.
Dicho esto, aquí es donde creo que estás teniendo el problema: Oenology encola dos hojas de estilo:
style.css
, directamente en el encabezado del documento (por lo tanto, antes de que se activewp_head()
){varietal}.css
, enwp_enqueue_scripts
, con prioridad11
, enfunctions/dynamic-css.php
:/** * Encolar hoja de estilo varietal */ function oenology_enqueue_varietal_style() { // definir hoja de estilo varietal global $oenology_options; $oenology_options = oenology_get_options(); $varietal_handle = 'oenology_' . $oenology_options['varietal'] . '_stylesheet'; $varietal_stylesheet = get_template_directory_uri() . '/varietals/' . $oenology_options['varietal'] . '.css'; wp_enqueue_style( $varietal_handle, $varietal_stylesheet ); } // Encolar hoja de estilo varietal en wp_print_styles add_action('wp_enqueue_scripts', 'oenology_enqueue_varietal_style', 11 );
La hoja de estilo varietal, que aplica el "skin", se encola con prioridad 11
, para asegurar que la hoja de estilo base, style.css
, se cargue primero, y la hoja de estilo varietal se cargue después, para causar la cascada correcta.
Entonces, si necesitas sobrescribir la hoja de estilo varietal, simplemente encola tu segunda hoja de estilo después de la hoja de estilo varietal; es decir, con una prioridad de al menos 12
o mayor.
Edición
Para proporcionar una respuesta más general, a la pregunta más general:
Para sobrescribir una hoja de estilo encolada por el Tema Padre, necesitas saber dos cosas:
- El hook de acción en el que se encola la hoja de estilo
- La prioridad con la que se añade el callback al hook
Las funciones de encolado (wp_enqueue_script()
/wp_enqueue_style()
) pueden ejecutarse correctamente en cualquier lugar entre el hook init
y los hooks wp_print_scripts
/wp_print_styles
. (El hook semánticamente correcto para ejecutar las funciones wp_enqueue_*()
es actualmente wp_enqueue_scripts
.) Esta lista incluye las siguientes acciones (entre otras; estas son solo las sospechosas habituales):
init
wp_head
wp_enqueue_scripts
wp_print_scripts
/wp_print_styles
(Ten en cuenta que wp_enqueue_scripts
, wp_print_styles
y wp_print_scripts
se activan dentro de wp_head
, con una prioridad específica.
Entonces, para sobrescribir una hoja de estilo del Tema Padre, necesitas hacer una de las siguientes acciones:
Desencolar la hoja de estilo del Tema Padre, mediante
wp_dequeue_style( $handle )
Eliminar el callback del Tema Padre que encola el estilo, mediante
remove_action( $hook, $callback )
Usar la cascada CSS para sobrescribir la hoja de estilo del Tema Padre, enganchando tu llamada a
wp_enqueue_style()
del Tema Hijo en el mismo hook con una prioridad más baja o en un hook posterior.Para esta última opción, si el Tema Padre usa:
add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_style', $priority );
...entonces el Tema Hijo usaría:
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} );

gracias Chip. Efectivamente puedo usar wp_enqueue_scripts y un orden alto para que mi hoja de estilos del Child se cargue al final. Sin embargo, todavía hay 3 declaraciones de estilo diferentes después de mi declaración de hoja de estilos del Child. ¡¡2 de ellas son generadas por WP mismo!!, y 1 es generada por Oenology a través de la función add_custom_image_header() de WP.

la declaración de estilo body.custom-background es generada por WP mismo, pero parece que puedo especificar un color de fondo personalizado definiendo 'BACKGROUND_COLOR'. Es extraño que una regla básica de CSS necesite establecerse mediante una constante personalizada de WP.

último comentario Chip. esta pregunta no es demasiado localizada. muchos temas usarían todos los hooks disponibles para encolar o imprimir estilos, y los desarrolladores de temas Child necesitan saber cómo sobrescribir esos estilos sin necesariamente deshabilitarlos. saludos.

El problema que veo con esto es que child_theme_enqueue_style cargará el estilo del child theme con una prioridad más alta, más abajo en el wp_head PERO duplicará la hoja de estilos del child theme - WordPress cargará automáticamente la hoja de estilos del child theme con su prioridad normal y luego, la cargará nuevamente, más abajo con la nueva prioridad. Si bien logra el resultado de sobrescribir todas las otras hojas de estilos, crea una hoja de estilos duplicada en la página.

la única forma de garantizar que mis estilos tuvieran la última palabra en la cascada era incluirlos al final de <head> mediante el hook wp_head. wp_enqueue no funciona dentro de wp_head, así que tuve que hacer echo del link directamente:
function gregory_enqueue_stylesheets() {
$base = get_stylesheet_directory_uri();
echo '<link rel="stylesheet" href="'.$base.'/style-gregory.css" type="text/css" media="all">';
return;
}
add_action( 'wp_head', 'gregory_enqueue_stylesheets', 18 );
finalmente, puedo establecer mis estilos con relativa facilidad, y sin usar altos niveles de especificidad, o la regla !important que solo debería usarse como último recurso.
WP necesita un mejor sistema para encolar estilos. todos los estilos, ya sea un enlace a archivo o estilos en línea, deberían pasar por el mismo hook permitiendo que la Prioridad determine su orden. Opcionalmente, para propósitos de depuración, sería útil si el hook también mostrara los valores de Prioridad de cada estilo, quizás en forma de comentarios.
Actualización
He podido mantener el control de los estilos en mi tema hijo mientras conservo la cascada original del tema padre (que usa una hoja de estilos principal, una sub-hoja de estilos y algunas declaraciones de estilo) dividiendo mi hoja de estilos en dos como se explica en la pregunta. Ya no estoy usando el hook wp_head(), en su lugar uso el hook propio y estándar wp_enqueue_scripts() con un número alto para asegurar que mi hoja de estilos se cargue al final.
la hoja de estilos por defecto de mi tema hijo:
/*
Theme Name: Oenology-Gregory
Template: oenology
Version: 20120506-0026
*/
@import url("/wp-content/themes/oenology/style.css");
la función para encolar mi hoja de estilos principal:
function gregory_enqueue_stylesheets() {
$base = get_stylesheet_directory_uri();
wp_enqueue_style( 'style-gregory', $base.'/style-gregory.css' );
return;
}
add_action( 'wp_enqueue_scripts', 'gregory_enqueue_stylesheets', 18 );
sin embargo, hay algunas declaraciones de estilo generadas por WP (es decir, no del tema padre) que se declaran después de mi hoja de estilos, y tendré que ver si uso reglas CSS de alta especificidad para sobrescribir las reglas que me preocupan, o buscar hooks para desactivarlas, en particular la regla body.custom-background.
gracias a todos por sus comentarios.
saludos,
Gregory

Debes siempre usar wp_enqueue_style()
para cargar tu hoja de estilos y esa función debe estar enganchada al hook wp_enqueue_scripts que se ejecuta en el head. Sospecho que no lo estabas enganchando ahí, de ahí tu problema. (A partir de WP 3.3, si wp_enqueue_style()
está enganchado a cualquier otra cosa, lanza un Notice con WP_Debug activado).

La respuesta de @Chip es mejor que la mía y podríamos decir que está más cualificado para hablar sobre el tema de Enología ;) ¿Es este un caso en el que debería borrar mi respuesta aunque sea más o menos correcta?
