Carga de estilos y scripts

Un escenario muy común en el desarrollo de plugins es que, una vez que generamos e imprimimos HTML, queramos modificar sus estilos por medio de CSS, o su comportamiento por medio de JavaScript. Para eso vamos a necesitar incluir los archivos en los que tengamos nuestros estilos y nuestros scripts.

Por ejemplo, podemos tener un archivo CSS que aplique un borde rojo a todos los elementos input que sean del tipo "text":

input[type="text"] {
    border: 1px solid red;
}

Y también un archivo JavaScript que ocasione que, al hacer click en un botón de envío de formulario, pida una confirmación.

jQuery( 'form' ).submit( function() {
    var confirmed = confirm( 'Please confirm form submission' );
    return confirmed;
} );

Este tipo de archivos pueden cargarse desde el front-end con las funciones wp_register_style(), wp_register_script(), wp_enqueue_style() y wp_enqueue_script(), usándolas dentro de una función asignada al evento wp_enqueue_scripts. Un caso de uso de estas funciones sería este:

<?php
add_action( 'wp_enqueue_scripts', 'portfolio_enqueue_style' );

function portfolio_enqueue_style() {
    wp_register_style( 'portfolio-admin-styles', plugins_url( 'css/style.css', false );
    wp_enqueue_style( 'portfolio-admin-styles' );
}

add_action( 'wp_enqueue_scripts', 'portfolio_enqueue_script' );

function portfolio_enqueue_script() {
    wp_register_script( 'portfolio-admin-scripts', plugins_url( 'css/scripts.js', false );
    wp_enqueue_script( 'portfolio-admin-scripts' );
}

En menús de administración

Este código va a hacer que, en el HTML generado por WordPress, se impriman los tags <link> y <script> que se ocupan de cargar nuestros archivos CSS y JavaScript. El problema es que la acción wp_enqueue_scripts solamente tiene efecto en el front-end de nuestro sitio, y no en la parte administrativa. Sin embargo, existe otro evento similar que se ejecuta solamente en la sección de administración, llamado admin_enqueue_scripts. Para aplicarlo, podemos reformular nuestro ejemplo de la siguiente manera:

<?php
add_action( 'admin_enqueue_scripts', 'portfolio_enqueue_style' );

function portfolio_enqueue_style() {
    wp_register_style( 'portfolio-admin-styles', plugins_url( 'css/style.css', false );
    wp_enqueue_style( 'portfolio-admin-styles' );
}

add_action( 'admin_enqueue_scripts', 'portfolio_enqueue_script' );

function portfolio_enqueue_script() {
    wp_register_script( 'portfolio-admin-scripts', plugins_url( 'css/scripts.js', false );
    wp_enqueue_script( 'portfolio-admin-scripts' );
}

Una vez que pasamos a usar este evento para cargar nuestros archivos, vamos a ver que los tags se imprimen correctamente en el HTML, y que los estilos y el comportamiento se asignan a a los elementos a los que apuntamos desde nuestros archivos CSS y JavaScript.

Un potencial problema de este método es que esos archivos que cargamos van a aparecer en todas las páginas que visitemos dentro de la sección de administración, incluso cuando no tengan ningún efecto sobre lo que se ve en pantalla. Si los archivos son muy largos, van a tardar más tiempo que archivos más cortos en ser descargados. Y si no necesitamos que siempre se carguen, el hecho de que aparezcan siempre puede causar problemas sobre la performance del sitio donde se instaló nuestro plugin. Por eso, una recomendación muy útil para cuando estamos trabajando con hojas de estilos o scripts muy largos, y que por ende van a llevar más tiempo para ser descargados que archivos más cortos, es solamente cargarlos en las páginas en las que sea necesario usarlos. Para poder hacer esto, WordPress ofrece herramientas que nos permiten conocer el contexto de la página que estamos viendo. Una de ellas es la función current_screen().

Usando current_screen() podemos obtener información acerca de la página que estamos viendo. Si solamente queremos cargar estos archivos en la página de administración de nuestro plugin, lo que tenemos que hacer es usar current_screen() para asegurarnos de que la página sea la indicada antes de cargar los archivos, modificando nuestro código de esta forma:

<?php
add_action( 'admin_enqueue_scripts', 'portfolio_enqueue_style' );

function portfolio_enqueue_style() {
    // Si el ID de la página actual no es el de nuestra página de administración, salimos de la función.
    if ( 'portfolio-settings' !== current_screen()->id ) {
        return;
    }

    wp_register_style( 'portfolio-admin-styles', plugins_url( 'css/style.css', false );
    wp_enqueue_style( 'portfolio-admin-styles' );
}

add_action( 'admin_enqueue_scripts', 'portfolio_enqueue_script' );

function portfolio_enqueue_script() {
    // Si el ID de la página actual no es el de nuestra página de administración, salimos de la función.
    if ( 'portfolio-settings' != current_screen()->id ) {
        return;
    }

    wp_register_script( 'portfolio-admin-scripts', plugins_url( 'css/scripts.js', false );
    wp_enqueue_script( 'portfolio-admin-scripts' );
}