• Saltar a la navegación principal
  • Saltar al contenido principal
SiliCodeValley

SiliCodeValley

Cursos online de diseño y desarrollo WordPress

  • Newsletter
  • Acceder
  • Suscribirme

De Bootstrap 3 a tema de WordPress

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:

  • Utiliza estos plugins de Sublime Text para desarrollar en WordPress
  • Unsplash y Pexels

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:

  • Template Files – Theme Handbook

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:

  • Template Files – Theme Handbook

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:

  • The Loop – Theme Handbook

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!

Únete al boletín: Diario de un desarrollador web freelance

Importante: envío correos con frecuencia y en cada uno además de contarte historias, consejos y marrones de mi día a día, ofrezco mis productos y servicios. Si esto te supone un problema, no te suscribas. Y si te cansas, podrás darte de baja y tan amigos.

Responsable: David Perálvarez Fernández. Finalidad: Gestionar el envío de información y prospección comercial y dar acceso a los productos online. Legitimación: Consentimiento del interesado. Destinatarios: Empresas proveedoras nacionales y encargados de tratamiento acogidos a privacy shield. Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos como se explica en la información adicional.

¡Ya casi estamos! Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción.

  • Blog
  • Acerca
  • Contacto
  • Privacidad
  • Términos
  • Aviso Legal
  • Cookies

Utilizamos cookies propias y analíticas para darte la mejor experiencia en nuestra web.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los .

Resumen de privacidad
SiliCodeValley

Esta web utiliza cookies propias y analíticas para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Cookies analíticas

Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de cookies

Más información sobre nuestra política de cookies