Maquetando un theme de WordPress

Maquetando un theme de WordPress

Fecha: 11-Feb-2010 | Autor: .
Guardado en: HTML y CSS, Themes

Hoy es nuevamente un Jueves de WordPress y nos toca aprender a maquetar un tema para WordPress. La semana pasada habíamos realizado el diseño del tema y hoy lo maquetaremos.

Preparé para ello un videotutorial, que quizá quedó un poquito largo pero espero que puedan disfrutarlo igual. Además, al final de este post encontrarán para descargar el archivo fuente en PSD (Photoshop, Gimp, etc.), y los archivos del tema maquetado (HTML, CSS e imágenes).


¿Por qué este anuncio?

Descargar Archivos:

psdhtml


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.

24 comentarios, participa!

  1. Noah

    11. Feb, 2010

    Muy bueno el video, los tutoriales en video cuando estan bien hechos por mas largos que sean son un orgasmo.

  2. Pedro Pablo

    11. Feb, 2010

    Muy bien explicado y sin duda da solución a uno de los grandes quebraderos de cabeza para los que usamos WordPress pero sabemos muy poco de programar. Gracias!!

  3. Marcelo

    11. Feb, 2010

    Noah, Pedro Pablo: muchas gracias por sus comentarios :) me alegra mucho que estos videotutoriales que estoy realizando realmente sean de utilidad ;)

  4. Federico

    11. Feb, 2010

    Bueno! Termine de verlo todo, la verdad muy bueno! Se me ocurre que una vez terminada esta serie, podrías si tenes ganas y tiempo, ir ampliando los videotutoriales con por ejemplo, como hacer para que este mismo theme tenga dos sidebars, que soporten widgets, etc etc… Quizás me estoy adelantando, ahora a esperar una semanita mas :D

  5. Mike

    11. Feb, 2010

    Estupendo !!!
    Estoy en mis inicios de programación HTML – PHP y en verdad aunque fué largo el tutorial, me quedó bastante bien explicado todo.
    Excelente la manera de explicarlo paso a paso.

  6. luchosar

    11. Feb, 2010

    Excelente tu trabajo. Pero no me queda duda que hay que conocer bastante de CSS.

  7. Fernando

    11. Feb, 2010

    La verdad estoy sorprendido , no sabia que se podia hacer eso en CSS, digamos de agrupar los class ,id y link.

    Sin palabras, buen material , esperando al otro Jueves ;)

    No estaria mal que explicaras tambien el tema de los comentarios o hacer la maquetacion en xhtml , css y despues integrarla a wordpress.

    Gracias nuevo!

    Salidos !

  8. Fernando

    11. Feb, 2010

    Hola de nuevo :P, despues estaria bueno que cada uno muestre su theme creado, yo estoy diseñando el mio en photoshop, que te parece Marcelo ?

  9. T_mix

    12. Feb, 2010

    muy bueno el video, ahora tendre que aplicarlo…. gracias y espero la proxima entrega!

    bye

    att:Taz

  10. Lukas

    12. Feb, 2010

    Hello… Como todos los Jueves de WordPress… Acá estoy…

    1. Se te olvidó ponerle el link al “Indice” de la página principal de “Jueves de WordPress”.

    2. Maquetar es una cruz!!! ¡La vida! Personalmente tuve que hacer todo el diseñó de nuevo – el truco lo descubrí cuando me bajé tu archivo de Photoshop, hacerlo todo por capa – Y entonces estoy atascado en la parte de ponerle el borde superior, cuando lo pego los dos juntos no se corresponen… Y entonces no sé como mover las columnas hacia los lados para que entonces puedan “caer” como van… heheheh… Pero me gusta porque mi HTML+CSS está casi igual al de mi diseño :D

    3. ¿Dónde puede encontrar uno un manual o algo parecido con respecto a CSS, sobre las notaciones, sus usos, etc? Personalmente lo estoy haciendo a base de prueba y error, y así no es tan divertido… :P

  11. Marcelo

    12. Feb, 2010

    Federico, gracias por el comentario y estoy de acuerdo, es buena idea la de ir luego extendiendo los #JuevesDeWordpress el uso de nuestro theme ;)

    Mike, luchosar, de verdad muchas gracias por sus comentarios, dan ganas de seguir invirtiendo esfuerzo en esto, sabiendo que a varios le es útil!

    Fernando, sin duda el próximo jueves se explicará como integrarlo y hacer funcionar los comentarios, etc… y me gustó la idea de que luego todos (los que quieran) lo compartan…

    T_mix, gracias por el comentario!

    Lukas, gracias por el recordatorio del link ;)
    En los próximos días voy a intentar compartir (tengo que encontrarlo) y manual que me ayudó mucho a comenzar con xhtml y css que si mal no recuerdo estaba liberado bajo CreativeCommons, asi que podemos compartirlo sin problemas ;)

    Sobre tu problema con las columnas, no debes mover las columnas en el HTML sino mover la imágen superior para que coincida donde YA ESTAN tus columnas ;)

  12. Leonardo (@leoachear)

    14. Feb, 2010

    Domingo…mate…sillón…notebook….”Jueves de WordPress” (aunque sea domingo)…¿qué mas puedo pedir?

    Muy bueno lo que hacés, se me pasó volando el videotutorial.

    ¿Cuánto falta para el jueves? Uh 4 días…

    ¡Un abrazo!

    PD: Posicionan bien tus blogs en Google. Te encontré buscando “aprender php” y salió primero phpnight.

  13. Gosunkugi

    30. Mar, 2010

    WAAAA *casi morí* 45 minutos de tutorial! me impresiona la velocidad con que lo hace… aspiro llegar a hacerlo asi de rápido :)

    Una cosita… siempre recomiendan usar la medida de las fuente en em… que piensas de eso?

  14. Cristian Forero

    16. Abr, 2010

    Le agradezo mucho el material que has publicado en jueves de wordpress, mi actual trabajo de diseñador tiene mucho que ver con esto y pues durante gran parte de mi experiencia he sido un diseñador editorial, pero quize empezar a forjar camino por el diseño web, pero por mi poca experiencia había enfrentado gran cantidad de tropiezos en cuanto a maquetación refiere, su tutorial me ayudo un resto, gracias.

    Saludos desde Colombia!

  15. z4d

    04. Nov, 2010

    Oh !! Muchisimas gracias , tu video tutorial esta genial :D !!!!

  16. alfonso

    04. Mar, 2011

    Buen vídeo Marcelo.

    Me queda la duda que al fin y al cabo es un vídeo de maquetación sin más… ¿la integración en WP dónde aparece?

  17. Marcelo

    09. Mar, 2011

    Alfonso, justamente este tutorial es de la parte de maquetación, la primera parte de la integración la puedes ver aquí: http://pixelar.me/integrando-un-theme-en-wordpress/ ;)

    Saludos!

  18. Kevin Jiménez

    26. Jul, 2011

    Marcelo, empecé a noche y ya diseñé todo y lo empecé a maquetar. Me faltan los CSS.

    Se me está haciendo muy entretenido y fácil maquetar themes con tus vídeos.

    Muchas gracias por tu tiempo y compartir esto con nosotros.

    Cuando termine el tema, que será para mi próxima web en francés, crearé un artículo sobre tu “Jueves de WordPress” en mi blog más fuerte :)

    Saludos!

  19. Boris

    09. Sep, 2011

    Hola excelente tutorial…
    gracias por compartir el conocimiento

    saludos

  20. Cristian

    19. Sep, 2011

    Muchísimas gracias por el video, la verdad es que aun no lo miro ya que son las. 2:26 de la mañana y estoy a punto de irme a la cama, per leyendo todos los comentarios me doy cuenta de que el video esta muy bueno po eso cuando me Levante el día de mañana lo mirare, de antemano te agradezco mucho por darte el tiempo de dar tu conocimiento a los demás y por darte el tiempo de hacer tu video.

    Saludos y éxitos.

  21. mario

    22. Feb, 2012

    Muchas Gracias!!! Excelente video, muy bien explicado, te agradezco!!! Ya me pongo a hacer la mía para practicar.

  22. Marito

    03. Jul, 2012

    Great! Excelente para mis alumnos que recien empiezan con esto :)

  23. Andres

    18. Abr, 2013

    Hola amigo,

    He seguido cada uno de los pasos para estilizar el diseño que propone y me ha resultado tal cual como dijo. Felicitaciones! Ya le estare enviando una captura de pantalla con mi pagina.
    Solo me gustaria agregar algo: para no tener que hacer cortes de los rectangulos redondeados y darle fondo transparente, se puede usar las propiedades de CSS3 border-radius y box-shadow, en la cual tambien se pueden controlar la sombra que aparece atrás del rectangulo y la transparencia del rectangulo, asignando color rgba(255,255,255,0.6)

    Saludos

    Andrés

  24. paula

    20. Jul, 2013

    Muchísimas gracias!! lo has explicado muy bien y todo super claro!!!

Deja tu opinión