La prioridad del hook 'wp_enqueue_scripts' no tiene efecto

22 mar 2013, 18:55:17
Vistas: 36.9K
Votos: 8

En un tema en el que estoy trabajando hay hasta 3 hojas de estilo. Estoy usando el hook 'wp_enqueue_scripts'. El orden de las hojas de estilo es importante para sobrescribir estilos. Tengo un código como este:

add_action('wp_enqueue_scripts', 'add_stylesheet_one', 10);
add_action('wp_enqueue_scripts', 'add_stylesheet_two', 14);
add_action('wp_enqueue_scripts', 'add_stylesheet_three', 12);

Con estas prioridades el orden de las hojas de estilo debería ser 'stylesheet_one', 'stylesheet_three' y 'stylesheet_two'. Pero la prioridad no tiene ningún efecto. He probado diferentes números pero el orden no cambia. ¿Me estoy perdiendo algo?

¡¡¡Gracias por la ayuda!!!

1
Comentarios

La prioridad de tu función está siendo respetada, pero después de ser añadidas a la lista, normalmente se reorganizan para respetar las dependencias.

Andy Jacobs Andy Jacobs
23 mar 2013 01:17:29
Todas las respuestas a la pregunta 3
5
16

El problema es que tus acciones se están ejecutando en el orden que percibes, pero los estilos simplemente están siendo recopilados por WordPress e incluidos en un orden aleatorio.

El orden de tus add_actions no será importante. Yo haría esto:

function add_all_stylesheets() {
  // omitiste esto en tu pregunta, ver más abajo
}
add_action('wp_enqueue_scripts', 'add_all_stylesheets');

Ahora bien - si deseas que tus scripts se incluyan en orden, necesitarás que "dependan" unos de otros para que se carguen en cascada.

function add_all_stylesheets() {
  wp_enqueue_style( 'stylesheet-one', get_template_directory_uri() . '/css/stylesheet-one.css' );
  wp_enqueue_style( 'stylesheet-two', get_template_directory_uri() . '/css/stylesheet-two.css', array( 'stylesheet-one' ) );
  wp_enqueue_style( 'stylesheet-three', get_template_directory_uri() . '/css/stylesheet-three.css', array( 'stylesheet-two' ) );
}
add_action('wp_enqueue_scripts', 'add_all_stylesheets');

Ahora tu "stylesheet-two" depende de "stylesheet-one" y "three" depende de "two". Este debería ser el efecto que deseas.

22 mar 2013 19:20:45
Comentarios

Con esto como punto de partida funciona. ¡Gracias! Pero para ser honesto, realmente no responde mi pregunta: :P ¿Por qué la prioridad no tiene efecto?? ¿Hay algunos escollos que deba tener en cuenta? Solo quiero saber esto. Amo Wordpress y quiero conocerlo a fondo :D

Markus Schober Markus Schober
22 mar 2013 20:25:17

Internamente WordPress espera para recolectar todos los scripts antes de incluirlos.

Digamos que WordPress añade 7 de sus propios scripts y luego tú añades tus tres. En algún momento posterior WordPress revisa la lista y los incluye como mejor le parece (determinando qué scripts dependen unos de otros).

No importa en qué orden añadas los tuyos porque el orden se ignora mientras WordPress analiza las dependencias.

Por ejemplo: Añades 3 scripts que necesitan jQuery pero jQuery se añade en cuarto lugar. jQuery se moverá a la primera posición.

Solo puedes garantizar el orden mediante "3 necesita a 2", "2 necesita a 1".

Andy Jacobs Andy Jacobs
23 mar 2013 01:15:14

Ok, lo entiendo. Con dependencias, el parámetro de prioridad en 'add_action' será ignorado. Pero cuando elimino todas las dependencias, la prioridad sigue siendo ignorada. Si uso por ejemplo add_action('wp_head', 'my_function', 5); funciona. ¿Este comportamiento es diferente en algunos hooks?

Markus Schober Markus Schober
23 mar 2013 09:29:26

Voy a intentar aclarar esto una vez más. Tu prioridad no es ignorada. Ese es el orden en el que se añaden a la lista. Pero la lista se reorganiza. Puedes añadirlos en wp_head, y puede funcionar ahora, por pura suerte. Pero si actualizas o añades un plugin, podría fallar. Solo porque se añadan en orden no garantiza que permanezcan en orden. La única forma de garantizar eso es usando dependencias.

Andy Jacobs Andy Jacobs
24 mar 2013 19:00:23

Ok, creo que lo entiendo. :D ¡Gracias por explicarlo!!!!

Markus Schober Markus Schober
25 mar 2013 21:39:41
1

Sé que es un poco tarde, pero ahora funciona como se esperaba.

add_action tiene un tercer argumento que es la prioridad. A continuación, he encolado los scripts con prioridades 10, 12 y 14. Por lo tanto, encola los scripts en el frontend con las prioridades dadas.

Aquí está mi fragmento de código y funciona correctamente.

add_action( 'wp_enqueue_scripts', 'test_enqueue_styles_1', 10 );
add_action( 'wp_enqueue_scripts', 'test_enqueue_styles_2', 14 );
add_action( 'wp_enqueue_scripts', 'test_enqueue_styles_3', 12 );

function test_enqueue_styles_1() {
    wp_enqueue_style( 'font-awesome-1-css', get_template_directory_uri() . 'assets/css/font-awesome.min.css' );
}

function test_enqueue_styles_2() {
    wp_enqueue_style( 'font-awesome-2-css', get_template_directory_uri() . 'assets/css/font-awesome.min.css' );
}

function test_enqueue_styles_3() {
    wp_enqueue_style( 'font-awesome-3-css', get_template_directory_uri() . 'assets/css/font-awesome.min.css' );
}

Secuencia de encolado

test_enqueue_styles_1
test_enqueue_styles_3
test_enqueue_styles_2
19 ago 2016 16:44:57
Comentarios

Votado para la función add_action "Priority" ej., 10

khurram khurram
21 jul 2017 15:36:34
4

Mmm, ¿hay alguna razón por la que lo estés haciendo de esta manera? El método más convencional es el siguiente.

(Lo siguiente asume que tus hojas de estilo están en el directorio css de tu tema).

function my_enqueue_scripts() {
    wp_enqueue_style( 'stylesheet_one', get_template_directory_uri() . '/css/stylesheet_one.css' );
    wp_enqueue_style( 'stylesheet_three', get_template_directory_uri() . '/css/stylesheet_three.css' );
    wp_enqueue_style( 'stylesheet_two', get_template_directory_uri() . '/css/stylesheet_two.css' );
}

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

Dicho esto, no estoy seguro de por qué las prioridades en tu método no funcionan. Probablemente necesitaríamos ver el código en las funciones adjuntas.

22 mar 2013 19:16:05
Comentarios

Además de esto, si especificas una dependencia para cada estilo, no importa en qué orden los coloques.

Milo Milo
22 mar 2013 19:18:43

Lo sé, puedo hacer esto en una función como en tu ejemplo. Lo estoy haciendo de esta manera porque estoy usando opciones del tema y todo lo relacionado con las opciones del tema está en archivos separados.

Markus Schober Markus Schober
22 mar 2013 20:00:15

Hmm, probablemente todavía podrías usar wp_enqueue_style en tus funciones - e incluir la dependencia correcta, como sugieren Milo e infamouse.

vancoder vancoder
22 mar 2013 20:06:06

Lo siento, una parte de mi último comentario se perdió. Aquí está el completo :-) Sé que puedo hacer esto en una función como en tu ejemplo. Lo estoy haciendo de esta manera, porque estoy usando opciones del tema y todo lo relacionado con las opciones del tema está en archivos separados. La hoja de estilos principal se encola en el functions.php y las otras hojas de estilos se encolan en otros archivos. Así que lo intenté de esta manera.

Markus Schober Markus Schober
22 mar 2013 20:17:26