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:
Cómo crear un theme para WordPress (2ª parte) from Cristian Eslava on Vimeo.
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.
- Trabajando con el prototipo del template en Photoshop
Cómo crear un boceto web, mockup o wireframe | Ayudas extras
- 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
- Estructurando la exportación de PS en Dreamweaver CS4
- Explicando la configuración CSS de la plantilla. Conversor de píxel a em
- 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
- Recuperando la contraseña desde PHPMyAdmin directamente. Interesante la codificación en el cambio de la misma.
Cosas del directo: me confundí de instalación de WordPress e intentaba logarme en la URL equivocada. (Disculpas de nuevo).
- 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
- Perfilando el estilo en la nueva template. Será un diseño líquido: + info Fluid Grids
- Preparando la conversión del código estático en dinámico y creando los php base header, index, sidebar, footer
- Entrando en el código php, menos mal que Dreamweaver colorea la sintaxis :-) | Tutorial en inglés: Building Custom WordPress Theme
- Ajustando codificación de caracteres UTF-8 en Opciones > General.
- Definiendo la cabecera y previsualizando las modificaciones en Firefox
- Definiendo la etiqueta H1 para mostrar la cabecera correctamente de forma dinámica para redireccionarla a la home
- Añadiendo nuevas páginas preparándolas para mostrar contenidos distintos.
- Creando el listado de páginas recuperando las etiquetas de wordpress. Especificaciones en el codex del cms http://codex.wordpress.org/es:Main_Page
- Creando el loop de wordpress http://codex.wordpress.org/es:The_Loop
- Header listo y acabado
- Ajustando el contenido de la plantilla html con el loop de wp en index.php
- Definiendo las clases del contenido y creando las mismas en el css
- Especificando en php el ID específico de cada post.
- Explicando las etiquetas que se incluyen en cada post: permalink, title, category, tags, author, edit, etc.
- Eliminando comments_template y terminando el loop en index.php
- Editando footer.php
- Introduciendo también sidebar.php
- Incluyendo la plantilla single.php
- Dudas y preguntas (última media hora)
- Me preguntaron por algún manual para aprender. Volví a recomendar los manuales HTML y CSS de Librosweb.com y los sitios de Fernando Tellado (AyudaWordPress) y Andrés Nieto (aNieto2K), además de las famosas Cheat Sheets. (WP Theme Building Cheat Sheet
- ¿Es recomendable siempre actualizar? La respuesta corta es recomendable pero no necesario, hay que tomarla con calma y hacer primero backups y no siempre notaremos mejoras.
- Hablamos de WordPress como CMS, su uso para otros fines que los de un blog, pusimos de ejemplo el excelente plugin de Andrés Nieto:
Wp-Answers, crea una comunidad de preguntas y respuestas con WordPress | aNieto2K - Recomendé WLW, mi elección entre 25 editores de blogs y Stylizer, para mi el mejor editor CSS, dos aplicaciones para Windows. Felipe propuso Ecto como alternativa para mac de WLW.
- Hablamos de cómo poner varios loops en una sola página.
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.
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!!
Muchas gracias Telúrico, con esos ánimos que me das igual llegamos a las 10 horas XD.
Utiliza el foro para cualquier duda que tengas.
Saludos
buen tuto
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.
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
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.
OK, Manu, me alegras que lo hayas solucionado.
Buen tutorial, muchas gracias.
Me encanta el tuto y toda la info que has recogido.
Una preguntita.
La barra que tienes en el FireFox cual es?
Muchas gracias Javier, la barra es la de la Web Developer
https://addons.mozilla.org/es-ES/firefox/addon/60
Junto al imprescindible Firebug una de las mejores extensiones para diseño web.
Saludos
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
Hola Jose,
Para descargar los vídeos puedes utilizar la aplicación que explico en este artículo:
Descargar swf y vídeos de una web, YouTube o Vimeo con Sothink
Ánimo con el portal y cualquier duda la puedes dejar en el foro:
http://foro.ceslava.com
Saludos
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
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.
Hola Miguel,
Yo trabajo con xampp y va a la perfección.
Cualquier duda déjala en el foro
Saludos y gracias a ti por la visita.
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
Trackbacks/Pingbacks/Retweets
Comentario de WordPress Template Builder | Extensión para Dreamweaver | ceslava – Diseño y Formación por Cómo c… http://bit.ly/2TeOuf
[...] la creación de themes para WordPress existen muchas ayudas, en forma de chuletas (Cheat Sheets) o mejor en forma de plugin o [...]
[...] Cristian Eslava ha publicado parte del tutorial que está impartiendo para el grupo Adobe sobre creación de temas WordPress y aquí tienes las 2 primeras partes, nada menos que cuatro horas de videotutorial. [...]
"Cómo crear un theme WordPress con Adobe CS4". Videotutorial de 4 horas de duración. Por C. Eslava para el grupo Adobe: http://is.gd/64ms7
Cómo crear un theme para WordPress | 4 horas de vídeotutoriales http://bit.ly/4w8lGo
RT @wwwhatsnew: Cómo crear un theme para WordPress | 4 horas de vídeotutoriales http://bit.ly/4w8lGo
RT @wwwhatsnew: Cómo crear un theme para WordPress | 4 horas de vídeotutoriales http://bit.ly/4w8lGo
Otro enlace más para crear una plantilla para wordpress: http://tinyurl.com/ycyxk22 Unas 4 horas de vídeo.
Cómo crear un theme para WordPress | 4 horas de vídeotutoriales | ceslava – Diseño y Formación http://bit.ly/8ULkfx
Genial para #WP! RT @wwwhatsnew: Cómo crear un #theme para #WordPress 4 horas de #vídeotutoriales http://ow.ly/V9GU #Plantillas
Cómo crear un theme para #wordpress | 4 horas de vídeotutoriales | ceslava – Diseño y Formación http://bit.ly/8iYTTA
[...] vídeo creado por Cristian Eslava como parte del tutorial que está impartiendo para el grupo Adobe sobre la creación de themes para [...]
[...] vídeo creado por Cristian Eslava como parte do tutorial que está impartindo para o grupo Adobe sobre a creación de themes para [...]
Tutorial en video para crear temas en wordpress de 4 horas de duración. http://icio.us/qn3w4x
[...] Cristian Eslava ha compartido en su blog el contenido de un reciente seminario electrónico titulado “Cómo crear un theme para WordPress“. Un total de 4 horas de contenido en vídeo, dividido en 2 partes de 2 horas cada una. [...]
comentario @ceslava RT @ceslava: Cómo crear un theme para WordPress | 4 horas de… http://goo.gl/fb/mT8G
comentario @ceslava Vamos a darle caña a ver si nos quedamos con todos los conceptos y no… http://goo.gl/fb/p2bE
RT @ceslava: Cómo crear un theme para WordPress | 4 horas de vídeotutoriales http://bit.ly/2DKrrr
Vamos a darle caña a ver si nos quedamos con todos los conceptos y no muero en el camino :) http://bit.ly/923Q3m
comentario @ceslava Hola, estoy animado a preparar un portal sobre mantenimiento preventivo… http://goo.gl/fb/YZCv
comentario @ceslava Hola Jose, Los vídeos no están disponibles para la descarga. Están… http://goo.gl/fb/Wjuu
comentario @ceslava [...] descargarse un archivo Flash, un swf de una página web. Y al final… http://goo.gl/fb/Kq7J
comentario @ceslava Hola Jose, Para descargar los vídeos puedes utilizar la aplicación que… http://goo.gl/fb/mn0m
[...] descargarse un archivo Flash, un swf de una página web. Y al final la respuesta a otro usuario, Jose, que quería descargarse unos vídeotutoriales que subí a [...]
[...] Cristian Eslava hace un tiemplo creo un seminario de Como crear themes WordPress con Adobe CS4 (photoshop y Dreamweaver), a mi en lo personal me ayudo bastante a comprender algo de como crear themes, un tutorial bastante extenso y bien explicado (4 horas de tutorial), espero les sea de mucha ayuda al igual que lo fue para mi! [...]
[#Recomendado] Cómo crear un theme para WordPress | 4 horas de vídeotutoriales >> http://is.gd/dtY6j