Cómo incluir una hoja de estilos en WordPress

Si estás desarrollando un plugin o un tema de WordPress, siempre llegarás a un punto en el que necesitas agregar una hoja de estilos, ya sea para la parte visual de tu plugin o tema o ya sea para el propio panel de administración.

Agregando hojas de estilos a WordPress

Existen varios modos de hacer ésto.

• Puedes agregar directamente el enlace al archivo css mediante la función wp_head_action.
• Puedes agregar el archivo css directamente en los archivos del tema.
• Puedes usar la función wp_enque_scripts para luego usar wp_enqueue_style y agregar el archivo css en la cabecera junto a todos los demás.

Pues bien, resulta que solamente el último método es el realmente correcto. Ésto es debido a que cuando usas wp_enqueue_style, WordPress asigna un identificador a cada hoja de estilos y si en tu plugin incluyes la hoja de estilos y luego la incluyes de nuevo en otro plugin, solamente se incluirá una vez. En cambio, mediante add_stylesheet_to_head, ésta puede agregarse varias veces si la incluyes de nuevo.

Usando wp_head_action (NO RECOMENDADO)

Mediante este método, la hoja de estilos se añadirá todas las veces que se ejecute la función para agregarla, no estando tampoco en la lista de archivos css de WordPress. Así es como no deben agregase los archivos css:

function agregar_hoja_estilos_head(){
    echo "<link href='location-of-stylesheet' rel='stylesheet' type='text/css'>";
}
add_action('wp_head', 'agregar_hoja_estilos_head');

Usando wp_head_action (RECOMENDADO)

Usando este método, la función wp_enqueue_style se encargará de agregar la hoja de estilos una sola vez en un solo lugar. Vamos a ver la función:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

El primer parámetro de la función permite identificar la hoja de estilos para evitar que éste sea añadida más de una vez. Si dos plugins usan wp_enqueue_style para agregar el archivos css, solamente se incluirá una vez. La hoja de estilos pasará también a estar en el listado interno de WordPress, facilitando ciertas tareas a varios plugins de caché que puedan minificar estos arhivos.

El segundo parámetro es la ruta de la hoja de estilos y el tercero sirve para crear dependencias, de modo que si pasas un array con el identificador o ‘handle’ de hojas de estilo, la hoja de estilo no se añadirá hasta que todas las del array hayan sido añadidas.

Cómo agregar una hoja de estilos

Antes de usar la función wp_enqueue_style, debemos usar la acción wp_enqueue_scripts. Vamos a ver un ejemplo.

add_action( ‘wp_enqueue_scripts’, ‘agregar_hoja_estilos’ ); function agregar_hoja_estilos'() { wp_enqueue_style( ‘prefix-style’, plugins_url(‘estilos.css’, __FILE__) ); }

add_action( 'wp_enqueue_scripts', 'agregar_hoja_estilos' );
function agregar_hoja_estilos'() {
    wp_enqueue_style( 'prefix-style', plugins_url('estilos.css', __FILE__) );
}

La función wp_enqueue_scripts se usa indistintamente para archivos CSS y Javascript, siendo la única diferencia que con javascript no usas luego wp_enqueue_styles, sino wp_enqueue_script.

Agregar hoja de estilos en el panel de administración

Si quieres añadir la hoja de estilos en el área de administración para, por ejemplo, personalizar los estilos de la página de opciones de tu tema, debes realizar unos cambios menores.

Existe una función denominada admin_enqueue_scripts que es la que deberás usar para añadir estos archivos css. Vamos a ver un ejemplo.

add_action( 'admin_enqueue_scripts', 'agregar_hoja_estilos_admin' );
function agregar_hoja_estilos_admin() {
    wp_enqueue_style( 'prefix-style', plugins_url('estilos_admin.css', __FILE__) );
}

Sin embargo, el archivo css será agregado a todas las páginas del panel. Si lo que quieres es modificar algunos estilos existentes pero sólo para algunas páginas, tenemos que realizar algunos cambios en la función agregar_hoja_estilos_admin. Cuando usas admin_enqueue_scripts se pasa también un parámetro con la página actual que podemos usar. Vamos a ver un ejemplo.

add_action( 'admin_enqueue_scripts', 'agregar_hoja_estilos_admin' );
function agregar_hoja_estilos_admin( $page ) {
    //So no estamos en la pagina 'opciones-generales', salimos
    if( 'opciones-generales.php' != $page ){
        return;
    }
    wp_enqueue_style( 'prefix-style', plugins_url('estilos_admin.css', __FILE__) );
}

Así, solamente se incluirá el archivo CSS cuando estemos en la página opciones-generales.php.

Agregar estilos a la página de Login

También es posible personalizar esta página usando la función login_enqueue_scripts.

function estilos_pagina_login() {
    wp_enqueue_style( 'login-page-styles', get_template_directory_uri() . '/css/archivo-login.css' );
}
add_action( 'login_enqueue_scripts', 'estilos_pagina_login' );

Estilos en línea

Si quieres personalizar los estilos de tu tema o de tu plugin usando una página de opciones, no tendrás otro modo de hacerlo. WordPress permite usar la función wp_add_inline_style para añadir estilos después de que todos se hayan cargado. La función tiene dos parámetros que son el identificador y el estilo.

wp_add_inline_style( $handle, $data );

Vamos a ver un ejemplo:

function agregar_estilos_personalizados() {
    $fondo = get_theme_mod( 'background-color' );
    $el_codigo_css = "
        body{
            background: {$bgcolor};
        }";
    wp_add_inline_style( 'inline-custom-style', $el_codigo_css );
}
add_action( 'wp_enqueue_scripts', 'function agregar_estilos_personalizados' );

Fin

Ya sabes las mejores prácticas para insertar estilos tanto en la parte pública de WordPress como en el panel de administración.

---