Cómo crear un theme para WordPress | 4 horas de vídeotutoriales

 

Ayer por la mañana realizábamos la 2ª parte del e-seminario “Cómo crear un theme para WordPress” para el grupo de Adobe del Instituto de Artes Visuales. Otras dos horas que grabamos y que volvemos a compartir.

Por orden y por si os perdisteis la 1ª parte:

Y esta es la grabación de la 2º parte, también í­ntegra y sin editar:

Minutaje aproximado del ví­deo

Del prototipo de Photoshop, a la plantilla final. Exportaciones, generación de CSS y montaje de la página, introducción de las etiquetas de WordPress, etc…

Felipe tuvo la amabilidad de ir comentando el seminario en Facebook. Excepto la parte de Dudas y Preguntas el resto corresponde a unos 5 minutos aproximados. He añadido algunos enlaces con el que ampliar lo que dijimos en el ví­deo.

  1. Trabajando con el prototipo del template en Photoshop
    Cómo crear un boceto web, mockup o wireframe | Ayudas extrasbocetoWeb
  2. Sectorizando y preparando la exportación: “La buena para nada exportación HTML de Photoshop”. Configuración de cuadrí­cula. Ultimate Guide To Grid-Based Web Design: Techniques and Tools, 45+ CSS Grid Systems, Layout Generators and Tutorials that every Designer should know
  3. Estructurando la exportación de PS en Dreamweaver CS4
  4. Explicando la configuración CSS de la plantilla. Conversor de pí­xel a em
  5. Firebug 1.4.5 un buen complemento de diseño web para Firefox. https://addons.mozilla.org/es-ES/firefox/addon/1843 También existe una versión para los usuarios del mac http://getfirebug.com/lite/Safari.html
  6. Recuperando la contraseña desde PHPMyAdmin directamente. Interesante la codificación en el cambio de la misma.imageCosas del directo: me confundí­ de instalación de WordPress e intentaba logarme en la URL equivocada. (Disculpas de nuevo).
  7. Codificación MD5 para codificar correctamente la nueva contraseña. Si eres un desastre como yo para las contraseñas igual te sirve este artí­culo: ¿Has olvidado tu contraseña? Cómo desvelar asteriscos y recuperar contraseñas
  8. Perfilando el estilo en la nueva template. Será un diseño lí­quido: + info Fluid Grids
  9. Preparando la conversión del código estático en dinámico y creando los php base header, index, sidebar, footer
  10. Entrando en el código php, menos mal que Dreamweaver colorea la sintaxis :-) | Tutorial en inglés: Building Custom WordPress Themeimage
  11. Ajustando codificación de caracteres UTF-8 en Opciones > General.
  12. Definiendo la cabecera y previsualizando las modificaciones en Firefox
  13. Definiendo la etiqueta H1 para mostrar la cabecera correctamente de forma dinámica para redireccionarla a la home
  14. Añadiendo nuevas páginas preparándolas para mostrar contenidos distintos.
  15. Creando el listado de páginas recuperando las etiquetas de wordpress. Especificaciones en el codex del cms http://codex.wordpress.org/es:Main_Page
  16. Creando el loop de wordpress  http://codex.wordpress.org/es:The_Loop
  17. Header listo y acabado
  18. Ajustando el contenido de la plantilla html con el loop de wp en index.php
  19. Definiendo las clases del contenido y creando las mismas en el css
  20. Especificando en php el ID especí­fico de cada post.
  21. Explicando las etiquetas que se incluyen en cada post: permalink, title, category, tags, author, edit, etc.
  22. Eliminando comments_template y terminando el loop en index.php
  23. Editando footer.php
  24. Introduciendo también sidebar.php
  25. Incluyendo la plantilla single.php
  26. Dudas y preguntas (última media hora)

Os recomiendo que visitéis también el post de la 1ª parte donde listo una serie de enlaces de utilidad.

Por último agradecer de nuevo a Felipe y al Instituto de Artes Visuales por solicitar mi colaboración. Muy pronto os daré más información sobre otros seminarios que hemos planeado.

WP Themes gratuitos | Theme no_blog

Estos seminarios me han animado a empezar algo que tení­a pensado hace tiempo pero que el tiempo no me lo ha permitido, diseñar themes para WP y distribuirlos de forma gratuita.

Voy a terminar el theme que he empezado a diseñar para este curso para ponerlo a vuestra disposición muy pronto.

image

Escribí esto el 12/11/2009

47 comentarios

  1. Telúrico dice:

    BRUTAL!!! Buenisimo, si señor. Aún no he visto ni el segundo video ni la parte explicada al final en texto, solo vi por ahora (cuando acabe de comentar me pongo a ver YA el segundo video) el primer video, y bueno… esque es genial, muy muy bien explicado. Yo vivo en coruña y es una autentica pena (para mi) que nunca haya por aquí­ cerca ningún seminario de este estilo, ya sea de diseño web, diseño gráfico, tipografí­a… Y no tienes ni idea lo que se agradece que haya gente como tú que se moleste en subir cuatro horas de un seminario. Mis conocimientos son, básicos de CSS y HTML y nulos de PHP (de hecho, de todo el primer video, es la única parte en la uqe me he perdido un poco, pero luego le volveré a hechar un vistazo). Da gracias que yo no estubiera en ese seminario, porque me pondrí­a a preguntar cosas y no salia nadie de allí­ en horas!! jejeje.

    Yo esque estoy empezando a hacer páginas web (poco a poco) y esto me viene GENIAL para un trabajo que tengo que hacer muy próximamente, y gracias a este video alguna se me han aclarado :-)

    Bueno, lo dicho, muy bien explicado, y una pena que en lugar de cuatro horas no fueran 10, jeje.

    Un saludo!!

  2. merkamanu dice:

    Hola ceslava
    Antes de nada gracias por estos dos impresionantes videotutoriales. Yo soy diseñador / programador web en paro y me decidi por aprender a manejar el wordpress. Soy usuario de Mac y he seguido todos tus pasos, excepto que en vez de instalar xammp, he instalado mamp para mac (es igual???).

    He instalado wordpress y mamp y funciona todo correctamente, también modifiqué el archivo wp-config-sample.php.

    Mi problema es el siguiente: ayer accedí­ al backend perfectamente, pero hoy quiero acceder y no puedo. Llego a localhost/wp-login.php pongo mi usuario y mi contraseña y hago click en iniciar sesion pero el navegador (firefox) no me redirecciona a ningún sitio se queda en la misma página (localhost/wp-login.php) pero con todo en blanco. Sin embargo si pongo mal la contraseña o user pues me da el error correspondiente. Tambien puedo acceder al frontend sin problemas (Hola mundo…)

    Bueno, espero haberme explicado y a ver si se te ocurre que puede estar pasando.

    Un saludo, Manu.

  3. WPExplorer dice:

    Buen tutorial, muchas gracias.

  4. Me encanta el tuto y toda la info que has recogido.

    Una preguntita.

    La barra que tienes en el FireFox cual es?

  5. jose l dice:

    Hola, estoy animado a preparar un portal sobre mantenimiento preventivo, he estado leyendo bastante sobre mysql-php. y ya prepare las bases de datos de los equipos, utilizo appserv. por lo pronto quiero configurar en entorno de trabajo con wordpress y vi el video esta vestial, pero quisiera descargarlos, como puedo hacerlo porque con atube Catch me da error. gracias muchas gracias

  6. Miguel dice:

    Muchas gracias por el tutorial. Me está sirviendo de gran ayuda, hace poco empecé a trabajar en marketing online y estoy empezando a hacer mis pinitos con html y css. Si ves que las visitas a tu página han aumentado desmesuradamente no te austes, soy yo el loco que anda por aqui haciendo que aumenten las estadí­sticas. Un saludo

  7. Miguel dice:

    Hola Cristian, tengo una duda con respecto al xampp, ya que yo soy usuario de mac. He leido que has contestado a un compañero que utilice mamp como alternativa para mac, pero he visto que también existe xampp para osx, cual recomiendas? un saludo y muchas gracias.

  8. Analia Dall'Asta dice:

    Hola Buenisimo el tutorial. Me ayudo muchisimo ya q recien empiezo con estos temas. Mi pregunta es: donde puedo conseguir los archivos a los que se hacer referencia en el video??
    muchas graciass

  9. eduardo dice:

    sorry man que hago si ya instale el wordpress en un server como zobyhost que puedo hacer porfavor responde

  10. Yadir Gómez dice:

    Muy bueno me ayudo bastante! gracias!

  11. ceslava dice:

    Muchas gracias a todos, os recuerdo que si queréis seguir aprendiendo sobre WordPress podéis realizar el curso de video2brain, 7 horas de ví­deotutoriales en español por 41,48€:

    Curso completo de WordPress

    Saludos

  12. Felt dice:

    Hola,

    Muy bueno el tutorial, aunque gran parte del contenido ya las sabia,lo que si me falto ver en el tutorial como publicas el wordpress en el servidor real, como se respalda la base de datos, la configuracion, links etc..

    seria genial que me ayudaras en eso..

    Gracias

  13. ceslava dice:

    Hola Felt,

    Gracias. Si necesitas un curso completo de WordPress te recomiendo el que realizó Armando Sotoca para video2brain:

    https://partner.video2brain.com/ceslava/product-680.htm

    Saludos

  14. Dario dice:

    Excelente tutorial !!! como pocos se pueden encontrar. Muchas gracias.

    Tengo una consulta pero me voy al foro para eso.

    Saludos desde Buenos Aires,

    Darío

  15. Carlos dice:

    me parece genial, estos videos me han ayudado bastante… justo ahora tenia que hacer uso de wordpress para crear un blog… y con lo poco que se en css, esto me ayuda muchisimo.

  16. Nahuel dice:

    como pongo slider

  17. TaBienCura.com dice:

    Apenas me tope con estos videos, y espero me sean utiles, de ser asi mi sitio ahora si valdra la pena xD , saludos y se agradece tu tiempo para que otros podamos aprender

  18. Diego dice:

    Hola ceslava acabo de ver el segundo video, el material es excelente muchas gracias por esta valiosa contribucion.

    solo hacerte un comentario, en photosho a la hora de exportar para la web en el boton de la izquierda abajo te permite configurar las opciones de exportacion, en esta ventana podes configurar que se exporte con div y tambien si queres que se haga el css por clases o por id.

    nuevamente muchas gracias por el aporte!

    saludos
    Diego Martinez
    Argentina

  19. roberth imagenes chistosas dice:

    hola, me interesa el curso de diseño gratis que estan dando como aria para aprender con ustedes y si toca pagar mas dinero en el siguiente nivel

  20. Gracias por el contenido compartido. Sin duda muy útil cuando empiezas en el mundo del diseño web.

  21. PosicionarWeb.pro dice:

    Un muy buen tutorial. Además, no conocía el Firebug.
    Llevo 2 días usándolo y es realmente muy útil.

Enlazan a este artículo:

  1. Tutorial Crear Themes Wordpress | Zona PSD
  2. themes for wordpress (how to?)

Tu comentario

Usamos cookies para obtener datos estadísticos de su navegación y poder ofrecer publicidad contextual de terceros

ACEPTAR
Aviso de cookies