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í:
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:
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:
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.
Compartir:
PHP:
- 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:
PHP:
- 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:
PHP:
- function on__widget_style(){
- $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.
Compartir:
Loading... 
Twitter
En estos momentos no existen comentarios. ¡Sé el primero!