onestic » how to http://onestic.com blog de onestic Wed, 30 Jun 2010 10:37:32 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 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í:
PLAIN TEXT
PHP:
  1. function on__style(){
  2.     echo "<style type='text/css'>
  3.         .scroll_checkboxes {
  4.             height: 400px;
  5.             width: 400px;
  6.             padding: 5px;
  7.             overflow: auto;
  8.             border: 1px solid #ccc
  9.         }
  10.  
  11.             .scroll_checkboxes label{
  12.                 float: left;
  13.                 clear: both;
  14.             }
  15.             .form-table input[type=text]{ width: 400px }
  16.     </style>";
  17. }
  18. 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:
PLAIN TEXT
PHP:
  1. function on__style(){
  2.     wp_enqueue_style('style-theme', get_bloginfo('stylesheet_url'), false, false, 'screen');
  3.     wp_enqueue_style('960', get_bloginfo('template_url').'/_inc/css/960.css','style-theme');
  4.     wp_enqueue_style('jquery-ui', get_bloginfo('template_url').'/_inc/css/jquery-ui.custom/ jquery-ui.custom.css','style-theme');
  5. }
  6. 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:
PLAIN TEXT
PHP:
  1. function on__widget_style(){
  2.     $pluginDirComplete = plugin_basename(dirname(__FILE__));
  3.     $pluginsWPDirComplete = basename(dirname(dirname(__FILE__)));
  4.  
  5.     $urlSite = get_settings('siteurl');
  6.     $urlCSS = $urlSite . '/wp-content/'.$pluginsWPDirComplete.'/'.$pluginDirComplete.'/css/on-widget_style.css';
  7.  
  8.     wp_enqueue_style('on__traffsend', $urlCSS);
  9. }
  10. 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/ 0