Planeta WordPress » stylesheet

Organiza y adelgaza tu CSS

planetawordpress — Thu, 04 Jun 2009 22:02:07 +0000

Creo que ya hemos comentado varias veces la importancia de configurar adecuadamente WordPress para permitir una carga rápida, eliminando todo lo que sobra, optimizando todo lo que sea posible.

Uno de los aspectos que podemos organizar mejor es la hoja de estilos, fichero al que recurren todas nuestras páginas con asiduidad salvo que usemos un sistema de cache. Si queremos un CSS eficiente una de las cosas que tenemos que hacer es organizarlo correctamente y reducirlo a su mínima expresión, eliminando lo que sobra.

Pues bien, un modo sencillo de optimizar el CSS es usar la herramienta online llamada Styleneat. El proceso es muy sencillo:

Copias el código de tu hoja de estilos (normalmente el archivo style.css de la plantilla activa), o localizas su ubicación
Pegas ese código en la caja de texto de Styleneat, o lo cargas desde tu ordenador o incluso mediante una URL
Defines las opciones del proceso (por defecto está bien configurado para la mayoría de las situaciones)
Haces clic en “Organize CSS”
Copias o guardas el CSS resultante

A modo de ejemplo, la hoja de estilos del theme K2, uno de los más populares, adelgazó de 1.816 líneas a 1.326, nada menos que 490 líneas sobrantes eliminadas. La reducción de tamaño del archivo es mínima, pero a pesar de eso se cargará de modo más eficiente que la versión original al reducirse las líneas entre las que WordPress deberá buscar lasa clases CSS a mostrar en cada página.

¿Te gustó este post? ¡Compártelo!

¿Necesitas hosting? en Hostarting podrás comparar los planes de hosting de las principales empresas del país, podrás conocer la opinión y valoraciones de otros usuarios sobre los servicios de hosting que utilizan.

Promociona tu web con BetaBlocks (www.betablocks.com).

Refresco automático de la hoja de estilos

planetawordpress — Sun, 31 May 2009 18:45:01 +0000

En Nice2all nos proponen una estupenda receta para evitar que la hoja de estilos, el CSS de tu sitio, muestre una versión en caché de la misma.

Lo que hay que hacer es sustituir la llamada a la hoja de estilos en el archivo ‘header.php‘ de tu plantilla activa por esta otra:

Con este código se evita que la cache del navegador guarde información del CSS y siempre muestre una versión actualizada de la hoja de estilos.

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Guía Windows Live Writer

¿Te gustó este post? ¡Compártelo!

¿Sabes cuanto te costaría este anuncio que estás leyendo si anunciásemos tu propio sitio web? La disparatada cantidad de 0,001 €. No, no nos hemos equivocado con los ceros, prueba BetaBlocks.

Promociona tu web con BetaBlocks (www.betablocks.com).

Child Themes – Plantillas Hijas

planetawordpress — Tue, 05 May 2009 22:02:13 +0000

Hay un tipo especial de themes WordPress que son la expresión mas simple de un theme: los Child Themes o Plantillas Hijas.

La idea que subyace en este tipo de themes es una estructura sencilla que aprovecha la estructura completa de Parent Themes, o Plantillas Madre, de la que utilizan sus funciones y archivos.

Es una forma fantástica de salvaguardar tus modificaciones personales del theme ante nuevas actualizaciones del theme ‘madre’, por ejemplo, pues los cambios de estilo, funciones incluidas en el fichero ‘functions.php‘, etc, siempre se mantendrán en tu Child Theme aunque actualices el Parent Theme, la plantilla madre. Es como un modo de desgajar un theme en funciones y estilos, cada uno por separado.

Para crear un Child Theme solo debes incluir la hoja de estilos (style.css), fichero ‘functions.php‘ e imágenes que definirán su aspecto, pero además puedes añadir carpetas y archivos de scripts, ‘includes‘ o lo que necesite el theme para funcionar. Lo que no es necesario incluir son los habituales archivos ‘php‘ básicos de un theme, pues los heredarán del Parent Theme.

Para conseguirlo, aparte de elaborar el Child Theme, en el fichero ‘style.css‘ deberás añadir una línea, algo así:

/*
Theme Name: Carrington Hijo
Theme URI: URL-del-theme
Description: lo-describes-como-quieras
Author: tu-nombre
Author URI: tu-URL
Template: aquí-es-donde-defines-el-parent-theme
Version: número-opcional
.
Licencia, texto, lo que sea que venga después......
.
*/

La línea importante es esta:

Template: aquí-es-donde-defines-el-parent-theme

que es donde debes indicar el nombre del Parent Theme, por ejemplo:

Template: carrington-blog

Lo que haces es decirle de que theme (nombre de la carpeta) debe tomar los archivos necesarios para funcionar que no tenga incluidos.

Instalar un Child Theme es igual que cualquier otro, subes a ‘/wp-content/themes/‘ tanto el Parent Theme como el Child Theme, pero solo activas el Child Theme.

No sé si conocías el concepto de Child Themes, es realmente una opción muy interesante que espero te haya dado que pensar y plantearte la idoneidad de, incluso, desgajar tu theme actual en Parent y Child, por ejemplo.

Te dejo mas referencias interesantes al respecto de los Child Themes:

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Guía para Administrar Wordpress

¿Te gustó este post? ¡Compártelo!

WWWhat’s Hot?. Desde juegos online, complejos MMORPG, películas de varios géneros o cómics escritos con clase… WWWhat´s hot? pretende ser una guía para los que mantienen una buena dosis de adrenalina en la sangre.

Promociona tu web con BetaBlocks (www.betablocks.com).