¿Cómo coloco en cola mi / s hoja / s de estilo secundaria / s * después * de cada hoja / estilo principal / declaración?

11

Estoy usando el tema de enología bien escrito de Chip Bennett como el tema principal de mi propio hijo.

En mi proceso de desarrollo, descubrí que existen algunos desafíos para las personas que escriben temas infantiles cuando se trata de controlar los estilos.

Acabo de descubrir que mi archivo style.css principal se carga antes que cualquier otro enlace o declaración de hoja de estilo en <head>, y esto explica por qué estaba teniendo problemas para anular algunos de los estilos Parent.

Un estudio más detallado del problema muestra que varias hojas de estilo y estilos principales 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 simplificar las cosas, planeo crear dos hojas de estilo. la primera hoja principal 'style.css' solo incluiría el @import url()comando, necesario para cargar la hoja de estilo principal de Oenology.

la segunda hoja de estilo contendría las reglas de mi hijo. para asegurarme de que se carga después de todas las otras reglas, lo pondría en cola usando add_action( 'wp_head',.

¿Suena esto razonable? o hay una manera mejor (más correcta) de hacerlo?

Por cierto, ¿alguien sabe lo que significa '/parent-theme/style.css ? MRPreviewRefresh = 723 '?

Actualizar

wp_enqueue_style () no parece funcionar en wp_head ().

saludos,
Gregory

child-theme  css  parent-theme 
— Gregory
fuente

Respuestas:

21

Solo para su información, esta pregunta probablemente limita demasiado localizada , ya que es específica del tema de la enología.

Dicho esto, aquí es donde creo que tienes un problema: la enología pone en cola dos hojas de estilo:

  1. style.css, directamente en el encabezado del documento (por lo tanto, antes de wp_head() ser despedido)

  2. {varietal}.css, en wp_enqueue_scripts, con prioridad 11, en functions/dynamic-css.php:

    /**
 * Enqueue Varietal Stylesheet
 */
function oenology_enqueue_varietal_style() {

// define varietal stylesheet
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 );
}
// Enqueue Varietal Stylesheet at wp_print_styles
add_action('wp_enqueue_scripts', 'oenology_enqueue_varietal_style', 11 );

La hoja de estilo varietal, que aplica la "máscara", se pone en cola de manera prioritaria 11, para garantizar que la hoja de estilo base se style.csscargue primero y la hoja de estilo varietal se cargue en segundo lugar , para provocar la cascada correcta.

Entonces, si necesita anular la hoja de estilo varietal , simplemente coloque en cola su segunda hoja de estilo después de la hoja de estilo varietal; es decir, con una prioridad de al menos 12o mayor.

Editar

Para proporcionar una respuesta más general, a la pregunta más general:

Para anular una cola de hoja de estilo Tema principal, debe saber dos cosas:

  1. El gancho de acción en el que se pone en cola la hoja de estilo
  2. La prioridad a la que se agrega la devolución de llamada al enlace

Las funciones en cola ( wp_enqueue_script()/ wp_enqueue_style()) se pueden ejecutar correctamente en cualquier lugar entre el initgancho y los wp_print_scripts/ wp_print_stylesganchos. (El enlace semánticamente correcto para ejecutar las wp_enqueue_*()funciones es actualmente wp_enqueue_scripts). Esta lista incluye las siguientes acciones (entre otras; estos son solo los sospechosos habituales):

  • init
  • wp_head
  • wp_enqueue_scripts
  • wp_print_scripts/ /wp_print_styles

(Tenga en cuenta que wp_enqueue_scripts, wp_print_stylesy wp_print_scripts todo el fuego dentro de wp_head, en una prioridad específica .

Por lo tanto, para anular una hoja de estilo Tema principal, debe realizar una de las siguientes acciones:

  • Quite la cola de la hoja de estilo del tema principal, a través dewp_dequeue_style( $handle )
  • Elimine la devolución de llamada del tema principal que pone en cola el estilo, a través deremove_action( $hook, $callback )

  • Use la cascada CSS para anular la hoja de estilo Tema principal, enganchando la wp_enqueue_style()llamada de la hoja de estilo Tema infantil en el mismo enlace con una prioridad inferior o en un enlace posterior .

    Para esta última opción, si el Tema principal utiliza:

    `add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_style', $priority )`

    ... entonces el Tema Infantil usaría:

    `add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} )`
— Chip Bennett
fuente
gracias Chip. De hecho, puedo usar wp_enqueue_scripts y un ordinal alto para que mi hoja de estilo Child se cargue al final. Sin embargo, todavía hay 3 declaraciones de estilo diferentes después de mi declaración de hoja de estilo secundaria. ¡2 de ellos son emitidos por el propio WP!, Y 1 es emitido por Enología a través de la función add_custom_image_header () de wp.
— Gregory
WP emite la declaración de estilo body.custom-background, pero parece que puedo especificar un color de fondo personalizado definiendo 'BACKGROUND_COLOR'. Es extraño que una regla css básica deba establecerse a través de una constante WP personalizada.
— Gregory
1
último comentario Chip. Esta pregunta no está demasiado localizada. muchos temas usarían todos los ganchos disponibles para poner en cola o imprimir estilos, y los desarrolladores de temas secundarios necesitan saber cómo anular esos estilos sin deshabilitarlos necesariamente. salud.
— Gregory
El problema que veo con esto es que child_theme_enqueue_style cargará el estilo secundario con una prioridad más alta, más abajo en wp_head PERO duplicará la hoja de estilo secundaria: Wordpress cargará automáticamente la hoja de estilo secundaria en su prioridad normal y luego, la cargará nuevamente, más abajo con la nueva prioridad. Si bien logra el resultado de anular todas las demás hojas de estilo, crea una hoja de estilo duplicada en la página.
— php-b-grader
2

la única forma de garantizar que mis estilos tengan la última palabra en la cascada fue incluirlos al final de <head> a través del enlace wp_head. wp_enqueue no funciona dentro de wp_head, así que tuve que repetir el enlace 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 configurar mis estilos con relativa facilidad y sin usar altos niveles de especificidad, o la importante regla que solo debe usarse como último recurso.

WP necesita un mejor estilo de sistema en cola. cada estilo, ya sea un enlace de archivo o un estilo en línea, debe pasarse por el mismo gancho, permitiendo que la Prioridad determine su orden. opcionalmente para propósitos de depuración, sería útil si el enlace también generara los valores de Prioridad de cada estilo tal vez en forma comentada.

Actualizar

He podido mantener el control de los estilos en mi tema Child mientras mantengo la cascada original del tema Parent (que usa una hoja de estilo principal, una hoja de estilo secundaria y algunas declaraciones de estilo) dividiendo mi hoja de estilo en dos como se explica en la pregunta. Ya no estoy usando el gancho wp_head (), sino el gancho wp_enqueue_scripts () apropiado y estándar con un ordinal alto para asegurar que mi hoja de estilo se cargue al final.

hoja de estilo predeterminada del tema de mi hijo:

/*
Theme Name: Oenology-Gregory
Template: oenology
Version: 20120506-0026
*/

@import url("/wp-content/themes/oenology/style.css");

la función para poner en cola mi hoja de estilo 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 el tema principal) que se indican después de mi hoja de estilo, y tendré que analizar el uso de reglas CSS de alta especificidad para anular las reglas que me conciernen, o buscar ganchos para deshabilitarlos, en particular la regla body.custom-background.

Gracias a todos por sus comentarios.

saludos,
Gregory

— Gregory
fuente
1

Usted debe siempre utiliza wp_enqueue_style()para cargar su hoja de estilo y que las funciones debe estar enganchado a la wp_enqueue_scripts gancho con carreras en la cabeza . Sospecho que no lo estabas conectando allí, de ahí tu problema. (A partir de WP 3.3, si wp_enqueue_style()está conectado a cualquier otra cosa, arroja un aviso con WP_Debug activado).

— mrwweb
fuente
La respuesta de @ Chip es mejor que la mía y podría decirse que está más calificado para discutir el tema de la enología;) ¿Es este un caso en el que debería eliminar mi respuesta a pesar de que es correcta?
— mrwweb
No, dejaría tu respuesta. Es correcto y aborda una parte específica de la pregunta.
— Chip Bennett
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.