Como agregar correctamente CSS a WordPress

En esta entrada intentaremos aportar un poco de luz a la mejor forma, a nuestro modo de ver, para incluir nuestros archivos CSS en WordPress tanto en nuestro tema como en nuestro.

La gran mayoría agregáis vuestra CSS al tema directamente, o cuando desarrolláis un plugin lo incluís utilizando un código más o menos así:

function on__style(){
    echo "<style type='text/css'>
        .scroll_checkboxes {
            height: 400px;
            width: 400px;
            padding: 5px;
            overflow: auto;
            border: 1px solid #ccc
        }

            .scroll_checkboxes label{
                float: left;
                clear: both;
            }
            .form-table input[type=text]{ width: 400px }
    </style>";
}
add_action('wp_head', 'on__style');

Bueno, he puesto el caso peor haciendo la “guarrada” de no incluir nuestro código CSS en un archivo externo. El modo más limpio para hacerlo es a través un hook de WordPress que ejecuta dentro de la función wp_head(), este es wp_print_styles, podemos introducir el siguiente código en nuestro archivo functions.php del tema:

function on__style(){
    wp_enqueue_style('style-theme', get_bloginfo('stylesheet_url'), false, false, 'screen');
    wp_enqueue_style('960', get_bloginfo('template_url').'/_inc/css/960.css','style-theme');
    wp_enqueue_style('jquery-ui', get_bloginfo('template_url').'/_inc/css/jquery-ui.custom/ jquery-ui.custom.css','style-theme');
}
add_action('wp_print_styles', 'on__style');

Con este código no tendremos que introducir ninguna referencia al CSS en el archivo header.php de nuestro tema, simplemente tenemos que asegurarnos que antes del cierre de la etiqueta llamamos a la función wp_head().

En el caso de estar desarrollando un plugin, este sería el código equivalente:

function on__widget_style(){
    $pluginDirComplete = plugin_basename(dirname(__FILE__));
    $pluginsWPDirComplete = basename(dirname(dirname(__FILE__)));

    $urlSite = get_settings('siteurl');
    $urlCSS = $urlSite . '/wp-content/'.$pluginsWPDirComplete.'/'.$pluginDirComplete.'/css/on-widget_style.css';

    wp_enqueue_style('on__traffsend', $urlCSS);
}
add_action('wp_print_styles', 'on__widget_style');

Esto tiene un ventaja muy importante y es que podemos usar algún plugin para comprimir y unificar todos nuestros CSS en un único fichero mejorando sensiblemente la velocidad de carga y reduciendo la transferencia del servidor, pero esto, da para otro post en el futuro.