ceslavaUn profe que hace webs

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:

https://vimeo.com/7562212

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  1. 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!!

    Responder

  3. 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.

    Responder

    1. Hola merkamanu,

      Gracias por tus palabras y disculpas a los maqueros por no haber mencionado mamp, la alternativa a XAMPP.

      Creo haber entendido que el problema es el login, me suena a error en la password.

      Vete a la base de datos y cambia la contraseña, igual ese es el error y a no ser que hayas instalado el servidor de correo no podrás recuperarla por mail.

      En la 2ª parte del seminario se muestra cómo resetear la password desde phpmyadmin. También está explicado en este post:

      http://ceslava.com/blog/has-olvidado-tu-contrasea-cmo-desvelar-asteriscos-y-recuperar-contraseas/

      Si no lo solucionaras te ruego abras un hilo en el foro donde estaré encantado de responderte:

      http://foro.ceslava.com

      Saludos

      Responder

      1. Ya lo he solucionado en el archivo wp-config.php, no se porque, tenia al principio de todo " que deshabilitaba todo el código php. No se, lo debí­ guardar mal (aún me estoy acostumbrando al teclado del mac.)

        Muy bueno tu foro y tus rss`s

        Un saludo, Manu.

        Responder

  6. 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

    Responder

  7. 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

    Responder

  8. 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.

    Responder

  9. 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

    Responder

  13. 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

    Responder

  16. 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.

    Responder

  18. 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

    Responder

  19. 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

    Responder

  20. 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

    Responder