Esta publicación presenta algunas preguntas que he encontrado sobre los cambios recientes en los métodos de puesta en cola de la hoja de estilo presentados en este hilo y este hilo .
Los problemas que encontré surgieron en un escenario de caso de uso general, utilizando un tema principal ampliamente utilizado y bien mantenido que está específicamente preparado para un tema secundario en una instalación de WP 4.0. Las funciones.php de mi tema hijo solo contienen la wp_enqueue_stylefunción como se detalla en el Codex .
Tenga en cuenta que si bien el código al que se hace referencia a continuación es específico de este tema, gran parte utiliza las convenciones de codificación actuales utilizadas por los temas principales. Además, mis áreas de preocupación son probablemente duplicables en una gran cantidad de temas principales establecidos actualmente en estado salvaje. Además, las preguntas que plantean son aplicables a nivel universal, independientemente de qué tema principal se esté utilizando.
PROBLEMA 1: dos colas
La configuración recomendada:
El tema principal está poniendo en cola estilos y scripts usando el wp_enqueue_scriptsgancho, la porción relevante es la siguiente:
add_action('wp_enqueue_scripts', 'parent_theme_function_name');
function parent_theme_function_name() {
wp_register_style( 'avia-style' , $child_theme_url."/style.css", array(), '2', 'all' );
wp_enqueue_style( 'avia-base');
if($child_theme_url != $template_url) { wp_enqueue_style( 'avia-style'); }
}El tema de mi hijo functions.phppone en cola estilos por cambios recientes del códice:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
}Tenga en cuenta los siguientes identificadores como los usa el código referenciado:
id='dm-parent-style-css'es la hoja de estilo del tema principal, tal como lo puso en cola la función del tema secundarioid='avia-style-css'es la hoja de estilo del tema de mi hijo, tal como lo puso en cola la función del tema principalid='dm-child-style-css'es la hoja de estilo del tema de mi hijo, tal como lo puso en cola la función del tema de mi hijo
Los resultados:
A primera vista, todo estaba bien, con el <head> mostrando el siguiente orden:
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />Después de instalar un complemento, el orden de la cola ahora cambió de la siguiente manera:
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->En última instancia, necesito que se cargue el CSS del tema secundario después de los complementos, por lo que me vi obligado a agregar un número de prioridad a la función en el tema secundario (consulte la discusión anterior sobre el número de prioridad) .
Debido a que mi función solo pone en cola el css del tema principal, sin embargo, el resultado es que ahora el tema principal css se mueve hasta el final, dejando el css del tema secundario en una situación aún peor que antes.
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />Ahora me veo obligado a recurrir a la puesta en cola de mi estilo de tema infantil también, para asegurarme de que se mueva al frente de la línea, causando el problema antes mencionado de twoqueueing (new term? Lol) the child theme css.
La configuración obsoleta:
Función revisada en el tema hijo:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}Los resultados:
Produciendo el siguiente orden en <head>:
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />A pesar de que incluir la hoja de estilo secundaria en mi función causó que se pusiera en cola dos veces, en mi humilde opinión, es preferible a la codificación bajo el supuesto de que el tema principal pondrá en cola adecuadamente nuestra hoja de estilo secundaria para nosotros. Según los ID asignados a cada estilo en cola, parece que el tema principal lo pone en cola, no nada en WP Core.
Mi shivm:
Aunque difícilmente sugeriría que este sea el medio recomendado (y estoy seguro de que los desarrolladores con más experiencia en codificación de lo que yo gemiré ante esta solución), eliminé el ID del tema principal (utilizado para poner en cola el estilo del tema de mi hijo) justo por encima de mi propia cola. en el archivo de funciones de mi tema hijo como se muestra:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
wp_dequeue_style( 'avia-style' );
wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}Los resultados:
Esto resolvió los problemas en cuestión, lo que resultó en:
<!-- Multiple individual parent theme styles here -->
<!-- Plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />Por supuesto, esto requería conocer la ID utilizada por el tema principal: se necesitaría algo más genérico para ser utilizado como metodología estándar de desarrollo de temas secundarios.
PROBLEMA 2: Hojas de estilo secundarias reubicadas
(Parece difícil de creer que esto no haya aparecido en otro hilo, aunque no vi ninguno específico al mirar ... si me lo perdí, siéntase libre de llamar mi atención).
Yo no utilizar el valor por defecto style.cssen el directorio raíz tema infantil para mis estilos de tema - es obvio que tiene que estar allí, pero todos mis estilos actuales han sido recopilados de SCSS como un archivo .css en un minified / css / directorio. Aunque me doy cuenta de que esta no es "la norma esperada" a nivel universal para el desarrollo de temas secundarios, la mayoría de los desarrolladores serios de WordPress que conozco hacen algo similar. Esto, por supuesto, requiere poner en cola manualmente esa hoja de estilo en mi función, independientemente de si el tema principal la puso en cola o no.
Para resumir todo esto...
- ¿Es seguro incluir la suposición de que los temas principales ponen en cola adecuadamente los estilos de temas secundarios, desde el punto de vista de los estándares de temas secundarios?
- Eliminar la prioridad podría crear más confusión para parte de la comunidad de WordPress, cuando los estilos de temas secundarios comienzan a sobrescribirse con un complemento. Esperamos que los temas sobrescriban los estilos, pero no tanto con los complementos.
- Cuando se utiliza una hoja de estilo personalizada para los estilos de tema secundarios reales (como se supone que los coloca en los predefinidos
style.css), se hace necesario poner en cola ese archivo manualmente. En términos de mantener la continuidad en un amplio espectro de desarrolladores, ¿no tendría sentido alentar la puesta en cola manual de la hoja de estilo secundaria independientemente del posible duplicado?
fuente
Respuestas:
PREGUNTA 1
Regla general, sí. Pero , nunca debes asumir . La mayoría de los desastres y fallas en vivo se deben a suposiciones o hechos basados en una suposición
HECHOS SIN SUPUESTOS
Las funciones de un tema secundario se cargan primero, luego las funciones del padre. Esto garantiza que la hoja de estilo principal del tema principal se cargue antes que la hoja de estilo principal del tema secundario del código actualizado en el códice
Veamos el tema incluido, veintiocho. La magia sucede aquí
wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );. Así es como se pone en cola la hoja de estilo principal. Cuando el tema está activo como tema principal, el style.css se cargará desde el tema principal como seget_stylesheet_uri()indicará en el estilo principal del directorio principal.Cuando cambia a un tema secundario,
get_stylesheet_uri()"cambia" su ruta para que apunte al style.css del tema secundario, lo que significa que en lugar dewp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );cargar el style.css primario, ahora carga el style.css secundario.Todos los demás estilos del tema principal se cargan de manera normal en el orden en que se escribieron
AGUJEROS
Estilos en línea y hojas de estilo que se agregan directamente a su plantilla de encabezado. He hecho algunas pruebas sobre este tema. Si la hoja de estilo principal no se pone en cola usando
wp_enqueue_scriptsy cargada directamente en el encabezado, entonces la hoja de estilo principal del tema secundario se carga primero. Como solución alternativa aquí, anteriormente he recomendado copiar el header.php del padre al tema hijo y eliminar esas llamadas. Luego tendrá que poner en cola los estilos de tema principal y secundario y cualquier otra hoja de estilo que se haya cargado directamente en el header.php como se describe en la función OP depreciadaMe he encontrado con esto una o dos veces, donde los estilos (y los scripts) se cargan directamente en el encabezado, y debido a esto
wp_headse omite la llamada a . Esto hará que la acción en cola falle en silencio, por lo que sus estilos simplemente no aparecerán.Se establecieron prioridades incorrectas. No es necesario establecer prioridades para las acciones primarias y secundarias cuando conecta las funciones de enqueueu. Cuando ambos tienen la misma prioridad predeterminada, se aplica la regla de primer orden de llegada. Esto asegurará que el orden de carga sea correcto
NOTA PARA LOS PADRES TEMA AUTORES
El método apropiado aceptado para agregar estilos y scripts a un tema es a través del
wp_enqueue_scriptsgancho de acción. Nunca agregue estilos y scripts directamente en la plantilla del encabezado, y no establezca ninguna prioridad en su acción cuando conecte su funciónSiempre cargue también la hoja de estilo principal de la siguiente manera:
Esto garantizará que la hoja de estilo principal del niño se cargue cuando se esté utilizando un tema secundario.
SU RESPONSABILIDAD COMO AUTOR TEMA INFANTIL
Tómese su tiempo y trabaje en el tema principal. Conozca el tema principal, asegúrese de sentirse cómodo con las estructuras del tema y cómo se utilizan las funciones y los ganchos en el tema. No puede crear un tema secundario exitoso si no tiene conocimiento interno de cómo funciona el tema principal. Es su responsabilidad asegurarse de que los estilos y las secuencias de comandos se carguen correctamente para que su código funcione como se espera.
Siempre avise al autor del tema principal de cualquier código con el que no esté satisfecho. Por ejemplo, si el autor agregó sus estilos directamente al encabezado, avísele de eso y hágale saber que esta es la forma incorrecta de hacerlo, y pídale que lo corrija en una versión futura.
PREGUNTA 2
Desafortunadamente no hay un método directo para salvaguardar esto. El punto de hecho aquí es que los estilos de complementos nunca deberían sobrescribir los estilos de tema predeterminados sin el consentimiento del usuario final. En mi opinión, esto es solo una mala práctica o negligencia del autor del complemento. Sugeriría que, en un caso como este, contacte al autor del complemento y haga que esté alerta sobre esto
También siempre tiene la opción de retirar y cancelar el registro de un estilo (y secuencia de comandos) que no necesita, o que necesita cambiar la prioridad y solicitarlos y volver a registrarlos como en su código anterior (que está perfectamente bien). Solo una nota sobre su shivm , es una buena práctica eliminar y eliminar el registro de un estilo y guión.
PREGUNTA 3
No creo que haya una respuesta directa en blanco y negro a este problema. Yo respondería diciendo: haz lo que te resulte cómodo siempre que esté dentro de una determinada directriz que rija la acción.
Las hojas de estilo no están ahí para agregar funcionalidad, pero sí para agregar experiencia visual al usuario. Los estilos también se envían directamente como están al navegador donde se procesan. Wordpress no juega ningún papel aquí.
Basado en este hecho, realmente no veo ninguna señal de alerta roja al cargar una hoja de estilo dos veces. Sin embargo, esto podría costar unos pocos milisegundos en rendimiento. Para ser honesto, aparte de esto, no estoy realmente seguro de cómo se manejan los duplicados en los diferentes navegadores. Esto es algo que usted como lector puede probar
En mi humilde opinión, los duplicados nunca son buenos y siempre deben evitarse. Sugeriría que si realmente desea poner en cola manualmente la hoja de estilo principal del niño por cualquier razón, debe usar su código en su shivm . Elimine y anule el registro del duplicado agregado de forma predeterminada y luego vuelva a colocar la hoja de estilo de manera normal.
Solo una cosa para recordar también, las funciones de cola y registro tienen un
$dependancyparámetro que también puede utilizar. Por lo tanto, es fácil cargar una hoja de estilo secundaria y hacerla dependiente de la hoja de estilo principal del tema de su hijoEN CONCLUSIÓN
Desde la reciente actualización del códice, los comentarios han sido asombrosos y me gustaría agradecer los comentarios de todos sobre esto. Me gustaría animar a todos a participar en cualquier tipo de comentarios a esta pregunta en particular. Si tiene algo que agregar o comentar, hágalo.
fuente