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?