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

Cofundador de CODECTION, empresa especializada en WordPress, autor de un libro sobre WordPress (el primero en español) y multitud de artículos (en medios físicos y virtuales) sobre el tema. Participa en la comunidad WordPress de forma activa siendo parte del equipo organizador de la WordPress Meetup de Córdoba, dando charlas en diferentes WordCamp y siendo autor y coautor de multitud de plugins libres y premium para WordPress de gran éxito.

  • 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

  • Lariicsa
  • nayeli

    Muchas gracias!!!! me sirvio mucho!