Añadir una hoja de estilos CSS a un tema o plugin WordPress

Cuando trabajamos desarrollando para WordPress, no debemos incluir ficheros CSS de la forma tradicional (usando las etiquetas <style> o <link>), sino que debemos utilizar una función creada para tal efecto, que nos asegura una forma segura y correcta de hacerlo.

Desarrollo con WordPress

La idea es la siguiente:

Para ello usaremos una función que se encargue de ello y la llamaremos según nos convenga, en nuestro caso, la asociaremos a una acción. Veamos el código en cuestión:

function carga_estilos_theme()
{
  wp_register_style( 'estilos',
    get_template_directory_uri() . '/css/estilos.css',
    array(),
    '1.1',
    'all' );

  wp_enqueue_style( 'estilos' );
}
add_action('wp_print_styles', 'carga_estilos_theme');

¿Qué significa cada parámetro en cada una de las funciones? Empecemos por la que tiene más, wp_register_style:

  • “estilos”: es el manejador de la hoja de estilos, una vez se registra, éste será el identificador que usemos para encolarlo o cualquier otra operación que queramos.
  • La URL de la hoja de estilos, por compatibilidad debemos usar la función get_template_directory_uri() que nos devuelve la URI del tema.
  • Un array con las posibles dependencias que tenga la hoja de estilos.
  • Versión de la hoja de estilos.
  • Medio en el que se aplica la hoja (tenéis la lista completa de medios posibles definida en el W3C).

Una vez la hoja está registrada, pasamos a añadirla con wp_enqueue_style y el identificador que acabamos de proveer.

Para añadir código de scripts JavaScript, la operación es similar.

Author Description

F. Javier Carazo Gil

Casi Ingeniero Informático, co-fundador y administrador de Linux Hispano, además de desarrollar software y mantener sistemas en el CSIC, hace poco he fundado junto con Alberto Hornero una start-up: CODECTION donde trabajamos con software libre. Puedes saber más sobre mí, mi vida laboral, mis libros, mis artículos y mi día a día en @fjcarazo y en mi perfil público de LinkedIn.

  • Pingback: Bitacoras.com

  • Sumaya_bj

    eso es exactamente lo q necesito, añadir una hoja d estilos externa pero dnd tengo q añadir este código? y cómo llamo a la función? Gracias 

  • max

    es lo que estaba buscando, gracias

  • vito sternberg

    estimados, soy relativamente nuevo en esto de las css y tengo dos preguntas:
    1- esto codigo debo insertarlo dentro de la hoja functions.php?
    2- este codigo debe ir dentro de los del php o debo ponerlo asi:

    gracias por este tutorial que está muy simple

  • Guest

    estimados, soy relativamente nuevo en esto de las css y tengo dos preguntas:
    1- esto codigo debo insertarlo dentro de la hoja functions.php?
    2- este código debe ir dentro de los phpdel php o debo ponerlo asi:

    gracias por este tutorial que está muy simple

  • vito sternberg

    estimados, soy relativamente nuevo en esto de las css y tengo dos preguntas:
    1- esto codigo debo insertarlo dentro de la hoja functions.php?
    2- este codigo debe ir dentro de los <?php del php o debo ponerlo asi:

    /**/

    gracias por este tutorial que está muy simple