Checklist al integrar un diseño a WordPress

Checklist al integrar un diseño a WordPress

Fecha: 01-Jun-2011 | Autor: .
Guardado en: Artículos, Desarrollo Web, Themes, WordPress

Recibí como sugerencia que sería interesante contar con un checklist o ToDo list para cuando trabajamos integrando un diseño en WordPress.

Si bien algo similar y extensivo, intenté hacer con el ciclo de videos de Jueves de WordPress, me pareció una buena idea, tener una especie de breve resumen concreto, con los pasos a seguir al montar un diseño en WordPress, para asegurarnos de no olvidar ninguno, así que aquí vamos:

  1. Lo primero y más importante es tener nuestro diseño definido, idealmente en algún archivo en capas (o layers), por ejemplo en formato PSD, PNG o similar.
  2. Luego, al igual que cuando maquetamos un diseño en xHTML y CSS, iremos cortando los gráficos del diseño y creando el código HTML (semántico) y el CSS para dar los estilos al mismo y dejarlo igual que e diseño inicial.
    Debemos tener en cuenta, ya desde este punto, a la hora de maquetar, que eso luego lo integraremos en WordPress, y esto significa, que (si bien tenemos total libertad), nos simplificará un poco las cosas si tenemos en cuenta los bloques que luego deberemos usar (header.php con el <head> y el comienzo del <body>, la cabecera, quizá un menu / sidebar.php con la(s) barra(s) latera(les) si nuestro diseño cuenta con ellas / un footer.php con el pie de página y el cierre del </html>, etc…).
  3. Ahora debemos instalar WordPress, el cuál puede descargarse gratuitamente desde el sitio oficial: http://wordpress.org/download/.
  4. Una vez ya tengamos maquetado el diseño y por otro lado instalado el WordPress, llega la hora de integrar el diseño en WordPress. Para ello, primero crearemos una carpeta con el nombre del tema, y nos crearemos dentro los archivos más comunes, comenzando con el style.css que es el que, además de contener los estilos CSS, contendrá la información del tema, con el siguiente formato al comienzo del mismo:
    /*
    Theme Name: Nombre del Tema
    Theme URI: http://urldeltema.com/
    Description: Una breve descripción de nuestro tema.
    Author: Tu nombre
    Author URI: http://tuurl.com/
    Version: 1.0
    */
  5. Luego los archivos más importantes son: index.php (el archivo general del tema, debe estar presente ya que es el que se llama si no se encuentra otro archivo más adecuado para la sección a mostrar), header.php (dónde incluiras el comienzo del <html> y debe estar incluido desde los demás archivos con un get_header()), footer.php (el final del </html> y debe estar incluido desde los demás archivos con get_footer()), un sidebar.php (opcional, e igual que los anteriores, debe estar incluido con get_sidebar()). Y luego los distintos archivos por zonas, listo los más usados con una breve explicación:
    • comments.php contiene el área de comentarios (se incluye con get_search_form()).
    • home.php si este archivo existe, se cargará (en lugar del index) en la portada del sitio.
    • single.php es el archivo que carga el HTML de los contenidos (posts) del sitio.
    • page.php formatea el HTML de las páginas (pages) del sitio.
    • category.php para las categorías (si este archivo no existe, toma el archive.php).
    • tag.php para las tags (al igual que el anterior, de no existir, usa el archive.php).
    • author.php para los posts de un autor (si no existe usa archive.php).
    • archive.php lista los posts por fecha (a no ser que exista date.php) y lista posts por categoría, por tag o por autor si los archivos específicos no existieran (en caso de no existir es el index.php quién cumple su función).
    • search.php devuelve los resultados de búsquda.
    • image.php muestra una imagen linkeada desde un post como attachment (en caso de no existir este archivo utiliza attachment.php).
    • 404.php se muestra al generarse un error 404 al no encontrar una página/post/categoría/etc.

    ¿Por qué este anuncio?
  6. Con estos archivos (o algunos de ellos, dependiendo de las necesidades de nuestro proyecto), ya podremos montar el HTML y CSS del sitio en WordPress.
  7. Aún así, para realmente utilizar las prestaciones que WordPress nos ofrece, necesitaremos tener en cuenta algunas cosas más:
    • wp_head(): es una función PHP que es recomendable incluir antes del cierre del </head> ya que a través de ella, el WordPress incluye librerías que los distintos plugins (si los hubiera) pudieran necesitar.
    • wp_footer(): al igual que la anterior es una llamada (o hook como se les dice a estas acciones en WordPress), que utilizan varios plugins para ejecutar código. Se sugiere incluirla antes del cierre de </body>
    • bloginfo(): de la cuál ya hemos hablado en este post: Función bloginfo() en WordPress.
    • Debemos conocer el correcto funcionamiento del WordPress Loop.
    • Hacer nuestra sidebar dinámica, para poder admitir Widgets, que podemos querer utilizar.

Releyendo todo el post, sentí que si bien quedó extenso, quedó a la vez algo básico, pero en parte era la idea inicial cuando me propuse escribir este artículo. Intentaré ir intercalando artículos básicos (para quienes comienzan o quienes quieren una leve “revisión” general) y algunos más avanzados (para aquellos lectores que ya suelen trabajar con wordpress u otras herramientas del estilo) ;) Se aceptan opiniones y comentarios! :P

Gracias @yrvn por la motivación para este post ;)


Si te gustó, comparte:
Y si fue de ayuda, puedes comprarme un café:
...ó la cena si quieres! ;)

Etiquetado como: , , , , , , , ,


Gravatar

Marcelo


Desarrollador web, trabajando desde Montevideo, Uruguay para todo el mundo. Me especializo en Diseño web, Maquetación HTML5 & CSS3, jQuery y Programación PHP & MySQL, e intento aprender un poco más cada día.

5 comentarios, participa!

  1. Lucas

    03. Jun, 2011

    Espectacular el check list, se extrañaban los posts en este blog!
    Saludos.

  2. Marcelo

    03. Jun, 2011

    Gracias Lucas por el comentario ;) me alegro que guste!
    Buen fin de semana! ;)

  3. Tayler

    05. Jun, 2011

    Muy buena explicación del proceso a seguir enhorabuena ;)

  4. Alberto

    15. Jun, 2011

    ¡Hola Marcelo! Hace tiempo que sigo tu página (la encontré el año pasado cuando buscaba como hacer un theme para WordPress).
    Hoy recién volví a intentarlo dado que quedó mal por algo… pensaba que podía ser una div con un id repetido (típico error de un novato :P)
    Ya diseñé el nuevo theme y de a poco voy maquetándolo en el XHTML y CSS. Espero terminar :)

    Un abrazo y cuando estés con tiempo libre escribe en el blog si el cansancio no te gana! ^^

  5. PotySoft

    09. Jul, 2011

    Interesante lista, yo incluiría algún punto sobre activar plugins, ya que muchos afectan al diseño.

    Un saludo y enhorabuena por este magnífico blog.

Deja tu opinión