El conjunto de vídeos de que estás a punto de ver estuvo durante un tiempo únicamente disponible para los suscriptores del blog de SiliCodeValley. Ahora en cambio he decidido abrirlo para todo aquel que le pueda resultar útil 😀. Por esa razón es posible que algunos comentarios no cuadren, como por ejemplo cuando se menciona que hay una prueba gratuita del club.
Lo que haremos a lo largo de este taller es transformar una plantilla estática (HTML y CSS) diseñada con Bootstrap 3 en un tema 100% funcional de WordPress. ¡Espero que aprendas mucho!
[alert_danger]Importante: Puedes descargarte el código del taller en esta carpeta pública de Google Drive.[/alert_danger]
1- Introducción
Empezaremos descargándonos una nueva instalación de WordPress y gracias a la herramienta MAMP podremos desarrollar de forma local. Si lo prefieres puedes instalar WordPress de forma mucho más sencilla utilizando Local By Flywheel. Aquí te explico cómo hacerlo.
Además te explico con qué ajustes generales y contenido partiremos, de manera que tú también añadas varias entradas (un mínimo de unas 6) y un par de páginas.
Y por último en mi caso estaré utilizando el editor de código Sublime Text pero puedes usar el que prefieras.
Enlaces recomendados para esta lección:
2- Descargando el sitio web estático
El segundo paso será descargarnos la plantilla estática con la que vamos a trabajar. Esta está diseñada con Bootstrap 3, es ideal para empezar por su sencillez y es gratuita.
Acto seguido analizaremos cada apartado para ver qué opciones nos ofrece, los archivos que forman la plantilla y eliminaremos aquellos que no necesitamos.
3- Descargando e instalando el tema starter Underscores
Es momento de descargarnos e instalar el tema starter Underscores, el cual nos facilitará muchísimo el proceso de desarrollo de nuestro tema de WordPress.
Enlaces recomendados para esta lección:
- What is a Theme? – Theme Handbook
- Template Files – Theme Handbook
- Template Hierarchy – Theme Handbook
4- Cabecera dinámica
Empezamos a ensuciarnos un poco las manos construyendo nuestra cabecera dinámica, para ello utilizaremos la plantilla header.php
Enlaces recomendados para esta lección:
5- Pie de página dinámico
Seguimos ahora dinamizando el pie de página, para ello usaremos la plantilla footer.php
Enlaces recomendados para esta lección:
6- Blog: El Loop de WordPress
Vamos con uno de los pilares clave a la hora de desarrollar temas de WordPress: el Loop, que nos permite recorrer el listado de entradas de nuestro blog y mostrarlo donde deseemos, en nuestro caso en index.php
Enlaces recomendados para esta lección:
7- Blog: La Paginación
A continuación nos encargaremos de añadir paginación a nuestro tema de WordPress, para así controlar cuantas entradas queremos que se muestren por página.
8- Blog: Detalle de un artículo
Es turno de dinamizar el contenido de una entrada y para ello utilizaremos la plantilla single.php junto con los template tags que nos ofrece WordPress, que son unas funciones muy útiles.
9- Páginas
Ya tenemos listas las entradas, pero todavía nos queda mostrar el contenido de las páginas, para ello utilizaremos la plantilla page.php
10- Páginas: Formulario de contacto
Para acabar como te dije en la introducción del taller incluiremos un formulario de contacto en nuestro sitio web gracias al plugin Contact Form 7 y lo integraremos con Bootstrap.
¡Genial ya tenemos listo nuestro tema de WordPress! Por supuesto ha sido un tema sencillo ideal para empezar y, si quieres aprender a fondo y desde cero cómo diseñar y desarrollar tus propios temas de WordPress profesionales echa un vistazo a este curso.
¡Un abrazo!
