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!
Importante: Puedes descargarte el código del taller en esta carpeta pública de Google Drive.
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.
Accede a todos los cursos y soporte del club
Únete a partir de 29€/mesAdemá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!
