¿Por qué wp_register_style() es importante cuando estoy usando wp_enqueue_style() completo?

25 nov 2013, 08:29:18
Vistas: 30.3K
Votos: 24

Actualmente estoy trabajando en un tema, e hice algunas inclusiones de estilos y scripts. Cuando incluí los scripts, usé primero wp_register_script(), y luego los puse en cola con wp_enqueue_script() - porque entendí que esa es la forma correcta de incluir los scripts. Pero al incluir los estilos, usé solo wp_enqueue_style() con todos sus parámetros. Pero ahora recibí una respuesta de s_ha_dum diciendo que usar wp_register_style() haría que el tema sea compatible con temas hijos - me pregunto, sin usar wp_register_style() estoy usando solo wp_enqueue_style() y mi tema funciona bien con los estilos incluidos. Los incluí así:

add_action( 'wp_enqueue_scripts', 'wpse20131025_styles' );

function wpse20131025_styles(){

    wp_enqueue_style( 'site-styles', get_template_directory_uri() . '/style.css', '', '', 'screen' );
    wp_enqueue_style( 'menu-styles', get_template_directory_uri() . '/css/menu.css', '', '', 'screen and (min-device-width: 800px)' );
    wp_enqueue_style( 'mobile-menu-styles', get_template_directory_uri() . '/css/mobile-menu.css', '', '', 'screen and (max-device-width: 799px)' );

}

Mientras que wp_enqueue_style() tiene todos los parámetros que están presentes en wp_register_style() ($handle, $src, $deps, $ver, $media) entonces ¿por qué debería repetirlos? O, ¿cuál es exactamente el propósito de wp_register_style() más allá de wp_enqueue_style()?

0
Todas las respuestas a la pregunta 1
4
41

En primer lugar, digamos que en cuanto a estas funciones, lo que es válido para los estilos es exactamente válido para los scripts, pero hay algunas excepciones en sentido contrario explicadas en la respuesta.

La principal diferencia entre las funciones wp_enqueue_* y sus respectivas wp_register_*, es que las primeras agregan scripts/estilos a la cola, mientras que las segundas preparan scripts/estilos para ser agregados.

Probablemente ya lo sepas, pero hay una segunda diferencia; wp_register_* se puede usar en cualquier hook, incluso en un hook temprano como init, pero wp_enqueue_* debería usarse en el hook wp_enqueue_scripts (o admin_enqueue_scripts para el backend) 1.

El escenario típico de uso de ambas funciones es cuando deseas registrar scripts/estilos en la inicialización del tema, y luego agregarlos condicionalmente en algunas páginas, por ejemplo:

add_action('init', 'my_register_styles');

function my_register_styles() {
    wp_register_style( 'style1', get_template_directory_uri() . '/style1.css' );
    wp_register_style( 'style2', get_template_directory_uri() . '/style2.css' );
    wp_register_style( 'style3', get_template_directory_uri() . '/style3.css' );
}

add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );

function my_enqueue_styles() {
    if ( is_front_page() ) {
        wp_enqueue_style( 'style3' );
    } elseif ( is_page_template( 'special.php' ) ) {
        wp_enqueue_style( 'style1' );
        wp_enqueue_style( 'style2' );
    } else {
        wp_enqueue_style( 'style1' );
    }
}

De esta manera, el encolamiento condicional es más legible y menos verboso.

Además, si deseas encolar uno o más de los estilos/scripts registrados también en el backend, puedes usar el handle registrado en una función enganchada a admin_enqueue_scripts sin tener que pasar todos los parámetros nuevamente.

Seguro que esto es más útil para los scripts, debido a wp_localize_script que en el escenario anterior puede llamarse una vez, después del registro del script, y luego en el encolamiento condicional simplemente encolar el script, incluso si se usa más de una vez: esto mantiene el código más simple y DRY.

Cuando registras un script/estilo e inmediatamente después lo encolas, es solo una tarea innecesaria, que en realidad se puede evitar por completo:

wp_register_style( 'style1', get_template_directory_uri() . '/style1.css' );
wp_enqueue_style( 'style1' );

No hay ninguna ventaja en encolar un estilo (o script) así, simplemente usa wp_enqueue_style con todos los parámetros de wp_enqueue_style y listo.

Lo anterior también es cierto en cuanto a la amistad con los temas hijos. Para sobrescribir un estilo en el tema hijo, cuando el padre está usando wp_register_style seguido inmediatamente por wp_enqueue_style, tienes que desregistrar el estilo y registrarlo nuevamente con otra URL. Si el padre solo usa wp_enqueue_style, en el tema hijo puedes usar wp_dequeue_style y encolar el nuevo estilo, por lo que en el tema hijo necesitas 2 líneas de código en ambos casos.

Sin embargo, lo que es muy amigable con los temas hijos es envolver las funciones que encolan y/o registran estilos y scripts en un if ( ! function_exists( ... de esta manera el tema hijo puede sobrescribir los estilos y scripts del tema padre todo en un solo lugar:

if ( ! function_exists( 'my_register_styles' ) ) {
    function my_register_styles() {
        wp_register_style( 'style1', get_template_directory_uri() . '/style1.css' );
        wp_register_style( 'style2', get_template_directory_uri() . '/style2.css' );
        wp_register_style( 'style3', get_template_directory_uri() . '/style3.css' );
    }
}

if ( ! function_exists( 'my_enqueue_styles ') ) {
    function my_enqueue_styles() {
        if ( is_front_page() ) {
            wp_enqueue_style( 'style3' );
        } elseif ( is_page_template( 'special.php' ) ) {
            wp_enqueue_style( 'style1' );
            wp_enqueue_style( 'style2' );
        } else {
            wp_enqueue_style( 'style1' );
        }
    }
}

Ahora en el tema hijo es posible escribir otra función my_register_styles y/o my_enqueue_styles y cambiar todos los estilos (si es necesario, por supuesto) sin tener que desregistrar/desencolar estilos uno por uno.


1 Aquí hay otra diferencia entre scripts y estilos: wp_enqueue_script se puede usar en el cuerpo de una página (el uso típico es en un shortcode) y el script se colocará en el footer.

25 nov 2013 13:31:25
Comentarios

Excelente G.M., has revisado el tema de manera tan holística. Felicitaciones por tu esfuerzo. :)

Mayeenul Islam Mayeenul Islam
25 nov 2013 13:38:36

Gracias @MayeenulIslam, comencé a responder antes de que toscho marcara la pregunta como duplicada. Me alegra que te haya sido útil, así que probablemente lo será para otros :)

gmazzap gmazzap
25 nov 2013 13:48:29

@gmazzap Increíblemente útil, acabo de buscar wp_register_style vs wp_enqueue_style y tu respuesta me ayudó a comprender el tema a fondo.

lowtechsun lowtechsun
15 nov 2016 20:13:41

Excelente respuesta, gracias.

EmSixTeen EmSixTeen
2 dic 2020 20:41:50