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.
Trackbacks/Pingbacks/Retweets