Temas secundarios Problemas prioritarios de CSS sin usar! Important

Cambié mi sitio de WordPress para usar temas secundarios, pero el estilo del tema principal tiene prioridad sobre cualquier cambio que realice en el CSS del tema secundario. Puedo !importantsolucionarlo usando , sin embargo, esta es una solución irregular y los temas secundarios deberían funcionar como el primer recurso del sitio.

Por ejemplo, en mi sitio , el borde que incluye .wp-captiones del mismo color que el fondo usando la !importantetiqueta, pero no funcionará sin él.

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

css child-theme

— Dharkov
fuente

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

— Milo

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

— Dharkov

parece que la hoja de estilo del tema secundario se carga muy temprano, ¿la está poniendo en cola o agregando la etiqueta de enlace directamente al encabezado? se debe colocar en cola para que aparezca después de la hoja de estilo principal, para que pueda usar los mismos selectores CSS para anular el elemento primario sin una especificidad importante o superior. ver la respuesta de rambillo a continuación.

— Milo

Respuestas:

Intenta poner en cola el CSS de tu tema secundario de esta manera:

// Queue parent style followed by child/customized style
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' ) );
}

Observe algunas cosas:

1) PHP_INT_MAX como prioridad para que esto se ejecute

2) get_stylesheet_directory_uri () vs. get_template_directory_uri () que apuntará a la carpeta de plantillas del tema secundario en lugar de a los padres.

También agregué una subcarpeta allí /styles/porque normalmente mantengo mi CSS en una subcarpeta de mi tema.

3) seguido de array( 'parent-style' )hacer que el CSS secundario tenga el CSS primario como una dependencia, lo que tiene el efecto de poner el tema primario primero en la cabeza y el CSS del tema secundario después. Debido a eso, lo que aparezca también en el tema secundario que ya está en el tema primario sobrescribirá la versión del tema primario.

— rambillo
fuente

Muchas gracias, la nueva matriz funciona perfectamente y también es más limpia y más clara.

— Dharkov

Todavía no funciona ... tan raro. 40 minutos y 20 tutoriales al menos sobre el tema de veinte y dieciséis años. No se pueden anular los estilos. body, select { color: red !important; font-size:200% !important; }

— roberthuttinger

Siga adelante y publique un codepen, y lo echaremos un vistazo.

— rambillo

PHP_INT_MAX lo resolvió en mi caso. Obliga a cargar el CSS del niño después del padre.

— mefiX

roberthuttinger ¿alguna vez resolviste este problema?

— gjnave

Respuesta TLDR: el primer parámetro de cada uno wp_enqueue_style()no debe dejarse como 'estilo principal' y 'estilo secundario'. Deben renombrarse para que coincidan con el nombre del tema principal y su hijo.

Problema

Si no cambia el nombre de los parámetros, obtendrá el tema secundario en cola por segunda vez, lo que puede provocar que las reglas aparezcan dos veces en Firebug y que los valores cambiados en el incorrecto no tengan un efecto aparente, lo que puede engañarlo para que piense que sus reglas secundarias no t anular al padre.

La expectativa

La página del Codex sobre Temas secundarios dice correctamente que si no hace nada, el CSS secundario se vincula automáticamente. Lo hace, pero solo eso. El flujo de trabajo de CSS es un poco diferente: desea anular, no reemplazar. Es lógico (funciona como los otros archivos de tema) pero podrían haber tenido una nota.

Solución

Renombrar los parámetros. Lo hago como a continuación para obtener (un poco) más control, tenga en cuenta que debe reemplazar twentysixteen y twentysixteen-child con los nombres de su tema y tema hijo:

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

    //...custom queueing of .js and .css for Javascript plugins and such here

    //LAST
    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 tenga en cuenta que no obtiene el control del orden de enlace de algunos (¿todos?) Complementos de WP en esta acción. Se vinculan después).

Happy selector-hunting;)

— Henrik Erlandsson
fuente

Me parece que esta es la respuesta correcta porque está usando correctamente el marco de Wordpress sin forzar nada.

— cuasi

Puede usar un selector más específico en el CSS de su tema secundario para que tenga prioridad.

Entonces en lugar de:

.wp-caption {
     fondo: # 2d2d2d! importante;
}

Utilizar:

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

También querrás asegurarte de poner en cola la hoja de estilo de tu tema secundario en tu archivo functions.php si aún no lo has hecho.

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

— Twodogstar
fuente