¿cómo puedo poner en cola la hoja de estilo de mi hijo / s * después de * cada hoja de estilo / declaración de los padres?

9

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

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

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

un estudio más a fondo del problema muestra que se pueden poner en cola varias hojas de estilo y estilos de Padres 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 de 'style.css' 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 secundarias. para asegurarme de que esté cargado después de todas de las otras reglas, lo 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 lo que significa '/parent-theme/style.css ? MRPreviewRefresh = 723 '?

Actualizar

wp_enqueue_style () no parece funcionar en wp_head ().

saludos,
Gregory

    
pregunta Gregory 05.05.2012 - 19:18

3 respuestas

17

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

Dicho esto, aquí es donde pienso que estás teniendo un problema: Enología Encola dos hojas de estilo:

  1. style.css , directamente en el encabezado del documento (por lo tanto, antes wp_head() se dispara)
  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 el "aspecto", se pone en cola con la prioridad 11 , para garantizar que la hoja de estilo base, style.css , carga primero , y la hoja de estilo varietal se carga segundo , para causar la cascada correcta.

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

Editar

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

Para anular una cola de la hoja de estilos del tema principal, debe saber dos cosas:

  1. El gancho de acción en el que se encola la hoja de estilos
  2. La prioridad en la que se agrega la devolución de llamada al enlace
Las

funciones de puesta en cola ( wp_enqueue_script() / wp_enqueue_style() ) pueden ejecutarse correctamente en cualquier lugar entre el gancho init y los ganchos wp_print_scripts / wp_print_styles . (El gancho semánticamente correcto en el que se ejecutan las funciones wp_enqueue_*() actualmente es wp_enqueue_scripts .) This la 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_styles y wp_print_scripts all fire inside de wp_head , con una prioridad específica .

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

  • Encolar la hoja de estilo del tema principal, a través de wp_dequeue_style( $handle )
  • Eliminar la devolución de llamada del tema principal que pone en cola el estilo, a través de remove_action( $hook, $callback )
  • Use la cascada de CSS para override la hoja de estilo del tema principal, conectando su hoja de estilo de tema infantil wp_enqueue_style() call en el mismo enlace con una menor prioridad 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} )'
    
respondido por el Chip Bennett 09.05.2012 - 18:27
1

Debería siempre usar wp_enqueue_style() para cargar su hoja de estilo y esas funciones deben estar enganchado al wp_enqueue_scripts con se ejecuta en la cabeza . Sospecho que no lo estaba enganchando allí, de ahí su problema. (A partir de WP 3.3, si wp_enqueue_style() está enganchado a otra cosa, lanza un Aviso con WP_Debug activado).

    
respondido por el mrwweb 09.05.2012 - 17:22
1

la única forma de garantizar que mis estilos tuvieran la última palabra en la cascada era incluirlos al final de < head > a través del gancho 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 establecer mis estilos con relativa facilidad y sin usar altos niveles de especificidad, o la regla importante que solo debe usarse como último recurso.

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

Actualizar

He podido mantener el control de los estilos en el tema de mi hijo mientras mantenía la cascada original del tema principal (que utiliza una hoja de estilo principal, una hoja de sub-estilo y algunas declaraciones de estilo) al dividir mi hoja de estilo en dos como se explica en la pregunta. Ya no uso el gancho wp_head (), sino el gancho wp_enqueue_scripts () adecuado y estándar con un alto ordinal para asegurar que mi hoja de estilo se cargue por última vez.

hoja de estilo por defecto 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 considerar el uso de reglas CSS de alta especificidad para anule las reglas que me preocupan o busque enlaces para deshabilitarlas, en particular la regla body.custom-background.

Gracias a todos por sus comentarios.

saludos,
Gregory

    
respondido por el Gregory 06.05.2012 - 04:32

Lea otras preguntas en las etiquetas