onestic » css http://onestic.com blog de onestic Thu, 02 Feb 2012 09:40:42 +0000 en hourly 1 http://wordpress.org/?v=3.0.5 Como agregar correctamente CSS a WordPress http://onestic.com/agregar-correctamente-css-wordpress/ http://onestic.com/agregar-correctamente-css-wordpress/#comments Thu, 31 Dec 2009 14:20:11 +0000 David Bolufer http://onestic.com/?p=611 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.]]> http://onestic.com/agregar-correctamente-css-wordpress/feed/ 2