Diseñando el blog desde cero

Publicado por Iván Gajate el 30 de septiembre de 2008 en Diseño

Ésto ha cambiado bastante en unos días. Desde que instalé el wordpress en el servidor y ví la pagina inicial he seguido cambiando el diseño, instalando algún plugin y metiéndome a saco con los phps.

Ahora todo me resulta muy facil de entender, pero al principio me costó bastante enterarme de cómo iba el tema. Asi que si estás en la misma situación aquí va un resumen de cómo me ha ido a mi.

Como no tengo un servidor local instalado ni pienso hacerlo, pues tengo un pequeño truco para diseñar en local antes de probarlo en servidor. Me descargo la página que quiero diseñar a mi disco duro, guardando sólo la pagina html, no las imágenes. Cambio las referencias absolutas del código por relativas, y ya está, sólo tengo que guardar los cambios y actualizar la página para ver los cambios. Eso si, cuando es algo del php hay que probarlo arriba.

Lo primero que vemos cuando instalamos todo y vamos a la página de inicio para ver nuestro flamante blog es algo asi:

Éste es el diseño con el tema por defecto, que no está mal la verdad, pero yo quiero un diseño mas personal y único 🙂

Como al principio no tenía demasiado tiempo y quería empezar a escribir ya, me limité a hacer algún cambio rápido pero vistoso. Si te descargas por ftp todas las carpetas con los phps y las imágenes, puedes ver que en el directorio wp-content/themes/default/images están las imágenes que conforman el diseño. Cambiando la cabecera y la hoja de estilos style.css (todos los azules a naranja y listo), se puede dar un aparente cambio al blog.

Pero a mi ahi no me cabe nada, pretendo poner largos fragmentos de código y tutoriales con muchas imágenes y se puede alargar demasiado hacia abajo, asi que toqueteando las css (la verdad es que es super práctica esta forma de trabajar), pues lo hago mas ancho, cambiando sólo la imagen de la cabecera.

Bien. Ahora tengo un ladrillo de blog 🙁 no me gusta.

Empiezo a quitar bordes y trato de darle mas aire al diseño, algo asi:

No está mal, pero sigue sin gustarme, no tiene estructura y se ve todo junto.
Deambulando por casa de un amigo programador de .Net, veo sus diagramas de bases de datos y pruebo a poner paneles como los de una aplicación.

Veo que se definen mejor los post y las sombras le dan mucha vida, pero ahora está totalmente enmarcado. Pruebo a estirar los extremos de las cajas… y voilá!!

Hasta yo me sorprendo del resultado 😀

Pero aunque me gusta mucho estéticamente, no son coherentes el diseño de la home y el de cada post individual, asi que con la ayuda de Joan Miquel, quien también me diseñó el logo, le dimos el aspecto que actualmente tiene.

Ahora toca pegarse con las css, y como soy muy puntilloso con el diseño, los elementos del menu, el buscador y la usabilidad, pues tengo que trastear con los phps para quitar y cambiar cosas de sitio. El php no es mi fuerte pero es realmente fácil cambiar las cosas, usando la referencia de código de wordpress y buscando en internet, se puede sacar todo.

He encontrado unos trucos muy iteresantes para modificar el wordpress aqui, de donde me ha resultado muy util uno en especial, el de cargar distintas hojas de estilo según la categoría.

Yo lo que quiero es que en la home me coja una hoja de estilo, y en la página de cada post otra diferente porque quiero que sea mas ancha (obsesión, si).
Para ello en header.php, tras la línea donde se añade la hoja de estilo por defecto

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Añado ésto:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<?php /* Si estoy en una pagina de detalle, uso otra hoja de estilos */ ?>
<?php
    if ( is_single()) {
	$css = '<link rel="stylesheet" href="';
	$css .= get_bloginfo('template_directory') . '/style_single.css';
	$css .= '" type="text/css" media="screen" />';
        echo $css;
    }
?>

De ésta manera puedo definir una segunda hoja de estilos que amplía la general.

Syntax Highlighter: Para estos fragmentos de código coloreado he probado varios plugins de wordpress, pero no me convence ninguno. Todos me dan problemas al editar el post en modo visual, asi que he optado por un programa (Windows Live Writer) que cambia el código por etiquetas html válidas, y con el plugin Syntax Hihglighter además los colorea, es fantastico!!.

Plugins: Hay muchísimos plugins para aumentar las capacidades de WordPress, yo tengo instalados estos:

All in One SEO Pack: Cambia los títulos, metatags y descripciones de cada página para mejorar el posicionamiento web.

Ultimate Category Excluder: Permite especificar qué quieres que aparezca y dónde. Perfecto para hacer secciones personales que no quieras que aparezcan en la home junto con otros post.

PB Embed Flash: Sirve para incrustar películas swf (Flash) de forma fácil y sencilla.

 

2 comentarios para “Diseñando el blog desde cero”

  1. […] decía que no me hacía falta para nada tener un servidor local para trabajar, que yo era programador front, y que eso era para PHPeros… pues después de que […]

  2. Bueno… ha costado pero ha merecido la pena eh??

    Te voy a poner en mis feeds favoritos.
    A escribir se ha dicho!!!!